> ## 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.

# Introduction

> Transform raw AI text into rich, interactive UI components

Outkit transforms raw AI text responses into structured, interactive UI components. Instead of showing users walls of markdown, Outkit automatically detects tables, charts, checklists, alerts, and 50+ other component types in your AI output — and returns structured data your frontend can render beautifully.

**One line of code. 10x better AI output.**

```jsx theme={null}
// Before — plain markdown
<Markdown>{aiResponse}</Markdown>

// After — rich interactive components
<AIRenderer content={aiResponse} />
```

## How It Works

Outkit is a **post-processing layer**. It doesn't proxy your LLM calls or touch your tokens. Your agents, orchestration, and API keys stay untouched. At the very end, when you have a response meant for a human, you pass it through Outkit.

1. **Your LLM generates a response** — any model, any provider, any framework
2. **Outkit understands the response** — detects structure like comparisons, metrics, steps, timelines
3. **Outkit extracts structured props** — returns typed component data (table columns/rows, chart datasets, checklist items)
4. **Your frontend renders rich UI** — using Outkit's renderer or your own components

The entire process adds 1–5 seconds and costs fractions of a cent per call.

## Get Started in One Command

The Outkit CLI is the recommended way to set up Outkit. It detects your framework, picks a
profile, installs the SDK, writes the backend proxy, and prints the swap snippet — in one
command.

```bash theme={null}
npm install -g @outkit-dev/cli@latest
outkit login
outkit init
```

See the [Quickstart](/docs/quickstart) for the full flow, or [CLI Overview](/docs/cli/overview)
for every command.

## Ways to Integrate

<CardGroup cols={3}>
  <Card title="CLI" icon="terminal" href="/docs/cli/overview">
    Recommended. Wire your project, manage keys, sync design tokens, and tail logs from the
    terminal.
  </Card>

  <Card title="React SDK" icon="react" href="/docs/sdk/react">
    Drop-in React component with streaming, Shadow DOM isolation, and design tokens.
  </Card>

  <Card title="REST API" icon="code" href="/docs/api/overview">
    Direct HTTP integration for custom applications, backends, and AI pipelines.
  </Card>
</CardGroup>

## Quick Links

<CardGroup cols={3}>
  <Card title="Quickstart" icon="rocket" href="/docs/quickstart">
    Get running in under 5 minutes.
  </Card>

  <Card title="Components" icon="grid-2" href="/docs/components">
    Explore the 50+ component types Outkit can generate.
  </Card>

  <Card title="Examples" icon="eye" href="/docs/examples">
    See real input/output examples.
  </Card>
</CardGroup>