@21st-sdk/react 0.1.2 → 0.1.4

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 AN Dev (an.dev)
+Copyright (c) 2026 21st.dev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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 [21st Agents](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,14 +16,14 @@ 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",
       }),
@@ -33,7 +33,7 @@ export default function Chat() {
   const { messages, sendMessage, status, stop, error } = useChat({ chat });
 
   return (
-    <AnAgentChat
+    <AgentChat
       messages={messages}
       onSend={(msg) =>
         sendMessage({
@@ -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 deployed agent.
 
 ## Customization
 
@@ -56,10 +56,10 @@ 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 [Playground](https://21st.dev/agents/playground):
 
 ```tsx
-<AnAgentChat theme={playgroundTheme} colorMode="dark" />
+<AgentChat theme={playgroundTheme} colorMode="dark" />
 ```
 
 ### 2. Class overrides
@@ -67,7 +67,7 @@ Apply a theme JSON from the [AN Playground](https://an.dev/an/playground):
 Override styles per element:
 
 ```tsx
-<AnAgentChat
+<AgentChat
   classNames={{
     root: "rounded-2xl border",
     messageList: "px-8",
@@ -82,7 +82,7 @@ Override styles per element:
 Swap sub-components entirely:
 
 ```tsx
-<AnAgentChat
+<AgentChat
   slots={{
     InputBar: MyCustomInput,
     UserMessage: MyUserBubble,
@@ -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:
@@ -123,12 +123,12 @@ No Tailwind peer dependency required — CSS is pre-compiled. All elements have
 
 ## API Reference
 
-### `createAnChat(options)`
+### `createAgentChat(options)`
 
-Creates an AI SDK `Chat` instance pointed at the AN Relay API.
+Creates an AI SDK `Chat` instance pointed at the relay API.
 
 ```ts
-createAnChat({
+createAgentChat({
   agent: string;           // Agent slug from your dashboard
   getToken: () => Promise<string>;  // Returns your an_sk_ API key
   apiUrl?: string;         // Default: "https://relay.an.dev"
@@ -140,7 +140,7 @@ createAnChat({
 
 Returns a standard `Chat<UIMessage>` — pass it to `useChat({ chat })`.
 
-### `<AnAgentChat />`
+### `<AgentChat />`
 
 Drop-in chat component.
 
@@ -151,10 +151,10 @@ Drop-in chat component.
 | `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 |
 | `modelSelector` | `{ models, activeModelId?, onModelChange? }` | Model picker (for custom backends) |
@@ -194,7 +194,7 @@ Manually inject CSS variables from a playground theme JSON.
 ## 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
@@ -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 { CLAUDE_MODELS, DEFAULT_MODEL_ID } from "@21st-sdk/react"
+import type { ModelOption, ClaudeModelId } 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 `createAgentChat()` with the relay, the model is set server-side in the agent config. The `modelSelector` prop is for building UIs with custom backends.
 
 ## License
 

package/dist/index.cjs

@@ -11730,13 +11730,16 @@ __export(index_exports, {
   AN_CLAUDE_MODELS: () => AN_CLAUDE_MODELS,
   AN_DEFAULT_MODEL_ID: () => AN_DEFAULT_MODEL_ID,
   ActionRow: () => ActionRow,
+  AgentChat: () => AgentChat,
   AnAgentChat: () => AnAgentChat,
   AttachmentButton: () => AttachmentButton,
   BashTool: () => BashTool,
+  CLAUDE_MODELS: () => CLAUDE_MODELS,
   CheckIcon16: () => CheckIcon16,
   ChevronDown: () => ChevronDown,
   ChevronRightIcon: () => ChevronRightIcon,
   ContextItems: () => ContextItems,
+  DEFAULT_MODEL_ID: () => DEFAULT_MODEL_ID,
   DEFAULT_THEME_CONFIG: () => DEFAULT_THEME_CONFIG,
   DateDivider: () => DateDivider,
   EditTool: () => EditTool,
@@ -11780,6 +11783,7 @@ __export(index_exports, {
   WindowChrome: () => WindowChrome,
   WriteTool: () => EditTool,
   applyTheme: () => applyTheme,
+  createAgentChat: () => createAgentChat,
   createAnChat: () => createAnChat,
   extractThemeConfig: () => extractThemeConfig,
   loadGoogleFont: () => loadGoogleFont,
@@ -13762,7 +13766,7 @@ function applyTheme(element, theme, colorMode = "auto") {
 init_cn();
 init_theme_config();
 var import_jsx_runtime34 = require("react/jsx-runtime");
-function AnAgentChat({
+function AgentChat({
   messages,
   onSend,
   status,
@@ -13846,6 +13850,7 @@ function AnAgentChat({
     }
   ) });
 }
+var AnAgentChat = AgentChat;
 
 // src/create-an-chat.ts
 var import_react51 = require("@ai-sdk/react");
@@ -13873,7 +13878,7 @@ function createTokenFetcher(tokenUrl, agent) {
     return data.token;
   };
 }
-function createAnChat(options) {
+function createAgentChat(options) {
   const {
     agent,
     tokenUrl,
@@ -13886,7 +13891,7 @@ function createAnChat(options) {
   } = options;
   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 import_react51.Chat({
     id: sandboxId || `sandbox-${agent}`,
@@ -13905,6 +13910,7 @@ function createAnChat(options) {
     onError
   });
 }
+var createAnChat = createAgentChat;
 
 // src/index.ts
 init_theme_config();
@@ -15294,24 +15300,29 @@ init_tool_icons();
 init_file_ext_icon();
 
 // src/models.ts
-var AN_CLAUDE_MODELS = [
+var CLAUDE_MODELS = [
   { id: "sonnet", name: "Sonnet", version: "4.6" },
   { id: "opus", name: "Opus", version: "4.6" },
   { id: "haiku", name: "Haiku", version: "4.5" }
 ];
-var AN_DEFAULT_MODEL_ID = "sonnet";
+var DEFAULT_MODEL_ID = "sonnet";
+var AN_CLAUDE_MODELS = CLAUDE_MODELS;
+var AN_DEFAULT_MODEL_ID = DEFAULT_MODEL_ID;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AN_CLAUDE_MODELS,
   AN_DEFAULT_MODEL_ID,
   ActionRow,
+  AgentChat,
   AnAgentChat,
   AttachmentButton,
   BashTool,
+  CLAUDE_MODELS,
   CheckIcon16,
   ChevronDown,
   ChevronRightIcon,
   ContextItems,
+  DEFAULT_MODEL_ID,
   DEFAULT_THEME_CONFIG,
   DateDivider,
   EditTool,
@@ -15355,6 +15366,7 @@ var AN_DEFAULT_MODEL_ID = "sonnet";
   WindowChrome,
   WriteTool,
   applyTheme,
+  createAgentChat,
   createAnChat,
   extractThemeConfig,
   loadGoogleFont,