@21st-sdk/nextjs 0.0.9 → 0.0.10

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,6 +1,6 @@
 # @21st-sdk/nextjs
 
-Next.js integration for [An](https://21st.dev/agents) AI agent chat. Provides a server-side token handler so your API key never reaches the client.
+Next.js integration for [21st Agents](https://21st.dev/agents) AI agent chat. Provides a server-side token handler so your API key never reaches the client.
 
 ## Install
 
@@ -14,19 +14,19 @@ 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).
+Get your API key from [the API keys page](https://21st.dev/agents/api-keys).
 
 ### 2. Create the token route (one line)
 
 ```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,9 +71,9 @@ That's it. Your `an_sk_` API key stays on the server. The client only receives s
 ## How It Works
 
 ```
-Browser                     Your Next.js Server              An Relay
+Browser                     Your Next.js Server              Relay
   |                                |                            |
-  |-- POST /api/an/token --------->|                            |
+  |-- POST /api/agent/token ------>|                            |
   |                                |-- POST /v1/tokens -------->|
   |                                |   (with an_sk_ key)        |
   |                                |<-- { token, expiresAt } ---|

package/dist/server.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var server_exports = {};
 __export(server_exports, {
   createAnTokenHandler: () => createAnTokenHandler,
+  createTokenHandler: () => createTokenHandler,
   exchangeToken: () => exchangeToken
 });
 module.exports = __toCommonJS(server_exports);
@@ -50,7 +51,7 @@ async function exchangeToken(options) {
   }
   return res.json();
 }
-function createAnTokenHandler(options) {
+function createTokenHandler(options) {
   return async function POST(req) {
     try {
       const body = await req.json().catch(() => ({}));
@@ -63,9 +64,11 @@ function createAnTokenHandler(options) {
     }
   };
 }
+var createAnTokenHandler = createTokenHandler;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createAnTokenHandler,
+  createTokenHandler,
   exchangeToken
 });
 //# sourceMappingURL=server.cjs.map

package/dist/server.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"sourcesContent":["export interface TokenHandlerOptions {\n  /** Your an_sk_ API key — keep in process.env, never expose to client */\n  apiKey: string\n  /** Relay URL. Default: \"https://relay.an.dev\" */\n  relayUrl?: string\n  /** Token expiry. Default: \"1h\" */\n  expiresIn?: string\n}\n\nexport interface ExchangeTokenOptions extends TokenHandlerOptions {\n  /** Agent slug to scope the token to */\n  agent?: string\n  /** User identifier for the token */\n  userId?: string\n}\n\n/** Exchange an an_sk_ API key for a short-lived JWT via the relay */\nexport async function exchangeToken(options: ExchangeTokenOptions) {\n  const {\n    apiKey,\n    relayUrl = \"https://relay.an.dev\",\n    expiresIn = \"1h\",\n    agent,\n    userId,\n  } = options\n\n  const res = await fetch(`${relayUrl}/v1/tokens`, {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${apiKey}`,\n    },\n    body: JSON.stringify({\n      userId,\n      agents: agent ? [agent] : undefined,\n      expiresIn,\n    }),\n  })\n\n  if (!res.ok) {\n    const err = await res.json().catch(() => ({ error: \"Failed to exchange token\" }))\n    throw new Error(err.error || `Token exchange failed: ${res.status}`)\n  }\n\n  return res.json() as Promise<{ token: string; expiresAt: string }>\n}\n\n/** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */\nexport function createAnTokenHandler(options: TokenHandlerOptions) {\n  return async function POST(req: Request) {\n    try {\n      const body = await req.json().catch(() => ({}))\n      const { agent, userId } = body as { agent?: string; userId?: string }\n\n      const data = await exchangeToken({ ...options, agent, userId })\n      return Response.json(data)\n    } catch (err) {\n      const message = err instanceof Error ? err.message : \"Internal error\"\n      return Response.json({ error: message }, { status: 500 })\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA,eAAsB,cAAc,SAA+B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,MAAM,MAAM,GAAG,QAAQ,cAAc;AAAA,IAC/C,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,eAAe,UAAU,MAAM;AAAA,IACjC;AAAA,IACA,MAAM,KAAK,UAAU;AAAA,MACnB;AAAA,MACA,QAAQ,QAAQ,CAAC,KAAK,IAAI;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,MAAM,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,EAAE,OAAO,2BAA2B,EAAE;AAChF,UAAM,IAAI,MAAM,IAAI,SAAS,0BAA0B,IAAI,MAAM,EAAE;AAAA,EACrE;AAEA,SAAO,IAAI,KAAK;AAClB;AAGO,SAAS,qBAAqB,SAA8B;AACjE,SAAO,eAAe,KAAK,KAAc;AACvC,QAAI;AACF,YAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAC9C,YAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,YAAM,OAAO,MAAM,cAAc,EAAE,GAAG,SAAS,OAAO,OAAO,CAAC;AAC9D,aAAO,SAAS,KAAK,IAAI;AAAA,IAC3B,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,aAAO,SAAS,KAAK,EAAE,OAAO,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["export interface TokenHandlerOptions {\n  /** Your an_sk_ API key — keep in process.env, never expose to client */\n  apiKey: string\n  /** Relay URL. Default: \"https://relay.an.dev\" */\n  relayUrl?: string\n  /** Token expiry. Default: \"1h\" */\n  expiresIn?: string\n}\n\nexport interface ExchangeTokenOptions extends TokenHandlerOptions {\n  /** Agent slug to scope the token to */\n  agent?: string\n  /** User identifier for the token */\n  userId?: string\n}\n\n/** Exchange an an_sk_ API key for a short-lived JWT via the relay */\nexport async function exchangeToken(options: ExchangeTokenOptions) {\n  const {\n    apiKey,\n    relayUrl = \"https://relay.an.dev\",\n    expiresIn = \"1h\",\n    agent,\n    userId,\n  } = options\n\n  const res = await fetch(`${relayUrl}/v1/tokens`, {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${apiKey}`,\n    },\n    body: JSON.stringify({\n      userId,\n      agents: agent ? [agent] : undefined,\n      expiresIn,\n    }),\n  })\n\n  if (!res.ok) {\n    const err = await res.json().catch(() => ({ error: \"Failed to exchange token\" }))\n    throw new Error(err.error || `Token exchange failed: ${res.status}`)\n  }\n\n  return res.json() as Promise<{ token: string; expiresAt: string }>\n}\n\n/** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */\nexport function createTokenHandler(options: TokenHandlerOptions) {\n  return async function POST(req: Request) {\n    try {\n      const body = await req.json().catch(() => ({}))\n      const { agent, userId } = body as { agent?: string; userId?: string }\n\n      const data = await exchangeToken({ ...options, agent, userId })\n      return Response.json(data)\n    } catch (err) {\n      const message = err instanceof Error ? err.message : \"Internal error\"\n      return Response.json({ error: message }, { status: 500 })\n    }\n  }\n}\n\n// Legacy handler alias kept for compatibility.\nexport const createAnTokenHandler = createTokenHandler\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA,eAAsB,cAAc,SAA+B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,MAAM,MAAM,GAAG,QAAQ,cAAc;AAAA,IAC/C,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,eAAe,UAAU,MAAM;AAAA,IACjC;AAAA,IACA,MAAM,KAAK,UAAU;AAAA,MACnB;AAAA,MACA,QAAQ,QAAQ,CAAC,KAAK,IAAI;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,MAAM,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,EAAE,OAAO,2BAA2B,EAAE;AAChF,UAAM,IAAI,MAAM,IAAI,SAAS,0BAA0B,IAAI,MAAM,EAAE;AAAA,EACrE;AAEA,SAAO,IAAI,KAAK;AAClB;AAGO,SAAS,mBAAmB,SAA8B;AAC/D,SAAO,eAAe,KAAK,KAAc;AACvC,QAAI;AACF,YAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAC9C,YAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,YAAM,OAAO,MAAM,cAAc,EAAE,GAAG,SAAS,OAAO,OAAO,CAAC;AAC9D,aAAO,SAAS,KAAK,IAAI;AAAA,IAC3B,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,aAAO,SAAS,KAAK,EAAE,OAAO,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAGO,IAAM,uBAAuB;","names":[]}

package/dist/server.d.cts

@@ -18,6 +18,7 @@ declare function exchangeToken(options: ExchangeTokenOptions): Promise<{
     expiresAt: string;
 }>;
 /** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */
-declare function createAnTokenHandler(options: TokenHandlerOptions): (req: Request) => Promise<Response>;
+declare function createTokenHandler(options: TokenHandlerOptions): (req: Request) => Promise<Response>;
+declare const createAnTokenHandler: typeof createTokenHandler;
 
-export { type ExchangeTokenOptions, type TokenHandlerOptions, createAnTokenHandler, exchangeToken };
+export { type ExchangeTokenOptions, type TokenHandlerOptions, createAnTokenHandler, createTokenHandler, exchangeToken };

package/dist/server.d.ts

@@ -18,6 +18,7 @@ declare function exchangeToken(options: ExchangeTokenOptions): Promise<{
     expiresAt: string;
 }>;
 /** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */
-declare function createAnTokenHandler(options: TokenHandlerOptions): (req: Request) => Promise<Response>;
+declare function createTokenHandler(options: TokenHandlerOptions): (req: Request) => Promise<Response>;
+declare const createAnTokenHandler: typeof createTokenHandler;
 
-export { type ExchangeTokenOptions, type TokenHandlerOptions, createAnTokenHandler, exchangeToken };
+export { type ExchangeTokenOptions, type TokenHandlerOptions, createAnTokenHandler, createTokenHandler, exchangeToken };

package/dist/server.js

@@ -25,7 +25,7 @@ async function exchangeToken(options) {
   }
   return res.json();
 }
-function createAnTokenHandler(options) {
+function createTokenHandler(options) {
   return async function POST(req) {
     try {
       const body = await req.json().catch(() => ({}));
@@ -38,8 +38,10 @@ function createAnTokenHandler(options) {
     }
   };
 }
+var createAnTokenHandler = createTokenHandler;
 export {
   createAnTokenHandler,
+  createTokenHandler,
   exchangeToken
 };
 //# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/server.ts"],"sourcesContent":["export interface TokenHandlerOptions {\n  /** Your an_sk_ API key — keep in process.env, never expose to client */\n  apiKey: string\n  /** Relay URL. Default: \"https://relay.an.dev\" */\n  relayUrl?: string\n  /** Token expiry. Default: \"1h\" */\n  expiresIn?: string\n}\n\nexport interface ExchangeTokenOptions extends TokenHandlerOptions {\n  /** Agent slug to scope the token to */\n  agent?: string\n  /** User identifier for the token */\n  userId?: string\n}\n\n/** Exchange an an_sk_ API key for a short-lived JWT via the relay */\nexport async function exchangeToken(options: ExchangeTokenOptions) {\n  const {\n    apiKey,\n    relayUrl = \"https://relay.an.dev\",\n    expiresIn = \"1h\",\n    agent,\n    userId,\n  } = options\n\n  const res = await fetch(`${relayUrl}/v1/tokens`, {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${apiKey}`,\n    },\n    body: JSON.stringify({\n      userId,\n      agents: agent ? [agent] : undefined,\n      expiresIn,\n    }),\n  })\n\n  if (!res.ok) {\n    const err = await res.json().catch(() => ({ error: \"Failed to exchange token\" }))\n    throw new Error(err.error || `Token exchange failed: ${res.status}`)\n  }\n\n  return res.json() as Promise<{ token: string; expiresAt: string }>\n}\n\n/** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */\nexport function createAnTokenHandler(options: TokenHandlerOptions) {\n  return async function POST(req: Request) {\n    try {\n      const body = await req.json().catch(() => ({}))\n      const { agent, userId } = body as { agent?: string; userId?: string }\n\n      const data = await exchangeToken({ ...options, agent, userId })\n      return Response.json(data)\n    } catch (err) {\n      const message = err instanceof Error ? err.message : \"Internal error\"\n      return Response.json({ error: message }, { status: 500 })\n    }\n  }\n}\n"],"mappings":";AAiBA,eAAsB,cAAc,SAA+B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,MAAM,MAAM,GAAG,QAAQ,cAAc;AAAA,IAC/C,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,eAAe,UAAU,MAAM;AAAA,IACjC;AAAA,IACA,MAAM,KAAK,UAAU;AAAA,MACnB;AAAA,MACA,QAAQ,QAAQ,CAAC,KAAK,IAAI;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,MAAM,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,EAAE,OAAO,2BAA2B,EAAE;AAChF,UAAM,IAAI,MAAM,IAAI,SAAS,0BAA0B,IAAI,MAAM,EAAE;AAAA,EACrE;AAEA,SAAO,IAAI,KAAK;AAClB;AAGO,SAAS,qBAAqB,SAA8B;AACjE,SAAO,eAAe,KAAK,KAAc;AACvC,QAAI;AACF,YAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAC9C,YAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,YAAM,OAAO,MAAM,cAAc,EAAE,GAAG,SAAS,OAAO,OAAO,CAAC;AAC9D,aAAO,SAAS,KAAK,IAAI;AAAA,IAC3B,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,aAAO,SAAS,KAAK,EAAE,OAAO,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../src/server.ts"],"sourcesContent":["export interface TokenHandlerOptions {\n  /** Your an_sk_ API key — keep in process.env, never expose to client */\n  apiKey: string\n  /** Relay URL. Default: \"https://relay.an.dev\" */\n  relayUrl?: string\n  /** Token expiry. Default: \"1h\" */\n  expiresIn?: string\n}\n\nexport interface ExchangeTokenOptions extends TokenHandlerOptions {\n  /** Agent slug to scope the token to */\n  agent?: string\n  /** User identifier for the token */\n  userId?: string\n}\n\n/** Exchange an an_sk_ API key for a short-lived JWT via the relay */\nexport async function exchangeToken(options: ExchangeTokenOptions) {\n  const {\n    apiKey,\n    relayUrl = \"https://relay.an.dev\",\n    expiresIn = \"1h\",\n    agent,\n    userId,\n  } = options\n\n  const res = await fetch(`${relayUrl}/v1/tokens`, {\n    method: \"POST\",\n    headers: {\n      \"Content-Type\": \"application/json\",\n      Authorization: `Bearer ${apiKey}`,\n    },\n    body: JSON.stringify({\n      userId,\n      agents: agent ? [agent] : undefined,\n      expiresIn,\n    }),\n  })\n\n  if (!res.ok) {\n    const err = await res.json().catch(() => ({ error: \"Failed to exchange token\" }))\n    throw new Error(err.error || `Token exchange failed: ${res.status}`)\n  }\n\n  return res.json() as Promise<{ token: string; expiresAt: string }>\n}\n\n/** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */\nexport function createTokenHandler(options: TokenHandlerOptions) {\n  return async function POST(req: Request) {\n    try {\n      const body = await req.json().catch(() => ({}))\n      const { agent, userId } = body as { agent?: string; userId?: string }\n\n      const data = await exchangeToken({ ...options, agent, userId })\n      return Response.json(data)\n    } catch (err) {\n      const message = err instanceof Error ? err.message : \"Internal error\"\n      return Response.json({ error: message }, { status: 500 })\n    }\n  }\n}\n\n// Legacy handler alias kept for compatibility.\nexport const createAnTokenHandler = createTokenHandler\n"],"mappings":";AAiBA,eAAsB,cAAc,SAA+B;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,MAAM,MAAM,GAAG,QAAQ,cAAc;AAAA,IAC/C,QAAQ;AAAA,IACR,SAAS;AAAA,MACP,gBAAgB;AAAA,MAChB,eAAe,UAAU,MAAM;AAAA,IACjC;AAAA,IACA,MAAM,KAAK,UAAU;AAAA,MACnB;AAAA,MACA,QAAQ,QAAQ,CAAC,KAAK,IAAI;AAAA,MAC1B;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,MAAI,CAAC,IAAI,IAAI;AACX,UAAM,MAAM,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,EAAE,OAAO,2BAA2B,EAAE;AAChF,UAAM,IAAI,MAAM,IAAI,SAAS,0BAA0B,IAAI,MAAM,EAAE;AAAA,EACrE;AAEA,SAAO,IAAI,KAAK;AAClB;AAGO,SAAS,mBAAmB,SAA8B;AAC/D,SAAO,eAAe,KAAK,KAAc;AACvC,QAAI;AACF,YAAM,OAAO,MAAM,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC,EAAE;AAC9C,YAAM,EAAE,OAAO,OAAO,IAAI;AAE1B,YAAM,OAAO,MAAM,cAAc,EAAE,GAAG,SAAS,OAAO,OAAO,CAAC;AAC9D,aAAO,SAAS,KAAK,IAAI;AAAA,IAC3B,SAAS,KAAK;AACZ,YAAM,UAAU,eAAe,QAAQ,IAAI,UAAU;AACrD,aAAO,SAAS,KAAK,EAAE,OAAO,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AAGO,IAAM,uBAAuB;","names":[]}

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/nextjs",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
-  "description": "Next.js integration for An AI agent chat",
+  "description": "Next.js integration for 21st Agents chat",
   "homepage": "https://21st.dev/agents",
   "publishConfig": {
     "access": "public"
@@ -49,8 +49,8 @@
     "agent",
     "chat",
     "ai-sdk",
-    "an",
-    "an.dev"
+    "21st",
+    "21st.dev"
   ],
   "scripts": {
     "prepack": "cp -r ../docs ./docs",
@@ -64,7 +64,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@ai-sdk/react": "^2.0.0",
-    "@21st-sdk/react": "^0.1.3",
+    "@21st-sdk/react": "^0.1.4",
     "ai": "^5.0.0"
   },
   "devDependencies": {

package/src/server.ts

@@ -46,7 +46,7 @@ export async function exchangeToken(options: ExchangeTokenOptions) {
 }
 
 /** Create a Next.js API route handler that exchanges an_sk_ keys for JWTs */
-export function createAnTokenHandler(options: TokenHandlerOptions) {
+export function createTokenHandler(options: TokenHandlerOptions) {
   return async function POST(req: Request) {
     try {
       const body = await req.json().catch(() => ({}))
@@ -60,3 +60,6 @@ export function createAnTokenHandler(options: TokenHandlerOptions) {
     }
   }
 }
+
+// Legacy handler alias kept for compatibility.
+export const createAnTokenHandler = createTokenHandler