Skip to content
armenus
Get started

Example apps

Examples live in the private repository. Repository access is required; native examples also need validation with the relevant device toolchain.

For a version you can poke at without cloning anything, the integration overview explains the supported paths and current availability.

React (web)

A dish grid and a detail view with 3D and AR, in about 200 lines.

Vite + React <model-viewer>

React Native

A FlatList of dishes with viewport prefetching, and a native AR detail screen.

Expo dev build SceneKit / Filament

Flutter

The same grid and detail screen, over platform views.

Flutter 3.22+ SceneKit / Filament

Plain JavaScript

No build step, no framework. For dropping a dish onto a site you do not want to rebuild.

One HTML file <model-viewer>

Running one

terminal
git clone https://github.com/Internalizable/armenus
cd armenus/examples/react-web

pnpm install
cp .env.example .env        # add your publishable key
pnpm dev                    # http://localhost:5173

What they all do

All four follow the same three steps, so they are worth reading side by side.

  1. Call config() before anything else. It is the only call that tells a revoked key apart from an empty menu, and a bad key presenting as “this restaurant sells nothing” is the most confusing way for an integration to fail.
  2. List with withModel: true, showing poster images in the grid rather than a renderer per cell.
  3. Render one dishwith the SDK’s model component, which handles device capability, format selection, prefetching and the AR handoff.

Why the grids show photos

Every example uses the poster image for list cells and mounts the viewer only on the detail screen. That is not a shortcut — it is the recommendation.

On the web, <model-viewer>is ~300 kB plus a mesh per instance; twenty of them to draw thumbnails costs several megabytes to show what a still image already shows. On native it is worse: each cell is a GPU surface with its own render loop, and a scrolling feed of them drains the battery and drops below 60fps.

the pattern
// In the grid — a photo.
const poster = item.model?.posterUrl ?? item.imageUrl;

// On the detail screen — the real thing.
<ArmenusModel item={item} />

Getting a key

From the dashboard under Settings → Embedding, or from the partner API. Publishable keys are safe to commit — they ship inside your bundle either way. See Publishable keys.

terminal
curl https://api.armenus.app/v1/partner/publishable-keys \
  -H "Authorization: Bearer ak_your_secret_key" \
  -H "Content-Type: application/json" \
  -d '{"label":"example app","allowedOrigins":[]}'