# 21st Agents Documentation

> 21st Agents is agent infrastructure for shipping AI agents inside your product. Configure, deploy, and observe production-grade agents with a beautiful built-in UI. Works with Claude Code and OpenAI Codex runtimes.

21st Agents provides: agent-as-a-service runtime, SSE streaming, E2B sandboxed execution, tool orchestration, visual theme presets (Notion / Cursor / Minimal), skills system for on-demand context, a logs dashboard for debugging, and per-dialog cost tracking.

## Get Started

- [Introduction](https://miro-dev.21st.dev/agents/docs): Add a production-ready AI agent to your product without building the infrastructure yourself. 21st Agents handles the runtime, sandboxing, streaming, tools, and UI - you just configure and ship.
- [Chat](https://miro-dev.21st.dev/agents/docs/api-reference/chat): SSE streaming chat endpoint with AI SDK compatibility. Send messages and receive streaming responses.
- [Errors](https://miro-dev.21st.dev/agents/docs/api-reference/errors): The API uses standard HTTP status codes and returns structured error responses with machine-readable error codes.
- [Sandbox Operations](https://miro-dev.21st.dev/agents/docs/api-reference/sandbox-operations): Run commands, read/write files, and clone repos inside a sandbox.
- [Sandboxes](https://miro-dev.21st.dev/agents/docs/api-reference/sandboxes): A sandbox is a persistent runtime environment with its own filesystem, git state, and sessions. All endpoints require an `Authorization: Bearer YOUR_API_KEY` header.
- [Threads](https://miro-dev.21st.dev/agents/docs/api-reference/threads): A thread is a conversation within a sandbox. Each thread has its own message history, status, and cost tracking.
- [Core Concepts](https://miro-dev.21st.dev/agents/docs/core-concepts): The primitives that make up the 21st Agents platform and how they fit together.
- [Get Started](https://miro-dev.21st.dev/agents/docs/get-started): Create an agent, deploy it, and add it to your Next.js app.
- [Try It Out](https://miro-dev.21st.dev/agents/docs/try-it-out): See how agent chats can look with a few example visual styles. Select a style below to preview the chat experience.
- [Introduction](https://miro-dev.21st.dev/agents/docs/knowledge-base): The Knowledge Base covers common questions, architecture details, and practical guidance for building agents with 21st SDK. Use it as a reference alongside the [Getting Started](/agents/docs/md/get-started) guide and [API Referen
- [Best Practices](https://miro-dev.21st.dev/agents/docs/knowledge-base/best-practices): Optimizing cost, choosing between skills and system prompts, and security considerations.
- [How to Build a Production Agent on Claude Code](https://miro-dev.21st.dev/agents/docs/knowledge-base/claude-code-agent): Everything you need to know about running Claude Code (Claude Agent SDK) in a cloud sandbox, streaming responses to a React UI, adding custom tools, and deploying for production use.
- [Messages & History](https://miro-dev.21st.dev/agents/docs/knowledge-base/messages-and-history): How message persistence works, lazy loading history, and restoring conversations on mount.
- [Models & Providers](https://miro-dev.21st.dev/agents/docs/knowledge-base/models-and-providers): 21st Agents supports multiple AI models from different providers. Use Anthropic Claude natively or connect any model through OpenRouter for maximum flexibility.
- [Sandboxes & Infrastructure](https://miro-dev.21st.dev/agents/docs/knowledge-base/sandboxes): Sandbox specs, shared volumes, lifecycle hooks, concurrent users, and persistent storage.
- [Troubleshooting](https://miro-dev.21st.dev/agents/docs/knowledge-base/troubleshooting): Common issues and how to fix them.
- [Templates](https://miro-dev.21st.dev/agents/docs/templates): Pre-built agent templates to get started quickly. Clone a template, deploy it, and integrate into your app.
- [Next.js Starter](https://miro-dev.21st.dev/agents/docs/templates/chat-app): Next.js chat interface with AI agent powered by 21st Agents SDK
- [Docs Assistant (llms.txt)](https://miro-dev.21st.dev/agents/docs/templates/docs-assistant): Documentation Q&A agent — provide a docs URL and get an instant assistant that searches via llms.txt
- [AgentMail Agent](https://miro-dev.21st.dev/agents/docs/templates/email-agent): Email operations copilot — send, read inbox, auto-reply via AgentMail
- [Form Autocomplete](https://miro-dev.21st.dev/agents/docs/templates/fill-form): AI-powered form filling with tabbed forms and chat interface
- [Go Starter](https://miro-dev.21st.dev/agents/docs/templates/golang-terminal-chat): Minimal terminal chat client in Go using the 21st SDK
- [Lead Research Agent](https://miro-dev.21st.dev/agents/docs/templates/lead-research-agent): Research people by email online, qualify leads, and send Slack alerts for interesting prospects
- [Slack Monitor Agent](https://miro-dev.21st.dev/agents/docs/templates/monitor-agent): Track service status and send updates directly to Slack
- [Explain GitHub repos with Nia](https://miro-dev.21st.dev/agents/docs/templates/nia-chat): Next.js repository chat with Nia MCP-backed GitHub analysis
- [Note Taker with Convex](https://miro-dev.21st.dev/agents/docs/templates/note-taker): AI notebook assistant with persistent notes and real-time sync via Convex
- [Python Starter](https://miro-dev.21st.dev/agents/docs/templates/python-terminal-chat): Minimal server-side Python chat client using the 21st SDK
- [Support Agent](https://miro-dev.21st.dev/agents/docs/templates/support-agent): Docs-powered support agent that answers questions from llms.txt and escalates unanswered ones via email (Resend)
- [BrowserUse Agent](https://miro-dev.21st.dev/agents/docs/templates/web-scraper): Extract structured data from any website using Browser Use Cloud

## Reference

- [API Reference](https://miro-dev.21st.dev/agents/docs/api-reference): REST API for the 21st Agents runtime. Manage sandboxes, threads, files, and stream chat responses.
- [Server SDK](https://miro-dev.21st.dev/agents/docs/reference/server): Reference for the runtime sandbox/thread API from the selected server SDK package `@21st-sdk/node`, plus the token exchange helpers from `@21st-sdk/nextjs/server`.

## Build

- [Agents](https://miro-dev.21st.dev/agents/docs/build/agents): Reference for the configuration options available in your agent definition - runtimes, models, tools, permissions, and attachments. See [Build & Deploy](/agents/docs/md/agent-projects) for project setup and CLI.
- [Sandbox](https://miro-dev.21st.dev/agents/docs/build/sandbox): Use the sandbox config in your agent definition to define the default filesystem, template build, working directory, and per-sandbox setup for every sandbox created from a deployed agent.
- [Skills](https://miro-dev.21st.dev/agents/docs/build/skills): Skills are reusable blocks of instructions that give your agent deeper context on specific topics - API details, behavioral rules, step-by-step procedures, or anything else it needs to know.
- [System Prompts](https://miro-dev.21st.dev/agents/docs/build/system-prompts): The system prompt is the single most important setting for your agent. It defines who the agent is, what it knows, and how it behaves.
- [Themes](https://miro-dev.21st.dev/agents/docs/build/themes): Customize the chat UI with theme variables. The preview below shows a few example styles from the docs playground, but in code the `theme` prop accepts a `theme.json` object rather than a preset string.
- [Tools and MCPs](https://miro-dev.21st.dev/agents/docs/build/tools-and-mcps): There are two MCP paths in 21st Agents: your own `tools` now run through the runtime inside the E2B sandbox, while third-party MCP servers are configured with a sibling `.mcp.json` file next to the agent entrypoint and uploaded during deplo

## Deploy & Operate

- [Backend Integration](https://miro-dev.21st.dev/agents/docs/deploy/backend-integration): Use agents from your server — create sandboxes, manage threads, run agents programmatically, and exchange tokens.
- [CLI](https://miro-dev.21st.dev/agents/docs/deploy/cli): Use `@21st-sdk/cli` to authenticate, deploy agents, manage environment variables, and inspect logs from your terminal.
- [Deploy](https://miro-dev.21st.dev/agents/docs/deploy/deploy): CLI commands, deploy pipeline, redeploying, and what lives where. Set up your project first in [Project Setup](/agents/docs/md/build/agents).
- [Frontend Integration](https://miro-dev.21st.dev/agents/docs/deploy/frontend-integration): Add an agent chat to your Next.js app with the React SDK — install, create a token route, drop in the chat component.
- [Logs](https://miro-dev.21st.dev/agents/docs/deploy/logs): Browse individual chat sessions, inspect every thread, and debug errors from the Logs view.
- [Observability](https://miro-dev.21st.dev/agents/docs/deploy/observability): High-level view of your agent activity - session counts, cost tracking, error rates, and usage trends across all your agents.

## Security & Access

- [API Keys & Environment Variables](https://miro-dev.21st.dev/agents/docs/security/api-keys): How to create, use, and protect API keys that authenticate your app's requests, and how to manage environment variables for your agents.
- [Security](https://miro-dev.21st.dev/agents/docs/security/overview): How the 21st Agents runtime isolates agent execution, protects secrets, and controls access to tools and model providers.

## OpenAPI Specs

- [openapi](https://miro-dev.21st.dev/agents/openapi.json)