21st.dev SDK Quick Reference

Packages

@21st-sdk/agent — Define agents (model, tools, hooks, Zod schemas)
@21st-sdk/cli — an login + an deploy
@21st-sdk/react — <AgentChat /> pre-built chat UI
@21st-sdk/nextjs — Next.js token relay integration
@21st-sdk/node — Server-side API (sandboxes, threads, tokens)

Deploy an Agent

Create src/agent.ts:

import { agent, tool } from '@21st-sdk/agent';
import { z } from 'zod';
 
export default agent({
  model: 'claude-sonnet-4-20250514',
  systemPrompt: 'Your instructions here',
  tools: [
    tool({
      name: 'my_tool',
      description: 'What it does',
      input: z.object({ query: z.string() }),
      execute: async (args) => ({ result: 'done' }),
    }),
  ],
});

Deploy:

an login   # First time: enter API key from an.dev/api-keys
an deploy  # Creates .an/project.json, returns live endpoint

Redeploy: an deploy reuses the same slug and replaces the sandbox.

Skills (21st.dev concept)

Skills are reusable instruction blocks agents reference on-demand (not sent every turn). System prompt tells the agent when to use each skill. Reduces token usage through conditional context loading.

Token Relay (for browser clients)

// Server route
const client = new AnSDK({ apiKey: process.env.AN_API_KEY });
const token = await client.tokens.create({ expiresIn: 3600 });
 
// Client
const chat = createAgentChat({ agentSlug: 'my-agent', tokenEndpoint: '/api/chat/token' });

Component Marketplace

21st.dev also hosts a component marketplace. Use @21st-dev/magic MCP server for AI-assisted browsing. Install Magic UI components via:

npx shadcn@latest add "https://magicui.design/r/{name}.json"

OpenClaw Bridge

Agent configs → agent() definitions
KB docs → 21st Skills
MCP tools → Zod custom tools
See knowledge-base/21st-dev/INTEGRATION.md for full bridge spec

Full Documentation

knowledge-base/21st-dev/API.md — endpoints, SDK packages, CLI
knowledge-base/21st-dev/ARCHITECTURE.md — relay runtime, sandboxes, auth
knowledge-base/21st-dev/CREDENTIALS.md — API key management
knowledge-base/21st-dev/INTEGRATION.md — OpenClaw bridge plan
knowledge-base/21st-dev/COMPONENTS.md — component marketplace + MCP

Invokes / Invoked by

Invokes: skill-registry, SKILL Invoked by: _summary, _summary

Quartz 4

Explorer

SKILL