Skip to main content

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.

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

npm install -g @outkit-dev/cli@latest

​
2. Sign in

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

​
3. Wire your project

From the root of your app: 
outkit init
outkit init does the whole setup:
1

Detects your framework

React, Next.js, Vue, Svelte, Astro, vanilla JS — picks the right SDK.
2

Picks a profile

Uses your team’s active profile, or offers to create one seeded with design tokens detected from your codebase.
3

Installs the SDK

@outkit-dev/react for React projects, @outkit-dev/core for everything else.
4

Writes the backend proxy

A server route that forwards to POST /render/enhance so your API key never reaches the browser.
5

Writes outkit.json

Repo-local config the rest of the CLI reads. Commit it.
See Project Setup for full details on what outkit init writes.

​
4. Generate an API key

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: 
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

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: 
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: 
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 for the full surface. To get an API key without the CLI, sign in at app.outkit.dev, create a profile, and click Generate API Key.

​
What’s Next?

CLI Overview

Every command at a glance, plus the auth model and file layout.

React SDK

Full useBlockStream API, AIRenderer props, design tokens, and proxy patterns.

API Reference

Request and response schema for POST /render/enhance.

Components

Browse all 50+ component types with prop schemas.