# Set up with AI

> A copy-paste prompt that lets Claude Code, Cursor, Copilot or Codex add Qikbar to your app.

Source: https://qikbar.com/docs/ai-setup

Qikbar is designed so that a coding agent can integrate it in one pass. The agent reads your router, pages and API, then writes the config. Copy this prompt into Claude Code, Cursor, Windsurf, GitHub Copilot, Codex, or any other agent:

```text
Add a Qikbar command bar (⌘K) to this app.

Qikbar is an open-source, zero-dependency command bar library (npm package `@qikbar/qikbar`). The full documentation for AI agents is at https://qikbar.com/llms-full.txt. Read it before you start.

Do the following:

1. Install it with this project's package manager (`npm install @qikbar/qikbar`, `pnpm add @qikbar/qikbar`, `yarn add @qikbar/qikbar` or `bun add @qikbar/qikbar`).

2. Find how this app does routing (Next.js, React Router, TanStack Router, Vue Router, SvelteKit, Remix, Astro, or plain links). Mount Qikbar once, near the root:
   - React and Next.js: render `<Qikbar … />` from `@qikbar/qikbar/react` in the root layout or a top-level client component.
   - Anything else: call `createQikbar({ … })` from `@qikbar/qikbar` once on the client.
   - Pass the router's navigate function as `navigate`, for example `navigate: (href) => router.push(href)`.

3. Add a `routes` entry for every main page you find (path, title, an `icon` from the built-in icon names, and `keywords`). Group them with `section`.

4. Add `commands` for the main actions a user takes (create, invite, toggle, sign out, open settings…). Wire them to the app's existing functions. Use `view: form({...})` for actions that need input. Use `arguments` for one or two quick text inputs.

5. For each main kind of record (projects, users, documents, orders…), add a `sources` entry. It calls the app's existing API or data layer with the query and returns items (`title`, `subtitle`, `href`, `icon`). Respect the `signal` for cancellation.

6. Make it match the app's design. Set `theme: { vars: { … } }` from the app's colors, font, and radius (accent, bg, fg, border, radius, font). Set `appearance: 'auto'` if the app has a dark mode.

7. Add a visible trigger, for example a "Search… ⌘K" button in the header, with the `data-qikbar-open` attribute or `useQikbar().open()`.

8. If the app already uses an AI provider, or the user wants AI: add a server route with `createHandler` from `@qikbar/qikbar/server`, and set `ai: proxy('/api/qikbar')` on the client. Keep API keys on the server. Otherwise skip AI.

9. Add the built-in extensions that fit: `calculator()`, `themeSwitcher()` (only if the app has dark mode), and `shortcuts()` from `@qikbar/qikbar/extensions`.

10. Run the type checker and the build. Fix any errors. Then summarize what you added, with file paths.

Keep the changes small and idiomatic for this codebase. Don't add new dependencies besides `@qikbar/qikbar`.
```

You can also fetch it directly: [`/prompt.txt`](/prompt.txt).

## Documentation for AI

Every page in these docs is available as plain Markdown:

- **[/llms.txt](/llms.txt)**: an index of every page, following the [llms.txt](https://llmstxt.org) convention
- **[/llms-full.txt](/llms-full.txt)**: the entire documentation in one file
- **Any page + `.md`**: for example [`/docs/sources.md`](/docs/sources.md)

Each docs page also has **Copy as Markdown**, **Open in Claude** and **Open in ChatGPT** buttons at the top.

## Tips for agents

- Mount Qikbar **once**. In React, render `<Qikbar>` near the root. Elsewhere, call `createQikbar` in your client entry.
- Use the app's router for `navigate`. Never hard-code `window.location` if a router exists.
- Use `sources` for data that lives on the server, with the app's existing fetch layer.
- Theme with the app's existing CSS variables, for example `vars: { accent: 'var(--primary)' }`.
- Keep AI keys on the server with `createHandler` from `@qikbar/qikbar/server`.

## Add Qikbar to your project instructions

If your repo has an `AGENTS.md`, `CLAUDE.md` or `.cursor/rules`, add this line so future changes keep the bar up to date:

```md
When adding a page, route, or user-facing action, also register it with Qikbar (see src/command-bar.ts). Qikbar docs: https://qikbar.com/llms.txt
```