Acme Component Library Demo

Client-only demo app for AI-assisted docs navigation.

Stack

• React + TanStack Start in client-only SPA mode (no SSR)
• TanStack Router for routing
• TanStack AI + ClientTool actions for command-palette navigation
• shadcn/ui-style primitives for layout and styling
• No backend

Routes

• / — landing page
• /docs — docs index + onlooker model-assignment instructions
• /docs/components/:slug — per-component docs page

Included component slugs:

• accordion
• alert
• alert-dialog
• avatar
• badge
• button
• calendar
• card
• checkbox
• dialog
• dropdown-menu
• form
• input
• label
• popover
• progress
• radio-group
• select
• separator
• tabs

Command palette behavior

• Open from any page with Cmd/Ctrl + K
• Input-only by default (no static command list)
• Uses AI tool calls:
  • navigate_to({ route })
  • search_docs({ query })
• search_docs returns top 3 fuzzy matches
• If multiple matches exist, a disambiguation list appears in the palette
• Selecting a disambiguation result triggers navigation and shows toast feedback
• If nothing matches, the app shows:
  • Hm, doesn’t look like we have that one

Onlooker guide: select and assign a model

The app is client-only, so model assignment happens in-browser.

1. Click Model settings in the top navigation.
2. In Model, pick a preset or type a model ID.
3. In Endpoint, provide your provider base URL (OpenAI default is prefilled).
4. Paste an API key in API key.
5. Click Assign model.
6. Use Cmd/Ctrl + K and type natural-language doc requests.

Model settings are stored in local browser storage on the running device.

Local development

pnpm install
pnpm run dev

Verification

pnpm run lint
pnpm run format:check
pnpm run typecheck
pnpm run build