The 6 SDK + AI showcase demos

All six live in app/src/apps/. The launcher that opens them is app/src/App.tsx. Each demo is ~80–115 lines of single-file React.

The 6 demos at a glance

Each demo:

• Owns its own color palette + iconography (you'll keep this for your fork)
• Wires useAi() from app/src/lib/useAi.ts to call api.ai.complete
• Renders an <AiResponse> for the result + loading + error state
• Accepts a single onExit prop the launcher uses to navigate back

Pick the right starting point

Match by interaction model, not by sensor list. If two demos look right, fork the simpler one; it's faster to add a second sensor to Tour Guide than to remove an unused gesture hook from Sous-Chef.

File map

Every demo has the same shape:

export function MyDemo({ onExit }: { onExit: () => void }) {
  const { position } = useGeolocation();   // or useDeviceMotion / useNeuralBand
  const ai = useAi();

  function askAi() {
    ai.ask("prompt with ${sensor values}", {
      system: "You are a ...",
      maxTokens: 80,
    });
  }

  return (
    <div className="screen" style={{ gap: 14 }}>
      <div className="app-head">…label + status…</div>
      …sensor readout…
      <AiResponse ai={ai} placeholder="..." />
      <div className="row">
        <button className="focusable" onClick={askAi}>Action</button>
        <button className="focusable" onClick={onExit}>← Back</button>
      </div>
    </div>
  );
}

Once you've internalized that shape, swapping a demo for your own is mechanical.

The fork workflow

Goal: turn Wayfinder.tsx into MyApp.tsx (or whatever your demo is called). Five steps.

cp app/src/apps/Wayfinder.tsx app/src/apps/MyApp.tsx

export function MyApp({ onExit }: { onExit: () => void }) { … }

import { MyApp } from "./apps/MyApp";

const APPS = {
  myApp: {
    label: "My App",
    tagline: "GPS · AI",
    Component: MyApp,
  },
  // …keep the demos you still want, drop the ones you don't…
} as const;

function askAi() {
  if (!position) return;
  ai.ask(
    `I'm at ${position.lat}, ${position.lon}. Tell me X about Y.`,
    {
      system: "You are a {your-product-role}. {Your tone rules}.",
      maxTokens: 90,
    },
  );
}

const CYAN = "#5ad8ff";        // Wayfinder
const VIOLET = "#b48cff";      // Tour Guide
const ORANGE = "#ff9b52";      // Running Coach

<svg viewBox="0 0 64 64" width="86" height="86"
     style={{ color: YOUR_HEX, filter: `drop-shadow(0 0 16px ${YOUR_HEX})` }}>
  <path d="…" stroke="currentColor" />
</svg>

Removing a demo entirely

Delete the file in app/src/apps/ and remove its entry from APPS in app/src/App.tsx. TypeScript will flag any stale import. No other touchpoints; the launcher renders from APPS keys alone.

Adding a NEW demo type

If none of the six fit, start from the simplest (Tour Guide) and add the sensors you need. The available sensor hooks are in glasses-ui:

• useGeolocation() → { position, error }
• useDeviceOrientation() → { alpha, beta, gamma, error }
• useDeviceMotion() → { x, y, z, error }
• useNeuralBand() → "pinch" | "fist" | "swipe" | null

D-pad navigation is automatic: anything with className="focusable" participates. useDpad() is wired once in App.tsx's root so buttons inside your demo "just work."

Testing demos locally

See Quickstart §5. TL;DR: open localhost:5173 in the same browser you signed into the companion with, use arrow keys for the D-pad, use Chrome DevTools' Sensors panel to override GPS / motion / orientation.

For real-glasses testing, tunnel localhost:5173 with cloudflared tunnel --url http://localhost:5173 and paste the returned HTTPS URL into the Meta AI app's "Add Web App" flow. The Clerk session shared with the companion (via Convex) propagates automatically.