> ## Documentation Index
> Fetch the complete documentation index at: https://docs.outkit.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Wire Outkit into your app in under 5 minutes — entirely from your terminal

The fastest way to get Outkit running is the CLI. One install, one login, one `init` —
your project is wired, your SDK is installed, your API key is written to `.env.local`, and a
working swap snippet is printed in your terminal.

## 1. Install the CLI

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install -g @outkit-dev/cli@latest
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add -g @outkit-dev/cli@latest
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn global add @outkit-dev/cli@latest
    ```
  </Tab>

  <Tab title="bun">
    ```bash theme={null}
    bun add -g @outkit-dev/cli@latest
    ```
  </Tab>
</Tabs>

## 2. Sign in

```bash theme={null}
outkit login
```

Opens your browser, approves the device, and saves a token to
`~/.outkit/credentials.json`. Confirm with:

```bash theme={null}
outkit whoami
```

## 3. Wire your project

From the root of your app:

```bash theme={null}
outkit init
```

`outkit init` does the whole setup:

<Steps>
  <Step title="Detects your framework">
    React, Next.js, Vue, Svelte, Astro, vanilla JS — picks the right SDK.
  </Step>

  <Step title="Picks a profile">
    Uses your team's active profile, or offers to create one seeded with design tokens
    detected from your codebase.
  </Step>

  <Step title="Installs the SDK">
    `@outkit-dev/react` for React projects, `@outkit-dev/core` for everything else.
  </Step>

  <Step title="Writes the backend proxy">
    A server route that forwards to `POST /render/enhance` so your API key never reaches
    the browser.
  </Step>

  <Step title="Writes outkit.json">
    Repo-local config the rest of the CLI reads. Commit it.
  </Step>
</Steps>

See [Project Setup](/docs/cli/setup) for full details on what `outkit init` writes.

## 4. Generate an API key

```bash theme={null}
outkit keys create -n "dev"
```

The plaintext key is shown **exactly once**. The CLI offers to append it to your
`.env.local` as `OUTKIT_API_KEY=…`.

## 5. Render

The init command printed a swap snippet for your stack. For React it looks like this:

```tsx theme={null}
import { AIRenderer, useBlockStream } from '@outkit-dev/react';

function ChatMessage({ messageId }: { messageId: string }) {
  const { blocks, design, isStreaming, feedResponse, reset } = useBlockStream();

  const enhance = async () => {
    reset();
    const response = await fetch(`/api/enhance/${messageId}`);
    await feedResponse(response);
  };

  return (
    <div>
      <button onClick={enhance}>Enhance</button>
      <AIRenderer
        blocks={blocks}
        design={design}
        streaming={isStreaming}
        theme="auto"
      />
    </div>
  );
}
```

`feedResponse` reads the SSE stream, extracts design tokens, parses blocks incrementally,
and signals completion — at 60 fps via `requestAnimationFrame` batching.

## 6. Verify

```bash theme={null}
outkit doctor --full
```

End-to-end check: auth, network, project mode, SDK packages, the wire format, and the
design-token meta event. Use `--json` to consume from CI.

To watch real renders as they happen while you develop:

```bash theme={null}
outkit dev
```

## Prefer the REST API directly?

The CLI is the recommended path. If you can't run the CLI in your environment, you can
still call the API from any language:

```bash theme={null}
curl -X POST https://api.outkit.dev/render/enhance \
  -H "Content-Type: application/json" \
  -H "x-outkit-api-key: your-api-key" \
  -d '{
    "content": "PostgreSQL is relational with full ACID compliance.\n\n| Feature | PostgreSQL | MongoDB |\n|---------|-----------|---------|\n| Data Model | Relational | Document |\n| ACID | Full | Multi-doc since 4.0 |",
    "context": "User comparing databases for e-commerce"
  }'
```

The API returns structured `ContentBlock[]` with component types, typed props, and
fallback text. See the [API Reference](/docs/api/overview) for the full surface.

To get an API key without the CLI, sign in at [app.outkit.dev](https://app.outkit.dev),
create a profile, and click **Generate API Key**.

## What's Next?

<CardGroup cols={2}>
  <Card title="CLI Overview" icon="terminal" href="/docs/cli/overview">
    Every command at a glance, plus the auth model and file layout.
  </Card>

  <Card title="React SDK" icon="react" href="/docs/sdk/react">
    Full `useBlockStream` API, `AIRenderer` props, design tokens, and proxy patterns.
  </Card>

  <Card title="API Reference" icon="code" href="/docs/api/enhance">
    Request and response schema for `POST /render/enhance`.
  </Card>

  <Card title="Components" icon="grid-2" href="/docs/components">
    Browse all 50+ component types with prop schemas.
  </Card>
</CardGroup>