@21st-sdk/react 0.1.3 → 0.1.4

package/docs/02-getting-started.md

@@ -56,11 +56,11 @@ 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 "@21st-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 "@21st-sdk/nextjs"
+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/04-react-ui.md

@@ -14,13 +14,13 @@ npm install @21st-sdk/react ai @ai-sdk/react
 "use client"
 
 import { useChat } from "@ai-sdk/react"
-import { AnAgentChat, createAnChat } from "@21st-sdk/react"
+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 |
 
@@ -85,13 +85,13 @@ Four levels, from simple to full control:
 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://21st.dev/agents/playground):
 Swap sub-components:
 
 ```tsx
-<AnAgentChat
+<AgentChat
   slots={{
     InputBar: MyCustomInput,
     UserMessage: MyUserBubble,
@@ -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

@@ -14,7 +14,7 @@ npm install @21st-sdk/nextjs @21st-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 [the dashboard](https://21st.dev/agents/dashboard/api).
@@ -22,11 +22,11 @@ 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 "@21st-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 "@21st-sdk/nextjs"
+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"
@@ -105,7 +105,7 @@ Lower-level function for custom token exchange logic.
 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
 
-- `@21st-sdk/nextjs` — Re-exports everything from `@21st-sdk/react` (components, types, `createAnChat`)
-- `@21st-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

