@21st-sdk/nextjs 0.0.8 → 0.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +8 -8
  2. package/docs/01-overview.md +7 -7
  3. package/docs/02-getting-started.md +9 -9
  4. package/docs/03-defining-agents.md +3 -3
  5. package/docs/04-react-ui.md +7 -7
  6. package/docs/05-nextjs.md +9 -9
  7. package/docs/06-node-sdk.md +3 -3
  8. package/docs/07-cli.md +8 -8
  9. package/docs/08-custom-tools.md +3 -3
  10. package/package.json +4 -4
package/README.md CHANGED
@@ -1,11 +1,11 @@
1
- # @an-sdk/nextjs
1
+ # @21st-sdk/nextjs
2
2
 
3
- Next.js integration for [AN](https://an.dev) AI agent chat. Provides a server-side token handler so your API key never reaches the client.
3
+ 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.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
- npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
8
+ npm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react
9
9
  ```
10
10
 
11
11
  ## Quick Start
@@ -17,13 +17,13 @@ npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
17
17
  AN_API_KEY=an_sk_your_key_here
18
18
  ```
19
19
 
20
- Get your API key from [an.dev/agents/dashboard/api](https://an.dev/agents/dashboard/api).
20
+ Get your API key from [the dashboard](https://21st.dev/agents/dashboard/api).
21
21
 
22
22
  ### 2. Create the token route (one line)
23
23
 
24
24
  ```ts
25
25
  // app/api/an/token/route.ts
26
- import { createAnTokenHandler } from "@an-sdk/nextjs/server"
26
+ import { createAnTokenHandler } from "@21st-sdk/nextjs/server"
27
27
 
28
28
  export const POST = createAnTokenHandler({
29
29
  apiKey: process.env.AN_API_KEY!,
@@ -37,8 +37,8 @@ export const POST = createAnTokenHandler({
37
37
  "use client"
38
38
 
39
39
  import { useChat } from "@ai-sdk/react"
40
- import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
41
- import "@an-sdk/react/styles.css"
40
+ import { AnAgentChat, createAnChat } from "@21st-sdk/nextjs"
41
+ import "@21st-sdk/react/styles.css"
42
42
  import { useMemo } from "react"
43
43
 
44
44
  export default function Chat() {
@@ -71,7 +71,7 @@ That's it. Your `an_sk_` API key stays on the server. The client only receives s
71
71
  ## How It Works
72
72
 
73
73
  ```
74
- Browser Your Next.js Server AN Relay
74
+ Browser Your Next.js Server An Relay
75
75
  | | |
76
76
  |-- POST /api/an/token --------->| |
77
77
  | |-- POST /v1/tokens -------->|
package/docs/01-overview.md CHANGED
@@ -8,7 +8,7 @@ AN is a platform for building, deploying, and embedding AI agents. You define an
8
8
  Your Code (agent.ts)
9
9
  |
10
10
  v
11
- @an-sdk/cli deploy (CLI)
11
+ @21st-sdk/cli deploy (CLI)
12
12
  |
13
13
  v
14
14
  AN Platform
@@ -30,11 +30,11 @@ AN Platform
30
30
 
31
31
  | Package | Purpose |
32
32
  |---------|---------|
33
- | `@an-sdk/agent` | Define agents and tools with type inference |
34
- | `@an-sdk/cli` | Deploy agents from your terminal |
35
- | `@an-sdk/react` | Chat UI components (theming, tool renderers) |
36
- | `@an-sdk/nextjs` | Next.js server-side token handler |
37
- | `@an-sdk/node` | Server-side SDK (sandboxes, threads, tokens) |
33
+ | `@21st-sdk/agent` | Define agents and tools with type inference |
34
+ | `@21st-sdk/cli` | Deploy agents from your terminal |
35
+ | `@21st-sdk/react` | Chat UI components (theming, tool renderers) |
36
+ | `@21st-sdk/nextjs` | Next.js server-side token handler |
37
+ | `@21st-sdk/node` | Server-side SDK (sandboxes, threads, tokens) |
38
38
 
39
39
  ## Key Concepts
40
40
 
@@ -58,4 +58,4 @@ Two layers of authentication:
58
58
  1. **Client -> Relay**: API key (`an_sk_...`) or short-lived JWT (via token exchange)
59
59
  2. **Sandbox -> AI Provider**: Handled internally by the platform (Claude Proxy)
60
60
 
61
- 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.
61
+ 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 CHANGED
@@ -2,12 +2,12 @@
2
2
 
3
3
  ## 1. Get an API Key
4
4
 
5
- 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).
5
+ Sign up at [21st.dev/agents](https://21st.dev/agents) and get your API key from [the dashboard](https://21st.dev/agents/dashboard/api).
6
6
 
7
7
  ## 2. Install
8
8
 
9
9
  ```bash
10
- npm install @an-sdk/agent zod
10
+ npm install @21st-sdk/agent zod
11
11
  ```
12
12
 
13
13
  ## 3. Define Your Agent
@@ -15,7 +15,7 @@ npm install @an-sdk/agent zod
15
15
  Create `src/agent.ts`:
16
16
 
17
17
  ```ts
18
- import { agent, tool } from "@an-sdk/agent"
18
+ import { agent, tool } from "@21st-sdk/agent"
19
19
  import { z } from "zod"
20
20
 
21
21
  export default agent({
@@ -36,10 +36,10 @@ export default agent({
36
36
  ## 4. Login & Deploy
37
37
 
38
38
  ```bash
39
- npx @an-sdk/cli login
39
+ npx @21st-sdk/cli login
40
40
  # Enter your API key: an_sk_...
41
41
 
42
- npx @an-sdk/cli deploy
42
+ npx @21st-sdk/cli deploy
43
43
  # Bundling src/agent.ts...
44
44
  # Deploying my-agent...
45
45
  # https://api.an.dev/v1/chat/my-agent
@@ -50,14 +50,14 @@ Your agent is live.
50
50
  ## 5. Embed in a React App
51
51
 
52
52
  ```bash
53
- npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
53
+ npm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react
54
54
  ```
55
55
 
56
56
  Create a token route (keeps your API key on the server):
57
57
 
58
58
  ```ts
59
59
  // app/api/an/token/route.ts
60
- import { createAnTokenHandler } from "@an-sdk/nextjs/server"
60
+ import { createAnTokenHandler } from "@21st-sdk/nextjs/server"
61
61
 
62
62
  export const POST = createAnTokenHandler({
63
63
  apiKey: process.env.AN_API_KEY!,
@@ -71,8 +71,8 @@ Add the chat UI:
71
71
  "use client"
72
72
 
73
73
  import { useChat } from "@ai-sdk/react"
74
- import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
75
- import "@an-sdk/react/styles.css"
74
+ import { AnAgentChat, createAnChat } from "@21st-sdk/nextjs"
75
+ import "@21st-sdk/react/styles.css"
76
76
  import { useMemo } from "react"
77
77
 
78
78
  export default function Chat() {
package/docs/03-defining-agents.md CHANGED
@@ -1,11 +1,11 @@
1
1
  # Defining Agents
2
2
 
3
- 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).
3
+ 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).
4
4
 
5
5
  ## `agent(config)`
6
6
 
7
7
  ```ts
8
- import { agent } from "@an-sdk/agent"
8
+ import { agent } from "@21st-sdk/agent"
9
9
 
10
10
  export default agent({
11
11
  // Model (default: "claude-sonnet-4-6")
@@ -52,7 +52,7 @@ export default agent({
52
52
  ## `tool(definition)`
53
53
 
54
54
  ```ts
55
- import { tool } from "@an-sdk/agent"
55
+ import { tool } from "@21st-sdk/agent"
56
56
  import { z } from "zod"
57
57
 
58
58
  const myTool = tool({
package/docs/04-react-ui.md CHANGED
@@ -1,11 +1,11 @@
1
1
  # React UI
2
2
 
3
- `@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`.
3
+ `@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`.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
- npm install @an-sdk/react ai @ai-sdk/react
8
+ npm install @21st-sdk/react ai @ai-sdk/react
9
9
  ```
10
10
 
11
11
  ## Basic Usage
@@ -14,8 +14,8 @@ npm install @an-sdk/react ai @ai-sdk/react
14
14
  "use client"
15
15
 
16
16
  import { useChat } from "@ai-sdk/react"
17
- import { AnAgentChat, createAnChat } from "@an-sdk/react"
18
- import "@an-sdk/react/styles.css"
17
+ import { AnAgentChat, createAnChat } from "@21st-sdk/react"
18
+ import "@21st-sdk/react/styles.css"
19
19
  import { useMemo } from "react"
20
20
 
21
21
  export default function Chat() {
@@ -82,7 +82,7 @@ Four levels, from simple to full control:
82
82
 
83
83
  ### 1. Theme tokens
84
84
 
85
- Apply a theme JSON from the [AN Playground](https://an.dev/an/playground):
85
+ Apply a theme JSON from the [AN Playground](https://21st.dev/agents/playground):
86
86
 
87
87
  ```tsx
88
88
  <AnAgentChat theme={playgroundTheme} colorMode="dark" />
@@ -118,7 +118,7 @@ Swap sub-components:
118
118
  ### 4. Individual component imports
119
119
 
120
120
  ```tsx
121
- import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react"
121
+ import { MessageList, InputBar, ToolRenderer } from "@21st-sdk/react"
122
122
  ```
123
123
 
124
124
  ## CSS
@@ -126,7 +126,7 @@ import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react"
126
126
  Import once in your app:
127
127
 
128
128
  ```tsx
129
- import "@an-sdk/react/styles.css"
129
+ import "@21st-sdk/react/styles.css"
130
130
  ```
131
131
 
132
132
  No Tailwind peer dependency — CSS is pre-compiled. All elements have stable `an-*` class names:
package/docs/05-nextjs.md CHANGED
@@ -1,11 +1,11 @@
1
1
  # Next.js Integration
2
2
 
3
- `@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.
3
+ `@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.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
- npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
8
+ npm install @21st-sdk/nextjs @21st-sdk/react ai @ai-sdk/react
9
9
  ```
10
10
 
11
11
  ## Setup
@@ -17,13 +17,13 @@ npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
17
17
  AN_API_KEY=an_sk_your_key_here
18
18
  ```
19
19
 
20
- Get your API key from [an.dev/agents/dashboard/api](https://an.dev/agents/dashboard/api).
20
+ Get your API key from [the dashboard](https://21st.dev/agents/dashboard/api).
21
21
 
22
22
  ### 2. Create the token route
23
23
 
24
24
  ```ts
25
25
  // app/api/an/token/route.ts
26
- import { createAnTokenHandler } from "@an-sdk/nextjs/server"
26
+ import { createAnTokenHandler } from "@21st-sdk/nextjs/server"
27
27
 
28
28
  export const POST = createAnTokenHandler({
29
29
  apiKey: process.env.AN_API_KEY!,
@@ -37,8 +37,8 @@ export const POST = createAnTokenHandler({
37
37
  "use client"
38
38
 
39
39
  import { useChat } from "@ai-sdk/react"
40
- import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
41
- import "@an-sdk/react/styles.css"
40
+ import { AnAgentChat, createAnChat } from "@21st-sdk/nextjs"
41
+ import "@21st-sdk/react/styles.css"
42
42
  import { useMemo } from "react"
43
43
 
44
44
  export default function Chat() {
@@ -102,7 +102,7 @@ createAnTokenHandler({
102
102
  Lower-level function for custom token exchange logic.
103
103
 
104
104
  ```ts
105
- import { exchangeToken } from "@an-sdk/nextjs/server"
105
+ import { exchangeToken } from "@21st-sdk/nextjs/server"
106
106
 
107
107
  const { token, expiresAt } = await exchangeToken({
108
108
  apiKey: process.env.AN_API_KEY!,
@@ -113,5 +113,5 @@ const { token, expiresAt } = await exchangeToken({
113
113
 
114
114
  ## Entry Points
115
115
 
116
- - `@an-sdk/nextjs` — Re-exports everything from `@an-sdk/react` (components, types, `createAnChat`)
117
- - `@an-sdk/nextjs/server` — Server-only: `createAnTokenHandler`, `exchangeToken`
116
+ - `@21st-sdk/nextjs` — Re-exports everything from `@21st-sdk/react` (components, types, `createAnChat`)
117
+ - `@21st-sdk/nextjs/server` — Server-only: `createAnTokenHandler`, `exchangeToken`
package/docs/06-node-sdk.md CHANGED
@@ -1,17 +1,17 @@
1
1
  # Node SDK
2
2
 
3
- `@an-sdk/node` is a server-side client for the AN API. Use it to manage sandboxes, threads, and tokens programmatically.
3
+ `@21st-sdk/node` is a server-side client for the AN API. Use it to manage sandboxes, threads, and tokens programmatically.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
- npm install @an-sdk/node
8
+ npm install @21st-sdk/node
9
9
  ```
10
10
 
11
11
  ## Quick Start
12
12
 
13
13
  ```ts
14
- import { AnClient } from "@an-sdk/node"
14
+ import { AnClient } from "@21st-sdk/node"
15
15
 
16
16
  const an = new AnClient({
17
17
  apiKey: process.env.AN_API_KEY!, // an_sk_...
package/docs/07-cli.md CHANGED
@@ -1,35 +1,35 @@
1
1
  # CLI Reference
2
2
 
3
- `@an-sdk/cli` provides the `an` command for deploying agents.
3
+ `@21st-sdk/cli` provides the `an` command for deploying agents.
4
4
 
5
5
  ## Install
6
6
 
7
7
  ```bash
8
- npm install -g @an-sdk/cli
8
+ npm install -g @21st-sdk/cli
9
9
  # or use npx
10
- npx @an-sdk/cli <command>
10
+ npx @21st-sdk/cli <command>
11
11
  ```
12
12
 
13
13
  ## Commands
14
14
 
15
- ### `@an-sdk/cli login`
15
+ ### `@21st-sdk/cli login`
16
16
 
17
17
  Authenticate with the AN platform.
18
18
 
19
19
  ```bash
20
- npx @an-sdk/cli login
20
+ npx @21st-sdk/cli login
21
21
  # Enter your API key: an_sk_...
22
22
  # Authenticated as John (team: my-team)
23
23
  ```
24
24
 
25
25
  Your key is saved to `~/.an/credentials`.
26
26
 
27
- ### `@an-sdk/cli deploy`
27
+ ### `@21st-sdk/cli deploy`
28
28
 
29
29
  Bundle and deploy your agent.
30
30
 
31
31
  ```bash
32
- npx @an-sdk/cli deploy
32
+ npx @21st-sdk/cli deploy
33
33
  # Bundling src/agent.ts...
34
34
  # Bundled (12.3kb)
35
35
  # Deploying my-agent...
@@ -71,7 +71,7 @@ Subsequent deploys update the existing agent.
71
71
  The CLI uses esbuild to bundle your agent code:
72
72
 
73
73
  - Target: Node 22, ESM
74
- - `@an-sdk/agent` is externalized (provided by the sandbox runtime)
74
+ - `@21st-sdk/agent` is externalized (provided by the sandbox runtime)
75
75
  - All other dependencies are bundled into a single file
76
76
 
77
77
  ## Configuration Files
package/docs/08-custom-tools.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Custom Tool Renderers
2
2
 
3
- 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.
3
+ 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.
4
4
 
5
5
  ## Built-in Tool Renderers
6
6
 
@@ -24,8 +24,8 @@ These are rendered automatically when your agent uses standard tools:
24
24
  To render your custom tools differently, use the `slots.ToolRenderer` prop:
25
25
 
26
26
  ```tsx
27
- import { AnAgentChat, ToolRenderer } from "@an-sdk/react"
28
- import type { ToolPart } from "@an-sdk/react"
27
+ import { AnAgentChat, ToolRenderer } from "@21st-sdk/react"
28
+ import type { ToolPart } from "@21st-sdk/react"
29
29
 
30
30
  function MyToolRenderer(props: { part: ToolPart; status: string }) {
31
31
  const { part, status } = props
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@21st-sdk/nextjs",
3
- "version": "0.0.8",
3
+ "version": "0.0.9",
4
4
  "license": "MIT",
5
- "description": "Next.js integration for AN AI agent chat — server-side token handler",
6
- "homepage": "https://an.dev",
5
+ "description": "Next.js integration for An AI agent chat",
6
+ "homepage": "https://21st.dev/agents",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
@@ -64,7 +64,7 @@
64
64
  "react": "^18.0.0 || ^19.0.0",
65
65
  "react-dom": "^18.0.0 || ^19.0.0",
66
66
  "@ai-sdk/react": "^2.0.0",
67
- "@21st-sdk/react": "^0.0.5",
67
+ "@21st-sdk/react": "^0.1.3",
68
68
  "ai": "^5.0.0"
69
69
  },
70
70
  "devDependencies": {