How to Build a Production Agent on Claude Code

What is Claude Code and why run it as a production agent?

Claude Code is Anthropic's agentic coding runtime (also called the Claude Agent SDK). It can read and write files, run terminal commands, search the web, and reason through multi-step tasks autonomously. Out of the box, it's a local CLI — great for personal use but not for serving users at scale.

To turn it into a production agent you need infrastructure: cloud sandboxing, SSE streaming, authentication, multi-tenancy, cost controls, and a chat UI. That's what 21st SDK provides — it wraps Claude Code in a secure E2B sandbox, handles the infra, and gives you a drop-in React component.

What built-in tools does a Claude Code agent have access to?

When you set runtime: "claude-code" (the default), the agent runs on the full Claude Agent SDK inside an E2B sandbox with these built-in tools:

This means your agent can clone repos, analyze codebases, write and execute code, research topics on the web, install dependencies, run tests, and interact with external APIs — all autonomously inside its sandbox.

How do I run Claude Code in an E2B cloud sandbox?

With 21st SDK you don't configure E2B manually. You define your agent in TypeScript, deploy with one CLI command, and the platform provisions E2B sandboxes automatically.

Each sandbox is an isolated Linux environment with:

• Isolated filesystem — each conversation gets its own sandbox
• Full terminal access — agent can run any command, install packages
• Network access — web search, API calls, git clone
• Persistence — sandbox state persists across messages in a conversation
• Auto-cleanup — ephemeral by default, no manual teardown

Permissions are auto-bypassed inside the sandbox (safe because it's isolated), so you don't need --dangerously-skip-permissions — the 21st platform handles this for you.

How do I define a Claude Code agent? (Step 1)

Install the SDK and create your agent file. The agent() function is a pure config wrapper with full TypeScript type inference.

npm install @21st-sdk/agent zod

Create agents/my-agent/index.ts:

import { agent, tool } from "@21st-sdk/agent"
import { z } from "zod"

export default agent({
  model: "claude-sonnet-4-6",
  runtime: "claude-code",
  systemPrompt: "You are a helpful AI assistant.",

  // Controls what the agent can do without asking
  permissionMode: "bypassPermissions",
  maxTurns: 30,
  maxBudgetUsd: 2,

  tools: {
    searchDocs: tool({
      description: "Search documentation by query",
      inputSchema: z.object({
        query: z.string(),
        limit: z.number().optional(),
      }),
      execute: async ({ query, limit }) => {
        const results = await fetch(
          `https://api.example.com/search?q=${query}&limit=${limit ?? 5}`
        ).then((r) => r.json())
        return {
          content: [{ type: "text", text: JSON.stringify(results) }],
        }
      },
    }),
  },
})

What configuration options does the agent() function accept?

See Agent Customization for the full list of options including lifecycle hooks (onStart, onToolCall, onFinish, onError).

How do I deploy a Claude Code agent to production? (Step 2)

Log in with your API key and deploy. The CLI bundles your agent code with esbuild and pushes it to the 21st platform, which provisions E2B sandboxes on demand.

npx @21st-sdk/cli login     # authenticate with your API key
npx @21st-sdk/cli deploy    # bundle and deploy to E2B sandbox

That's it. No Docker, no Kubernetes, no infra to manage. Your agent is live and accessible via the Chat API.

How does streaming work with a Claude Code agent?

The 21st platform streams agent responses via Server-Sent Events (SSE), compatible with the Vercel AI SDK. You don't need to set up WebSockets or poll for results.

The stream emits 11 event types that cover the full agent lifecycle: text tokens, tool calls with streaming input, tool results, cost metadata, and control signals. Here's the full list:

The <AgentChat> React component handles all event types automatically, including rendering tool call visualizations (file diffs, terminal output, web search results). For server-side streaming, the Node.js / Python / Go SDKs return a streaming response you can iterate line-by-line. See the Chat API reference for the full SSE payload format, stream resumption, and cancellation.

How do I add a chat UI for my Claude Code agent in React / Next.js? (Step 3)

Create a server-side token route to keep your API key secure, then add the drop-in chat component.

import { createTokenHandler } from "@21st-sdk/nextjs/server"

export const POST = createTokenHandler({
  apiKey: process.env.API_KEY_21ST!,
})

"use client"

import { AgentChat, createAgentChat } from "@21st-sdk/nextjs"
import { useChat } from "@ai-sdk/react"

const chat = createAgentChat({
  agent: "my-agent",
  tokenUrl: "/api/an-token",
  sandboxId: "sb_abc123",
})

export default function Page() {
  const { messages, handleSubmit, status, stop, error } =
    useChat({ chat })

  return (
    <AgentChat
      messages={messages}
      onSend={() => handleSubmit()}
      status={status}
      onStop={stop}
      error={error ?? undefined}
    />
  )
}

The <AgentChat> component renders streaming markdown with syntax highlighting, tool call visualizations (file diffs, terminal output, web search results), and supports custom theming. It's compatible with Vercel AI SDK's useChat.

How do I add custom tools to a Claude Code agent?

Define custom tools using the tool() function with a Zod schema for type-safe inputs. Your tools run inside the same E2B sandbox alongside the agent:

import { tool } from "@21st-sdk/agent"
import { z } from "zod"

const notifySlack = tool({
  description: "Send a Slack notification when a task is done",
  inputSchema: z.object({
    channel: z.string(),
    message: z.string(),
  }),
  execute: async ({ channel, message }) => {
    await fetch(process.env.SLACK_WEBHOOK_URL!, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ channel, text: message }),
    })
    return { content: [{ type: "text", text: "Sent" }] }
  },
})

