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.

outkit init is the one command that wires your project to Outkit. It detects your framework, lets you pick (or create) a profile, installs the right SDK, writes the backend proxy endpoint, and prints the swap snippet for your stack.

​
Prerequisites

npm install -g @outkit-dev/cli@latest
outkit login
If you have not signed in yet, see CLI Overview.

​
outkit init

Run it from the root of your project: 
outkit init
What it does:
  1. Detects your framework — React, Next.js, Vue, Svelte, Astro, vanilla JS — and picks the right SDK package.
  2. Detects your design tokens — and applies them to your profile.
  3. Picks a profile — uses your team’s active profile, or offers to create one seeded with the detected tokens.
  4. Installs the SDK — @outkit-dev/react or @outkit-dev/core (use --no-install to skip).
  5. Writes the backend proxy — server route that forwards to POST /render/enhance and keeps your API key on the server.
  6. Writes outkit.json — repo-local config the rest of the CLI reads.
  7. Prints the swap snippet — the exact JSX/HTML to drop into your component.

​
Flags

FlagEffect
--no-installDon’t install the SDK package — just write configs and snippets.
--profile <id>Skip the profile picker and bind to a specific profile.

​
outkit.json

{
  "version": 1,
  "mode": "react",
  "teamId": "61e19e7d-…",
  "profileId": "1ff19764-…",
  "backendUrl": "${OUTKIT_API_BASE_URL}",
  "sdkVersion": "latest",
  "themeMap": { "primary": "--brand-pink", "bg": "--page-bg" }
}
Commit this file. The CLI rewrites it in place when you switch profiles or run outkit upgrade.

​
After init

You’ll see something like: 
✔ React detected (Next.js 15)
✔ Profile: ok-demo (1ff19764)
✔ Installed @outkit-dev/react
✔ Wrote app/api/enhance/[id]/route.ts
✔ Wrote outkit.json
✔ Wrote outkit.theme.json

Next:
  1. outkit keys create -n "dev key"   # generate a key, written to .env.local
  2. outkit dev                         # tail render logs while you work
  3. Copy the snippet below into your chat component:

import { AIRenderer, useBlockStream } from '@outkit-dev/react';
…

​
Switching profiles or teams

outkit switch          # interactive picker
outkit profiles use <profileId>
Both commands rewrite outkit.json. To pull the new profile’s tokens into your repo: 
outkit theme pull

​
Upgrading

When the SDK gets a new release: 
outkit upgrade
This bumps the @outkit-dev/* packages and runs any required codemods. To preview migrations between two specific versions: 
outkit migrate <from> <to>

​
Undo

init, theme apply, upgrade, and agent are all journaled to ~/.outkit/undo.json. To reverse the most recent code-mutating command: 
outkit undo
The undo refuses to clobber files you have edited since the command ran. Dependencies are not auto-removed — the CLI prints the uninstall command for you.

​
Health check

After init (and any time things look off): 
outkit doctor --full
doctor checks auth, network reachability, project mode, SDK packages, the wire format end to end, and the design-token meta event. Use --json to consume it from CI.

​
Next Steps

Generate API keys

Plaintext keys are shown once. The CLI offers to write them to .env.local.

Sync design tokens

outkit theme detect / apply / sync keeps your profile in lockstep with your codebase.