@21st-sdk/react 0.1.2 → 0.1.4

package/docs/01-overview.md

@@ -8,7 +8,7 @@ AN is a platform for building, deploying, and embedding AI agents. You define an
 Your Code (agent.ts)
     |
     v
-@an-sdk/cli deploy (CLI)
+@21st-sdk/cli deploy (CLI)
     |
     v
 AN Platform
@@ -30,11 +30,11 @@ AN Platform
 
 | Package | Purpose |
 |---------|---------|
-| `@an-sdk/agent` | Define agents and tools with type inference |
-| `@an-sdk/cli` | Deploy agents from your terminal |
-| `@an-sdk/react` | Chat UI components (theming, tool renderers) |
-| `@an-sdk/nextjs` | Next.js server-side token handler |
-| `@an-sdk/node` | Server-side SDK (sandboxes, threads, tokens) |
+| `@21st-sdk/agent` | Define agents and tools with type inference |
+| `@21st-sdk/cli` | Deploy agents from your terminal |
+| `@21st-sdk/react` | Chat UI components (theming, tool renderers) |
+| `@21st-sdk/nextjs` | Next.js server-side token handler |
+| `@21st-sdk/node` | Server-side SDK (sandboxes, threads, tokens) |
 
 ## Key Concepts
 
@@ -58,4 +58,4 @@ Two layers of authentication:
 1. **Client -> Relay**: API key (`an_sk_...`) or short-lived JWT (via token exchange)
 2. **Sandbox -> AI Provider**: Handled internally by the platform (Claude Proxy)
 
-For web apps, use `@an-sdk/nextjs` to exchange your API key for a short-lived JWT on the server, so the key never reaches the browser.
+For web apps, use `@21st-sdk/nextjs` to exchange your API key for a short-lived JWT on the server, so the key never reaches the browser.

package/docs/02-getting-started.md

@@ -2,12 +2,12 @@
 
 ## 1. Get an API Key
 