@@ -11,32 +11,32 @@ npm install @21st-sdk/node
 ## Quick Start
 
 ```ts
-import { AnClient } from "@21st-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

@@ -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

@@ -24,7 +24,7 @@ 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 "@21st-sdk/react"
+import { AgentChat, ToolRenderer } from "@21st-sdk/react"
 import type { ToolPart } from "@21st-sdk/react"
 
 function MyToolRenderer(props: { part: ToolPart; status: string }) {
@@ -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,8 +1,8 @@
 {
   "name": "@21st-sdk/react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "MIT",
-  "description": "React components for An AI agent chat UIs",
+  "description": "React components for 21st Agents chat UIs",
   "homepage": "https://21st.dev/agents",
   "publishConfig": {
     "access": "public"
@@ -44,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"

package/src/create-an-chat.ts

@@ -1,6 +1,6 @@
 import { Chat } from "@ai-sdk/react"
 import { DefaultChatTransport, type UIMessage } from "ai"
-import type { CreateAnChatOptions } from "./types"
+import type { CreateAgentChatOptions } from "./types"
 
 const DEFAULT_API_URL = "https://relay.an.dev"
 
@@ -29,8 +29,8 @@ function createTokenFetcher(tokenUrl: string, agent: string) {
   }
 }
 
-/** Create an AI SDK Chat instance pointed at the AN Relay API */
-export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
+/** Create an AI SDK Chat instance pointed at the relay API */
+export function createAgentChat(options: CreateAgentChatOptions): Chat<UIMessage> {
   const {
     agent,
     tokenUrl,
@@ -44,7 +44,7 @@ export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
 
   const getToken = getTokenFn || (tokenUrl ? createTokenFetcher(tokenUrl, agent) : null)
   if (!getToken) {
-    throw new Error("createAnChat: provide either tokenUrl or getToken")
+    throw new Error("createAgentChat: provide either tokenUrl or getToken")
   }
 
   return new Chat({
@@ -64,3 +64,6 @@ export function createAnChat(options: CreateAnChatOptions): Chat<UIMessage> {
     onError,
   })
 }
+
+// Legacy factory alias kept for compatibility.
+export const createAnChat = createAgentChat

package/src/index.ts

@@ -1,8 +1,8 @@
 // Main drop-in component
-export { AnAgentChat } from "./an-agent-chat"
+export { AgentChat, AnAgentChat } from "./an-agent-chat"
 
 // Chat factory
-export { createAnChat } from "./create-an-chat"
+export { createAgentChat, createAnChat } from "./create-an-chat"
 
 // Theme
 export { applyTheme } from "./theme"
@@ -71,11 +71,17 @@ export { FileExtIcon } from "./icons/file-ext-icon"
 export { PaperclipIcon } from "./icons/shared-icons"
 
 // Models
-export { AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "./models"
-export type { AnClaudeModelId } from "./models"
+export { CLAUDE_MODELS, DEFAULT_MODEL_ID, AN_CLAUDE_MODELS, AN_DEFAULT_MODEL_ID } from "./models"
+export type { ClaudeModelId, AnClaudeModelId } from "./models"
 
 // Types
 export type {
+  ChatTheme,
+  ChatClassNames,
+  ChatSlots,
+  ModelOption,
+  CreateAgentChatOptions,
+  AgentChatProps,
   AnTheme,
   AnClassNames,
   AnSlots,
@@ -84,7 +90,7 @@ export type {
   AnAgentChatProps,
   CustomToolRendererProps,
 } from "./types"
-export type { AnThemeConfig } from "./theme-config"
+export type { ChatThemeConfig, AnThemeConfig } from "./theme-config"
 export type { TimelineStep, StepState } from "./types/timeline"
 export type { ToolSize } from "./types/tool-styles"
 export type { SourceType } from "./icons/source-icons"

package/src/models.ts

@@ -1,14 +1,19 @@
-import type { AnModelOption } from "./types"
+import type { ModelOption } from "./types"
 
-/** Claude model IDs supported by the AN relay */
-export type AnClaudeModelId = "opus" | "sonnet" | "haiku"
+/** Claude model IDs supported by the relay */
+export type ClaudeModelId = "opus" | "sonnet" | "haiku"
 
-/** Pre-defined Claude models available through AN */
-export const AN_CLAUDE_MODELS: AnModelOption[] = [
+/** Pre-defined Claude models available through the relay */
+export const CLAUDE_MODELS: ModelOption[] = [
   { id: "sonnet", name: "Sonnet", version: "4.6" },
   { id: "opus", name: "Opus", version: "4.6" },
   { id: "haiku", name: "Haiku", version: "4.5" },
 ]
 
 /** Default model ID */
-export const AN_DEFAULT_MODEL_ID: AnClaudeModelId = "sonnet"
+export const DEFAULT_MODEL_ID: ClaudeModelId = "sonnet"
+
+// Legacy model aliases kept for compatibility.
+export type AnClaudeModelId = ClaudeModelId
+export const AN_CLAUDE_MODELS = CLAUDE_MODELS
+export const AN_DEFAULT_MODEL_ID = DEFAULT_MODEL_ID

package/src/theme-config.ts

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from "react"
-import type { AnTheme } from "./types"
+import type { ChatTheme } from "./types"
 
-export interface AnThemeConfig {
+export interface ChatThemeConfig {
   messageStyle: "bubble-right" | "full-width"
   messageDensity: "relaxed" | "compact" | "dense"
   inputStyle: "rounded" | "flat" | "bordered"
@@ -31,7 +31,10 @@ export interface AnThemeConfig {
   attachmentPreviewStyle: "thumbnail" | "chip" | "hidden"
 }
 
-export const DEFAULT_THEME_CONFIG: AnThemeConfig = {
+// Legacy type alias kept for compatibility.
+export type AnThemeConfig = ChatThemeConfig
+
+export const DEFAULT_THEME_CONFIG: ChatThemeConfig = {
   messageStyle: "bubble-right",
   messageDensity: "relaxed",
   inputStyle: "bordered",
@@ -95,7 +98,7 @@ function readEnum<T extends string>(
   return fallback
 }
 
-export function extractThemeConfig(theme?: AnTheme): AnThemeConfig {
+export function extractThemeConfig(theme?: ChatTheme): ChatThemeConfig {
   if (!theme?.theme) return DEFAULT_THEME_CONFIG
   const t = theme.theme
 
@@ -130,8 +133,8 @@ export function extractThemeConfig(theme?: AnTheme): AnThemeConfig {
   }
 }
 
-export const ThemeConfigContext = createContext<AnThemeConfig>(DEFAULT_THEME_CONFIG)
+export const ThemeConfigContext = createContext<ChatThemeConfig>(DEFAULT_THEME_CONFIG)
 
-export function useThemeConfig(): AnThemeConfig {
+export function useThemeConfig(): ChatThemeConfig {
   return useContext(ThemeConfigContext)
 }

package/src/theme.ts

@@ -1,4 +1,4 @@
-import type { AnTheme } from "./types"
+import type { ChatTheme } from "./types"
 import { contrastText } from "./utils/contrast"
 
 export type ResolvedColorMode = "light" | "dark"
@@ -16,7 +16,7 @@ export function resolveColorMode(
 /** Apply theme CSS variables from playground JSON to a DOM element */
 export function applyTheme(
   element: HTMLElement,
-  theme: AnTheme,
+  theme: ChatTheme,
   colorMode: "light" | "dark" | "auto" = "auto",
 ) {
   // Apply shared vars

package/src/tools/tool-router.ts

@@ -1,9 +1,9 @@
 import type { TimelineStep, StepState } from "../types/timeline"
 import type { ToolSize } from "../types/tool-styles"
-import type { AnThemeConfig } from "../theme-config"
+import type { ChatThemeConfig } from "../theme-config"
 import React from "react"
 
-export function resolveToolSize(config: AnThemeConfig): ToolSize {
+export function resolveToolSize(config: ChatThemeConfig): ToolSize {
   return config.toolCallStyle === "compact" ? "compact" : "normal"
 }
 
@@ -16,7 +16,7 @@ function routeToolCall(
   step: Extract<TimelineStep, { type: "tool-call" }>,
   state: StepState,
   onComplete: () => void,
-  config: AnThemeConfig,
+  config: ChatThemeConfig,
   actionIndex: number,
 ): React.ReactNode {
   // Lazy imports to prevent circular dependency issues