@21st-sdk/react 0.1.2 → 0.1.3

package/README.md

@@ -1,13 +1,13 @@
-# @an-sdk/react
+# @21st-sdk/react
 
-React components for building AI agent chat UIs powered by [AN](https://an.dev). Drop-in chat interface with tool renderers, theming, and full customization.
+React components for building AI agent chat UIs powered by [An](https://21st.dev/agents). Drop-in chat interface with tool renderers, theming, and full customization.
 
 Built on [Vercel AI SDK v5](https://sdk.vercel.ai) — no custom hooks or state management. Just components.
 
 ## Install
 
 ```bash
-npm install @an-sdk/react ai @ai-sdk/react
+npm install @21st-sdk/react ai @ai-sdk/react
 ```
 
 ## Quick Start
@@ -16,8 +16,8 @@ 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 { AnAgentChat, createAnChat } from "@21st-sdk/react";
+import "@21st-sdk/react/styles.css";
 import { useMemo } from "react";
 
 export default function Chat() {
@@ -48,7 +48,7 @@ export default function Chat() {
 }
 ```
 
-That's it. You get a full chat UI with message rendering, tool visualization, auto-scroll, and streaming — all wired to your AN agent.
+That's it. You get a full chat UI with message rendering, tool visualization, auto-scroll, and streaming — all wired to your An agent.
 
 ## Customization
 
@@ -56,7 +56,7 @@ Four levels of customization, 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" />
@@ -96,7 +96,7 @@ Swap sub-components entirely:
 Build from scratch with individual imports:
 
 ```tsx
-import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react";
+import { MessageList, InputBar, ToolRenderer } from "@21st-sdk/react";
 ```
 
 ## CSS
@@ -104,7 +104,7 @@ import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react";
 Import the stylesheet once in your app:
 
 ```tsx
-import "@an-sdk/react/styles.css";
+import "@21st-sdk/react/styles.css";
 ```
 
 No Tailwind peer dependency required — CSS is pre-compiled. All elements have stable `an-*` class names for custom styling:
@@ -125,7 +125,7 @@ No Tailwind peer dependency required — CSS is pre-compiled. All elements have
 
 ### `createAnChat(options)`
 
-Creates an AI SDK `Chat` instance pointed at the AN Relay API.
+Creates an AI SDK `Chat` instance pointed at the An relay API.
 
 ```ts
 createAnChat({
@@ -206,11 +206,11 @@ interface AnTheme {
 The SDK exports pre-defined model constants for convenience:
 
 ```ts
-import { AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "@an-sdk/react"
-import type { AnModelOption, AnClaudeModelId } from "@an-sdk/react"
+import { AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "@21st-sdk/react"
+import type { AnModelOption, AnClaudeModelId } from "@21st-sdk/react"
 ```
 
-> **Note:** When using `createAnChat()` with the AN Relay, the model is set server-side in the agent config. The `modelSelector` prop is for building UIs with custom backends.
+> **Note:** When using `createAnChat()` with the An relay, the model is set server-side in the agent config. The `modelSelector` prop is for building UIs with custom backends.
 
 ## License
 

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,14 +50,14 @@ 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"
+import { createAnTokenHandler } from "@21st-sdk/nextjs/server"
 
 export const POST = createAnTokenHandler({
   apiKey: process.env.AN_API_KEY!,
@@ -71,8 +71,8 @@ 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 { AnAgentChat, createAnChat } from "@21st-sdk/nextjs"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {

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,8 +14,8 @@ 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 { AnAgentChat, createAnChat } from "@21st-sdk/react"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {
@@ -82,7 +82,7 @@ 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" />
@@ -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:

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
@@ -17,13 +17,13 @@ npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
 AN_API_KEY=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"
+import { createAnTokenHandler } from "@21st-sdk/nextjs/server"
 
 export const POST = createAnTokenHandler({
   apiKey: process.env.AN_API_KEY!,
@@ -37,8 +37,8 @@ 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 { AnAgentChat, createAnChat } from "@21st-sdk/nextjs"
+import "@21st-sdk/react/styles.css"
 import { useMemo } from "react"
 
 export default function Chat() {
@@ -102,7 +102,7 @@ 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!,
@@ -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, `createAnChat`)
+- `@21st-sdk/nextjs/server` — Server-only: `createAnTokenHandler`, `exchangeToken`

package/docs/06-node-sdk.md

@@ -1,17 +1,17 @@
 # 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 { AnClient } from "@21st-sdk/node"
 
 const an = new AnClient({
   apiKey: process.env.AN_API_KEY!, // an_sk_...

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

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 { AnAgentChat, ToolRenderer } from "@21st-sdk/react"
+import type { ToolPart } from "@21st-sdk/react"
 
 function MyToolRenderer(props: { part: ToolPart; status: string }) {
   const { part, status } = props

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@21st-sdk/react",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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 An AI agent chat UIs",
+  "homepage": "https://21st.dev/agents",
   "publishConfig": {
     "access": "public"
   },
@@ -28,6 +28,7 @@
   "files": [
     "dist",
     "docs/**/*",
+    "styles",
     "src",
     "!src/**/*.test.ts",
     "AGENTS.md",

package/styles/index.css

@@ -0,0 +1,161 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * AN Agent Chat - CSS Custom Properties
+ * These are the default values. Consumers override via <AnAgentChat theme={...} />
+ * which calls applyTheme() to set these vars on the root element.
+ */
+:root, .an-root {
+  /* Typography */
+  --an-font-family: system-ui, sans-serif;
+  --an-text-size: 14px;
+  --an-text-size-sm: 13px;
+  --an-text-size-xs: 11px;
+  --an-line-height: 1.6;
+  --an-font-weight: 400;
+  --an-font-weight-medium: 500;
+  --an-font-weight-semibold: 600;
+
+  /* Geometry — all radii derive from --an-border-radius */
+  --an-border-radius: 16px;
+  --an-message-border-radius: var(--an-border-radius);
+  --an-input-border-radius: var(--an-border-radius);
+  --an-tool-border-radius: var(--an-border-radius);
+  --an-code-border-radius: var(--an-border-radius);
+
+  /* Layout — --an-message-gap is intentionally unset; density config provides the default */
+  --an-user-message-padding: 10px 14px;
+  --an-input-padding: 12px 16px;
+
+  /* Sizes */
+  --an-send-button-size: 32px;
+  --an-stop-button-size: 32px;
+  --an-send-button-border-radius: 9999px;
+
+  /* Colors - Light mode defaults */
+  --an-background: #ffffff;
+  --an-background-secondary: #f5f5f5;
+  --an-background-tertiary: #fafafa;
+  --an-foreground: #1a1a1a;
+  --an-foreground-muted: #737373;
+  --an-foreground-subtle: #a3a3a3;
+  --an-border-color: #e5e5e5;
+  --an-border-color-light: #f0f0f0;
+  --an-primary-color: #3b82f6;
+
+  /* User Messages */
+  --an-user-message-bg: #f5f5f5;
+  --an-user-message-text: #1a1a1a;
+
+  /* Input */
+  --an-input-background: #ffffff;
+  --an-input-border-color: #e5e5e5;
+  --an-input-color: #1a1a1a;
+  --an-input-placeholder-color: #a3a3a3;
+
+  /* Send/Stop Buttons */
+  --an-send-button-bg: #3b82f6;
+  --an-send-button-color: #ffffff;
+  --an-stop-button-bg: #1a1a1a;
+  --an-stop-button-color: #ffffff;
+
+  /* Tools */
+  --an-tool-background: #fafafa;
+  --an-tool-border-color: #e5e5e5;
+  --an-tool-color: #1a1a1a;
+  --an-tool-color-muted: #737373;
+
+  /* Code */
+  --an-code-background: #1e1e1e;
+  --an-code-color: #d4d4d4;
+  --an-code-font-family: ui-monospace, monospace;
+  --an-code-font-size: 13px;
+
+  /* Diff colors */
+  --an-diff-added-bg: rgba(34, 197, 94, 0.1);
+  --an-diff-added-border: rgba(34, 197, 94, 0.5);
+  --an-diff-added-text: #15803d;
+  --an-diff-removed-bg: rgba(239, 68, 68, 0.1);
+  --an-diff-removed-border: rgba(239, 68, 68, 0.5);
+  --an-diff-removed-text: #dc2626;
+}
+
+/* Dark mode defaults */
+.dark, .an-root.dark, .dark .an-root {
+  --an-background: #0a0a0a;
+  --an-background-secondary: #1a1a1a;
+  --an-background-tertiary: #141414;
+  --an-foreground: #fafafa;
+  --an-foreground-muted: #a3a3a3;
+  --an-foreground-subtle: #71717a;
+  --an-border-color: #2a2a2a;
+  --an-border-color-light: #1f1f1f;
+  --an-primary-color: #60a5fa;
+
+  --an-user-message-bg: #1a1a1a;
+  --an-user-message-text: #fafafa;
+
+  --an-input-background: #0a0a0a;
+  --an-input-border-color: #2a2a2a;
+  --an-input-color: #fafafa;
+  --an-input-placeholder-color: #71717a;
+
+  --an-send-button-bg: #60a5fa;
+  --an-send-button-color: #ffffff;
+  --an-stop-button-bg: #fafafa;
+  --an-stop-button-color: #0a0a0a;
+
+  --an-tool-background: #141414;
+  --an-tool-border-color: #2a2a2a;
+  --an-tool-color: #fafafa;
+  --an-tool-color-muted: #a3a3a3;
+
+  --an-code-background: #0a0a0a;
+  --an-code-color: #d4d4d4;
+
+  --an-diff-added-bg: rgba(34, 197, 94, 0.15);
+  --an-diff-added-border: rgba(34, 197, 94, 0.4);
+  --an-diff-added-text: #4ade80;
+  --an-diff-removed-bg: rgba(239, 68, 68, 0.15);
+  --an-diff-removed-border: rgba(239, 68, 68, 0.4);
+  --an-diff-removed-text: #f87171;
+}
+
+/* TextShimmer animation */
+@keyframes an-shimmer {
+  from { background-position: 100% center; }
+  to { background-position: 0% center; }
+}
+
+.an-text-shimmer {
+  display: inline-block;
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  background-image:
+    linear-gradient(90deg, transparent calc(50% - var(--an-shimmer-spread, 100px)), var(--an-foreground-muted, #737373), transparent calc(50% + var(--an-shimmer-spread, 100px))),
+    linear-gradient(var(--an-foreground-subtle, #a3a3a3), var(--an-foreground-subtle, #a3a3a3));
+  background-repeat: no-repeat, padding-box;
+}
+
+.an-text-shimmer--active {
+  animation: an-shimmer var(--an-shimmer-duration, 2s) linear infinite;
+}
+
+/* Scrollbar hide utility */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Spinner animation */
+@keyframes an-spinner-rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}