-Sign up at [an.dev](https://an.dev) and get your API key from [an.dev/agents/dashboard/api](https://an.dev/agents/dashboard/api).
+Sign up at [21st.dev/agents](https://21st.dev/agents) and get your API key from [the dashboard](https://21st.dev/agents/dashboard/api).
 
 ## 2. Install
 
 ```bash
-npm install @an-sdk/agent zod
+npm install @21st-sdk/agent zod
 ```
 
 ## 3. Define Your Agent
@@ -15,7 +15,7 @@ npm install @an-sdk/agent zod
 Create `src/agent.ts`:
 
 ```ts
-import { agent, tool } from "@an-sdk/agent"
+import { agent, tool } from "@21st-sdk/agent"
 import { z } from "zod"
 
 export default agent({
@@ -36,10 +36,10 @@ export default agent({
 ## 4. Login & Deploy
 
 ```bash
-npx @an-sdk/cli login
+npx @21st-sdk/cli login
 # Enter your API key: an_sk_...
 
-npx @an-sdk/cli deploy
+npx @21st-sdk/cli deploy
 # Bundling src/agent.ts...
 # Deploying my-agent...
 # https://api.an.dev/v1/chat/my-agent
@@ -50,17 +50,17 @@ Your agent is live.
 ## 5. Embed in a React App
 
 ```bash
-npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
+npm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react
 ```
 
 Create a token route (keeps your API key on the server):
 
 ```ts
-// app/api/an/token/route.ts
-import { createAnTokenHandler } from "@an-sdk/nextjs/server"
+// app/api/agent/token/route.ts
+import { createTokenHandler } from "@21st-sdk/nextjs/server"
 
-export const POST = createAnTokenHandler({
-  apiKey: process.env.AN_API_KEY!,
+export const POST = createTokenHandler({
+  apiKey: process.env.API_KEY_21ST!,
 })
 ```
 
@@ -71,15 +71,15 @@ Add the chat UI:
 "use client"
 
 import { useChat } from "@ai-sdk/react"
-import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
-import "@an-sdk/react/styles.css"
+import { AgentChat, createAgentChat } from "@21st-sdk/nextjs"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {
   const chat = useMemo(
-    () => createAnChat({
+    () => createAgentChat({
       agent: "your-agent-slug",
-      tokenUrl: "/api/an/token",
+      tokenUrl: "/api/agent/token",
     }),
     [],
   )
@@ -87,7 +87,7 @@ export default function Chat() {
   const { messages, sendMessage, status, stop, error } = useChat({ chat })
 
   return (
-    <AnAgentChat
+    <AgentChat
       messages={messages}
       onSend={(msg) =>
         sendMessage({ parts: [{ type: "text", text: msg.content }] })

package/docs/03-defining-agents.md

@@ -1,11 +1,11 @@
 # Defining Agents
 
-Agents are defined with the `agent()` and `tool()` functions from `@an-sdk/agent`. These are config-only — they return exactly what you pass in, with type inference added. The actual execution happens in the AN runtime (E2B sandbox).
+Agents are defined with the `agent()` and `tool()` functions from `@21st-sdk/agent`. These are config-only — they return exactly what you pass in, with type inference added. The actual execution happens in the AN runtime (E2B sandbox).
 
 ## `agent(config)`
 
 ```ts
-import { agent } from "@an-sdk/agent"
+import { agent } from "@21st-sdk/agent"
 
 export default agent({
   // Model (default: "claude-sonnet-4-6")
@@ -52,7 +52,7 @@ export default agent({
 ## `tool(definition)`
 
 ```ts
-import { tool } from "@an-sdk/agent"
+import { tool } from "@21st-sdk/agent"
 import { z } from "zod"
 
 const myTool = tool({

package/docs/04-react-ui.md

@@ -1,11 +1,11 @@
 # React UI
 
-`@an-sdk/react` provides a full chat UI for AN agents. Built on [Vercel AI SDK v5](https://sdk.vercel.ai) — uses standard `useChat()` from `@ai-sdk/react`.
+`@21st-sdk/react` provides a full chat UI for AN agents. Built on [Vercel AI SDK v5](https://sdk.vercel.ai) — uses standard `useChat()` from `@ai-sdk/react`.
 
 ## Install
 
 ```bash
-npm install @an-sdk/react ai @ai-sdk/react
+npm install @21st-sdk/react ai @ai-sdk/react
 ```
 
 ## Basic Usage
@@ -14,13 +14,13 @@ npm install @an-sdk/react ai @ai-sdk/react
 "use client"
 
 import { useChat } from "@ai-sdk/react"
-import { AnAgentChat, createAnChat } from "@an-sdk/react"
-import "@an-sdk/react/styles.css"
+import { AgentChat, createAgentChat } from "@21st-sdk/react"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {
   const chat = useMemo(
-    () => createAnChat({
+    () => createAgentChat({
       agent: "your-agent-slug",
       getToken: async () => "your_an_sk_token",
     }),
@@ -30,7 +30,7 @@ export default function Chat() {
   const { messages, sendMessage, status, stop, error } = useChat({ chat })
 
   return (
-    <AnAgentChat
+    <AgentChat
       messages={messages}
       onSend={(msg) =>
         sendMessage({ parts: [{ type: "text", text: msg.content }] })
@@ -43,12 +43,12 @@ export default function Chat() {
 }
 ```
 
-## `createAnChat(options)`
+## `createAgentChat(options)`
 
 Creates an AI SDK `Chat` instance pointed at the AN Relay.
 
 ```ts
-createAnChat({
+createAgentChat({
   agent: string              // Agent slug from dashboard
   getToken: () => Promise<string>  // Returns an_sk_ key or JWT
   apiUrl?: string            // Default: "https://relay.an.dev"
@@ -60,7 +60,7 @@ createAnChat({
 
 For Next.js apps, use `tokenUrl` instead of `getToken` — see [Next.js Integration](./05-nextjs.md).
 
-## `<AnAgentChat />` Props
+## `<AgentChat />` Props
 
 | Prop | Type | Description |
 |------|------|-------------|
@@ -69,10 +69,10 @@ For Next.js apps, use `tokenUrl` instead of `getToken` — see [Next.js Integrat
 | `status` | `ChatStatus` | `"ready" \| "submitted" \| "streaming" \| "error"` |
 | `onStop` | `() => void` | Stop generation |
 | `error` | `Error` | Error to display |
-| `theme` | `AnTheme` | Theme from playground |
+| `theme` | `ChatTheme` | Theme from playground |
 | `colorMode` | `"light" \| "dark" \| "auto"` | Color mode |
-| `classNames` | `Partial<AnClassNames>` | Per-element CSS overrides |
-| `slots` | `Partial<AnSlots>` | Component swapping |
+| `classNames` | `Partial<ChatClassNames>` | Per-element CSS overrides |
+| `slots` | `Partial<ChatSlots>` | Component swapping |
 | `className` | `string` | Root element class |
 | `style` | `CSSProperties` | Root element style |
 
@@ -82,16 +82,16 @@ Four levels, from simple to full control:
 
 ### 1. Theme tokens
 
-Apply a theme JSON from the [AN Playground](https://an.dev/an/playground):
+Apply a theme JSON from the [AN Playground](https://21st.dev/agents/playground):
 
 ```tsx
-<AnAgentChat theme={playgroundTheme} colorMode="dark" />
+<AgentChat theme={playgroundTheme} colorMode="dark" />
 ```
 
 ### 2. Class overrides
 
 ```tsx
-<AnAgentChat
+<AgentChat
   classNames={{
     root: "rounded-2xl border",
     messageList: "px-8",
@@ -106,7 +106,7 @@ Apply a theme JSON from the [AN Playground](https://an.dev/an/playground):
 Swap sub-components:
 
 ```tsx
-<AnAgentChat
+<AgentChat
   slots={{
     InputBar: MyCustomInput,
     UserMessage: MyUserBubble,
@@ -118,7 +118,7 @@ Swap sub-components:
 ### 4. Individual component imports
 
 ```tsx
-import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react"
+import { MessageList, InputBar, ToolRenderer } from "@21st-sdk/react"
 ```
 
 ## CSS
@@ -126,7 +126,7 @@ import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react"
 Import once in your app:
 
 ```tsx
-import "@an-sdk/react/styles.css"
+import "@21st-sdk/react/styles.css"
 ```
 
 No Tailwind peer dependency — CSS is pre-compiled. All elements have stable `an-*` class names:
@@ -145,7 +145,7 @@ No Tailwind peer dependency — CSS is pre-compiled. All elements have stable `a
 ## Theme Type
 
 ```ts
-interface AnTheme {
+interface ChatTheme {
   theme: Record<string, string>  // Shared: font, spacing, accent
   light: Record<string, string>  // Light mode CSS vars
   dark: Record<string, string>   // Dark mode CSS vars

package/docs/05-nextjs.md

@@ -1,11 +1,11 @@
 # Next.js Integration
 
-`@an-sdk/nextjs` provides a server-side token handler so your `an_sk_` API key never reaches the browser. It also re-exports everything from `@an-sdk/react` for convenience.
+`@21st-sdk/nextjs` provides a server-side token handler so your `an_sk_` API key never reaches the browser. It also re-exports everything from `@21st-sdk/react` for convenience.
 
 ## Install
 
 ```bash
-npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
+npm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react
 ```
 
 ## Setup
@@ -14,19 +14,19 @@ npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
 
 ```env
 # .env.local
-AN_API_KEY=an_sk_your_key_here
+API_KEY_21ST=an_sk_your_key_here
 ```
 
-Get your API key from [an.dev/agents/dashboard/api](https://an.dev/agents/dashboard/api).
+Get your API key from [the dashboard](https://21st.dev/agents/dashboard/api).
 
 ### 2. Create the token route
 
 ```ts
-// app/api/an/token/route.ts
-import { createAnTokenHandler } from "@an-sdk/nextjs/server"
+// app/api/agent/token/route.ts
+import { createTokenHandler } from "@21st-sdk/nextjs/server"
 
-export const POST = createAnTokenHandler({
-  apiKey: process.env.AN_API_KEY!,
+export const POST = createTokenHandler({
+  apiKey: process.env.API_KEY_21ST!,
 })
 ```
 
@@ -37,15 +37,15 @@ export const POST = createAnTokenHandler({
 "use client"
 
 import { useChat } from "@ai-sdk/react"
-import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
-import "@an-sdk/react/styles.css"
+import { AgentChat, createAgentChat } from "@21st-sdk/nextjs"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {
   const chat = useMemo(
-    () => createAnChat({
+    () => createAgentChat({
       agent: "your-agent-slug",
-      tokenUrl: "/api/an/token",
+      tokenUrl: "/api/agent/token",
     }),
     [],
   )
@@ -53,7 +53,7 @@ export default function Chat() {
   const { messages, sendMessage, status, stop, error } = useChat({ chat })
 
   return (
-    <AnAgentChat
+    <AgentChat
       messages={messages}
       onSend={(msg) =>
         sendMessage({ parts: [{ type: "text", text: msg.content }] })
@@ -71,7 +71,7 @@ export default function Chat() {
 ```
 Browser                     Your Next.js Server              AN Relay
   |                                |                            |
-  |-- POST /api/an/token --------->|                            |
+  |-- POST /api/agent/token ------>|                            |
   |                                |-- POST /v1/tokens -------->|
   |                                |   (with an_sk_ key)        |
   |                                |<-- { token, expiresAt } ---|
@@ -85,12 +85,12 @@ The client only receives short-lived JWTs. Your API key stays on the server.
 
 ## API
 
-### `createAnTokenHandler(options)`
+### `createTokenHandler(options)`
 
 Returns a Next.js `POST` route handler.
 
 ```ts
-createAnTokenHandler({
+createTokenHandler({
   apiKey: string       // Your an_sk_ API key
   relayUrl?: string    // Default: "https://relay.an.dev"
   expiresIn?: string   // Default: "1h"
@@ -102,10 +102,10 @@ createAnTokenHandler({
 Lower-level function for custom token exchange logic.
 
 ```ts
-import { exchangeToken } from "@an-sdk/nextjs/server"
+import { exchangeToken } from "@21st-sdk/nextjs/server"
 
 const { token, expiresAt } = await exchangeToken({
-  apiKey: process.env.AN_API_KEY!,
+  apiKey: process.env.API_KEY_21ST!,
   relayUrl: "https://relay.an.dev",
   expiresIn: "1h",
 })
@@ -113,5 +113,5 @@ const { token, expiresAt } = await exchangeToken({
 
 ## Entry Points
 
-- `@an-sdk/nextjs` — Re-exports everything from `@an-sdk/react` (components, types, `createAnChat`)
-- `@an-sdk/nextjs/server` — Server-only: `createAnTokenHandler`, `exchangeToken`
+- `@21st-sdk/nextjs` — Re-exports everything from `@21st-sdk/react` (components, types, `createAgentChat`)
+- `@21st-sdk/nextjs/server` — Server-only: `createTokenHandler`, `exchangeToken`

package/docs/06-node-sdk.md

@@ -1,42 +1,42 @@
 # Node SDK
 
-`@an-sdk/node` is a server-side client for the AN API. Use it to manage sandboxes, threads, and tokens programmatically.
+`@21st-sdk/node` is a server-side client for the AN API. Use it to manage sandboxes, threads, and tokens programmatically.
 
 ## Install
 
 ```bash
-npm install @an-sdk/node
+npm install @21st-sdk/node
 ```
 
 ## Quick Start
 
 ```ts
-import { AnClient } from "@an-sdk/node"
+import { AgentClient } from "@21st-sdk/node"
 
-const an = new AnClient({
-  apiKey: process.env.AN_API_KEY!, // an_sk_...
+const client = new AgentClient({
+  apiKey: process.env.API_KEY_21ST!, // an_sk_...
 })
 
 // Create a sandbox for your agent
-const sandbox = await an.sandboxes.create({ agent: "my-agent" })
+const sandbox = await client.sandboxes.create({ agent: "my-agent" })
 
 // Create a thread
-const thread = await an.threads.create({
+const thread = await client.threads.create({
   sandboxId: sandbox.sandboxId,
   name: "Review PR #42",
 })
 
 // Generate a short-lived token for browser clients
-const { token, expiresAt } = await an.tokens.create({
+const { token, expiresAt } = await client.tokens.create({
   agent: "my-agent",
   expiresIn: "1h",
 })
 ```
 
-## `AnClient`
+## `AgentClient`
 
 ```ts
-new AnClient({
+new AgentClient({
   apiKey: string     // Your an_sk_ API key
   baseUrl?: string   // Default: "https://relay.an.dev"
 })

package/docs/07-cli.md

@@ -1,35 +1,35 @@
 # CLI Reference
 
-`@an-sdk/cli` provides the `an` command for deploying agents.
+`@21st-sdk/cli` provides the `an` command for deploying agents.
 
 ## Install
 
 ```bash
-npm install -g @an-sdk/cli
+npm install -g @21st-sdk/cli
 # or use npx
-npx @an-sdk/cli <command>
+npx @21st-sdk/cli <command>
 ```
 
 ## Commands
 
-### `@an-sdk/cli login`
+### `@21st-sdk/cli login`
 
 Authenticate with the AN platform.
 
 ```bash
-npx @an-sdk/cli login
+npx @21st-sdk/cli login
 # Enter your API key: an_sk_...
 # Authenticated as John (team: my-team)
 ```
 
 Your key is saved to `~/.an/credentials`.
 
-### `@an-sdk/cli deploy`
+### `@21st-sdk/cli deploy`
 
 Bundle and deploy your agent.
 
 ```bash
-npx @an-sdk/cli deploy
+npx @21st-sdk/cli deploy
 # Bundling src/agent.ts...
 # Bundled (12.3kb)
 # Deploying my-agent...
@@ -71,7 +71,7 @@ Subsequent deploys update the existing agent.
 The CLI uses esbuild to bundle your agent code:
 
 - Target: Node 22, ESM
-- `@an-sdk/agent` is externalized (provided by the sandbox runtime)
+- `@21st-sdk/agent` is externalized (provided by the sandbox runtime)
 - All other dependencies are bundled into a single file
 
 ## Configuration Files
@@ -85,4 +85,4 @@ The CLI uses esbuild to bundle your agent code:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `AN_API_URL` | `https://an.dev/api/v1` | Override API endpoint |
+| `API_URL_21ST` | `https://an.dev/api/v1` | Override API endpoint |

package/docs/08-custom-tools.md

@@ -1,6 +1,6 @@
 # Custom Tool Renderers
 
-The `@an-sdk/react` chat UI automatically renders tool calls from your agent. It includes built-in renderers for all standard Claude tools and supports custom renderers for your own tools.
+The `@21st-sdk/react` chat UI automatically renders tool calls from your agent. It includes built-in renderers for all standard Claude tools and supports custom renderers for your own tools.
 
 ## Built-in Tool Renderers
 
@@ -24,8 +24,8 @@ These are rendered automatically when your agent uses standard tools:
 To render your custom tools differently, use the `slots.ToolRenderer` prop:
 
 ```tsx
-import { AnAgentChat, ToolRenderer } from "@an-sdk/react"
-import type { ToolPart } from "@an-sdk/react"
+import { AgentChat, ToolRenderer } from "@21st-sdk/react"
+import type { ToolPart } from "@21st-sdk/react"
 
 function MyToolRenderer(props: { part: ToolPart; status: string }) {
   const { part, status } = props
@@ -49,7 +49,7 @@ function MyToolRenderer(props: { part: ToolPart; status: string }) {
   return <ToolRenderer part={part} status={status} />
 }
 
-<AnAgentChat
+<AgentChat
   slots={{ ToolRenderer: MyToolRenderer }}
   // ... other props
 />

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@21st-sdk/react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
-  "description": "React components for AN AI agent chat UIs — drop-in chat, tool renderers, and theming",
-  "homepage": "https://an.dev",
+  "description": "React components for 21st Agents chat UIs",
+  "homepage": "https://21st.dev/agents",
   "publishConfig": {
     "access": "public"
   },
@@ -28,6 +28,7 @@
   "files": [
     "dist",
     "docs/**/*",
+    "styles",
     "src",
     "!src/**/*.test.ts",
     "AGENTS.md",
@@ -43,8 +44,8 @@
     "agent",
     "chat",
     "ai-sdk",
-    "an",
-    "an.dev",
+    "21st",
+    "21st.dev",
     "components",
     "ui"
   ],

package/src/an-agent-chat.tsx

@@ -5,9 +5,9 @@ import { WindowChrome } from "./components/window-chrome"
 import { applyTheme } from "./theme"
 import { cn } from "./utils/cn"
 import { ThemeConfigContext, extractThemeConfig } from "./theme-config"
-import type { AnAgentChatProps } from "./types"
+import type { AgentChatProps } from "./types"
 
-export function AnAgentChat({
+export function AgentChat({
   messages,
   onSend,
   status,
@@ -24,7 +24,7 @@ export function AnAgentChat({
   attachments,
   className,
   style,
-}: AnAgentChatProps) {
+}: AgentChatProps) {
   const rootRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -99,3 +99,6 @@ export function AnAgentChat({
     </ThemeConfigContext.Provider>
   )
 }
+
+// Legacy component alias kept for compatibility.
+export const AnAgentChat = AgentChat

package/src/components/input/context-items.tsx

@@ -1,6 +1,6 @@
 import { ImageThumbInput } from "./image-thumb-input"
 import { FileChip } from "./file-chip"
-import type { AnThemeConfig } from "../../theme-config"
+import type { ChatThemeConfig } from "../../theme-config"
 
 export interface AttachedImage {
   id: string
@@ -18,7 +18,7 @@ export interface AttachedFile {
 interface ContextItemsProps {
   images: AttachedImage[]
   files: AttachedFile[]
-  previewStyle: AnThemeConfig["attachmentPreviewStyle"]
+  previewStyle: ChatThemeConfig["attachmentPreviewStyle"]
   innerRadius?: number
   onRemoveImage?: (id: string) => void
   onRemoveFile?: (id: string) => void

package/src/components/input/model-selector.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import type { AnModelOption } from "../../types"
+import type { ModelOption } from "../../types"
 import { ChevronDown } from "../../icons/tool-icons"
 import { PopoverShell } from "./popover-shell"
 
@@ -9,7 +9,7 @@ export function ModelPopover({
   onModelChange,
   innerRadius,
 }: {
-  models: AnModelOption[]
+  models: ModelOption[]
   activeModelId?: string
   onModelChange?: (id: string) => void
   innerRadius?: number
@@ -63,7 +63,7 @@ export function ModelBadge({
   activeModelId,
   innerRadius,
 }: {
-  models: AnModelOption[]
+  models: ModelOption[]
   activeModelId?: string
   innerRadius?: number
 }) {

package/src/components/input-bar.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useState, useCallback, useRef, useEffect } from "react"
 import type { ChatStatus } from "ai"
-import type { AnModelOption } from "../types"
+import type { ModelOption } from "../types"
 import { cn } from "../utils/cn"
 import { useThemeConfig } from "../theme-config"
 import { SendButtonUnified } from "./input/send-button"
@@ -30,7 +30,7 @@ interface InputBarProps {
 
   // Model selector
   modelSelector?: {
-    models: AnModelOption[]
+    models: ModelOption[]
     activeModelId?: string
     onModelChange?: (id: string) => void
     display?: "popover" | "badge"