Custom tools are available to the agent alongside all built-in tools (Bash, Read, Write, WebSearch, etc.). The agent decides when to call them based on its system prompt and the user's request.

Can I connect MCP servers and external integrations?

Yes. Beyond built-in and custom tools, your agent can connect to MCP servers for databases, Slack, email, GitHub, and any other external service. The 21st platform supports the full MCP protocol. See Tools and MCPs for setup.

How do I control the agent from a backend (Node.js / Python / Go)?

Use the server SDKs to create sandboxes, manage threads, generate tokens, and stream responses programmatically — for CI/CD pipelines, webhook handlers, or backend-only integrations.

import { AgentClient } from "@21st-sdk/node"

const client = new AgentClient({ apiKey: process.env.API_KEY_21ST! })

// Create a sandbox for your agent
const sandbox = await client.sandboxes.create({ agent: "my-agent" })

// Create a thread in the sandbox
const thread = await client.threads.create({
  sandboxId: sandbox.id,
  name: "Research Task",
})

// Generate a short-lived token for client-side use
const token = await client.tokens.create({ agent: "my-agent" })
// Pass token.token to the client (e.g. via API response)

from twentyfirst_sdk import AgentClient
import os

client = AgentClient(api_key=os.environ["API_KEY_21ST"])

sandbox = client.sandboxes.create(agent="my-agent")
thread = client.threads.create(sandbox_id=sandbox.id, name="Chat 1")

run = client.threads.run(
    agent="my-agent",
    sandbox_id=sandbox.id,
    thread_id=thread.id,
    messages=[{
        "role": "user",
        "parts": [{"type": "text", "text": "Research this topic"}],
    }],
)

for line in run.response.iter_lines(decode_unicode=True):
    if line:
        print(line)

SDKs available: Node.js, Python, Go.

Can I override agent settings per message without redeploying?

Yes. Pass options in the AI SDK request body to override settings for a single request:

const reviewOptions = {
  systemPrompt: {
    type: "preset",
    preset: "claude_code",
    append: "Focus on regressions and missing tests. Do not edit files.",
  },
  maxTurns: 4,
  maxBudgetUsd: 0.2,
  disallowedTools: ["Bash"],
}

How do I control costs and prevent runaway API spend?

The 21st platform provides multiple layers of cost control:

• maxBudgetUsd — hard per-conversation cost cap defined in agent config
• maxTurns — limits the number of agentic loops to prevent infinite tool chains
• disallowedTools — restrict which tools the agent can use per request
• Dashboard tracking — per-dialog token counts and USD costs in real time

What's the difference between raw Claude Code and 21st SDK?

How do I monitor and debug my Claude Code agent in production?

The 21st dashboard gives you full observability:

See Observability for details.

What is the architecture of a 21st SDK agent?

Here's how the pieces fit together:

Your App (React / Next.js / backend)
  └─ AgentChat component  or  Server SDK
        │
        ▼  SSE streaming / AI SDK protocol
    21st Relay (hosted)
        │
        ├─ Auth (JWT tokens, API keys)
        ├─ E2B Sandbox (isolated Linux env)
        │     ├─ Claude Agent SDK runtime
        │     ├─ Your custom tools
        │     ├─ MCP servers
        │     └─ Isolated filesystem
        ├─ Cost tracking & token counting
        └─ Session persistence

You don't interact with the Relay directly — the SDK handles it. Everything between your app and the agent (auth, sandboxing, tool execution, streaming, cost tracking) is managed by the platform.

Next steps

• Get Started — full setup walkthrough with install, deploy, and React integration
• Agent Customization — all config options, lifecycle hooks, and permission modes
• Tools and MCPs — connect external tools via Model Context Protocol
• Sandbox Customization — environment variables, pre-installed packages, filesystem setup
• Templates — real-world agent examples (lead research, docs assistant, support agent)
• API Reference — full Chat API and server SDK documentation