@an-sdk/cli 0.0.8 → 0.0.10
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.
- package/AGENTS.md +19 -0
- package/dist/index.js +303 -114
- package/docs/01-overview.md +61 -0
- package/docs/02-getting-started.md +110 -0
- package/docs/03-defining-agents.md +159 -0
- package/docs/04-react-ui.md +186 -0
- package/docs/05-nextjs.md +117 -0
- package/docs/06-node-sdk.md +125 -0
- package/docs/07-cli.md +88 -0
- package/docs/08-custom-tools.md +88 -0
- package/package.json +10 -1
- package/src/bundler.ts +156 -0
- package/src/config.ts +24 -0
- package/src/deploy.ts +95 -0
- package/src/detect.ts +16 -0
- package/src/env.ts +136 -0
- package/src/index.ts +100 -0
- package/src/login.ts +77 -0
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# Getting Started
|
|
2
|
+
|
|
3
|
+
## 1. Get an API Key
|
|
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).
|
|
6
|
+
|
|
7
|
+
## 2. Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @an-sdk/agent zod
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 3. Define Your Agent
|
|
14
|
+
|
|
15
|
+
Create `src/agent.ts`:
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import { agent, tool } from "@an-sdk/agent"
|
|
19
|
+
import { z } from "zod"
|
|
20
|
+
|
|
21
|
+
export default agent({
|
|
22
|
+
model: "claude-sonnet-4-6",
|
|
23
|
+
systemPrompt: "You are a helpful coding assistant.",
|
|
24
|
+
tools: {
|
|
25
|
+
greet: tool({
|
|
26
|
+
description: "Greet a user by name",
|
|
27
|
+
inputSchema: z.object({ name: z.string() }),
|
|
28
|
+
execute: async ({ name }) => ({
|
|
29
|
+
content: [{ type: "text", text: `Hello, ${name}!` }],
|
|
30
|
+
}),
|
|
31
|
+
}),
|
|
32
|
+
},
|
|
33
|
+
})
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## 4. Login & Deploy
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npx @an-sdk/cli login
|
|
40
|
+
# Enter your API key: an_sk_...
|
|
41
|
+
|
|
42
|
+
npx @an-sdk/cli deploy
|
|
43
|
+
# Bundling src/agent.ts...
|
|
44
|
+
# Deploying my-agent...
|
|
45
|
+
# https://api.an.dev/v1/chat/my-agent
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Your agent is live.
|
|
49
|
+
|
|
50
|
+
## 5. Embed in a React App
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Create a token route (keeps your API key on the server):
|
|
57
|
+
|
|
58
|
+
```ts
|
|
59
|
+
// app/api/an/token/route.ts
|
|
60
|
+
import { createAnTokenHandler } from "@an-sdk/nextjs/server"
|
|
61
|
+
|
|
62
|
+
export const POST = createAnTokenHandler({
|
|
63
|
+
apiKey: process.env.AN_API_KEY!,
|
|
64
|
+
})
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Add the chat UI:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// app/page.tsx
|
|
71
|
+
"use client"
|
|
72
|
+
|
|
73
|
+
import { useChat } from "@ai-sdk/react"
|
|
74
|
+
import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
|
|
75
|
+
import "@an-sdk/react/styles.css"
|
|
76
|
+
import { useMemo } from "react"
|
|
77
|
+
|
|
78
|
+
export default function Chat() {
|
|
79
|
+
const chat = useMemo(
|
|
80
|
+
() => createAnChat({
|
|
81
|
+
agent: "your-agent-slug",
|
|
82
|
+
tokenUrl: "/api/an/token",
|
|
83
|
+
}),
|
|
84
|
+
[],
|
|
85
|
+
)
|
|
86
|
+
|
|
87
|
+
const { messages, sendMessage, status, stop, error } = useChat({ chat })
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<AnAgentChat
|
|
91
|
+
messages={messages}
|
|
92
|
+
onSend={(msg) =>
|
|
93
|
+
sendMessage({ parts: [{ type: "text", text: msg.content }] })
|
|
94
|
+
}
|
|
95
|
+
status={status}
|
|
96
|
+
onStop={stop}
|
|
97
|
+
error={error}
|
|
98
|
+
/>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Next Steps
|
|
104
|
+
|
|
105
|
+
- [Defining Agents](./03-defining-agents.md) — Models, tools, hooks, permissions
|
|
106
|
+
- [React UI](./04-react-ui.md) — Theming, slots, tool renderers
|
|
107
|
+
- [Next.js Integration](./05-nextjs.md) — Server-side token handler
|
|
108
|
+
- [Node SDK](./06-node-sdk.md) — Sandboxes, threads, tokens from server code
|
|
109
|
+
- [CLI Reference](./07-cli.md) — All CLI commands
|
|
110
|
+
- [Custom Tools](./08-custom-tools.md) — Build custom tool renderers
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# Defining Agents
|
|
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).
|
|
4
|
+
|
|
5
|
+
## `agent(config)`
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
import { agent } from "@an-sdk/agent"
|
|
9
|
+
|
|
10
|
+
export default agent({
|
|
11
|
+
// Model (default: "claude-sonnet-4-6")
|
|
12
|
+
model: "claude-sonnet-4-6",
|
|
13
|
+
|
|
14
|
+
// System prompt
|
|
15
|
+
systemPrompt: "You are a PR reviewer...",
|
|
16
|
+
|
|
17
|
+
// Custom tools (see below)
|
|
18
|
+
tools: { /* ... */ },
|
|
19
|
+
|
|
20
|
+
// Runtime: "claude-code" (default) or "codex"
|
|
21
|
+
runtime: "claude-code",
|
|
22
|
+
|
|
23
|
+
// Permission mode: "default", "acceptEdits", or "bypassPermissions"
|
|
24
|
+
permissionMode: "default",
|
|
25
|
+
|
|
26
|
+
// Max conversation turns (default: 50)
|
|
27
|
+
maxTurns: 50,
|
|
28
|
+
|
|
29
|
+
// Max budget in USD
|
|
30
|
+
maxBudgetUsd: 5,
|
|
31
|
+
|
|
32
|
+
// Lifecycle hooks (see below)
|
|
33
|
+
onStart: async () => {},
|
|
34
|
+
onToolCall: async ({ toolName, input }) => {},
|
|
35
|
+
onToolResult: async ({ toolName, input, output }) => {},
|
|
36
|
+
onStepFinish: async ({ step }) => {},
|
|
37
|
+
onFinish: async ({ result }) => {},
|
|
38
|
+
onError: async ({ error }) => {},
|
|
39
|
+
})
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### Defaults
|
|
43
|
+
|
|
44
|
+
| Field | Default |
|
|
45
|
+
|-------|---------|
|
|
46
|
+
| `model` | `"claude-sonnet-4-6"` |
|
|
47
|
+
| `runtime` | `"claude-code"` |
|
|
48
|
+
| `permissionMode` | `"default"` |
|
|
49
|
+
| `maxTurns` | `50` |
|
|
50
|
+
| `tools` | `{}` |
|
|
51
|
+
|
|
52
|
+
## `tool(definition)`
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import { tool } from "@an-sdk/agent"
|
|
56
|
+
import { z } from "zod"
|
|
57
|
+
|
|
58
|
+
const myTool = tool({
|
|
59
|
+
description: "What this tool does",
|
|
60
|
+
inputSchema: z.object({
|
|
61
|
+
path: z.string(),
|
|
62
|
+
verbose: z.boolean().optional(),
|
|
63
|
+
}),
|
|
64
|
+
execute: async (args) => {
|
|
65
|
+
// args is fully typed: { path: string; verbose?: boolean }
|
|
66
|
+
return {
|
|
67
|
+
content: [{ type: "text", text: "result" }],
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
})
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
The `execute` function receives args typed from the Zod schema. Return value must have `content` array with `{ type: "text", text: string }` items.
|
|
74
|
+
|
|
75
|
+
## Hooks
|
|
76
|
+
|
|
77
|
+
### `onToolCall`
|
|
78
|
+
|
|
79
|
+
Runs before a tool executes. Return `false` to block it.
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
onToolCall: async ({ toolName, input }) => {
|
|
83
|
+
if (toolName === "Bash" && input.command?.includes("rm -rf")) {
|
|
84
|
+
return false // blocked
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### `onToolResult`
|
|
90
|
+
|
|
91
|
+
Runs after a tool executes with the result.
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
onToolResult: async ({ toolName, input, output }) => {
|
|
95
|
+
console.log(`Tool ${toolName} returned:`, output)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### `onFinish`
|
|
100
|
+
|
|
101
|
+
Runs when the agent completes successfully.
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
onFinish: async ({ result }) => {
|
|
105
|
+
await fetch("https://my-api.com/webhook", {
|
|
106
|
+
method: "POST",
|
|
107
|
+
body: JSON.stringify({ done: true }),
|
|
108
|
+
})
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### `onError`
|
|
113
|
+
|
|
114
|
+
Runs when the agent encounters an error.
|
|
115
|
+
|
|
116
|
+
```ts
|
|
117
|
+
onError: async ({ error }) => {
|
|
118
|
+
console.error("Agent failed:", error)
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Permission Modes
|
|
123
|
+
|
|
124
|
+
| Mode | Behavior |
|
|
125
|
+
|------|----------|
|
|
126
|
+
| `"default"` | Agent asks for confirmation on risky operations |
|
|
127
|
+
| `"acceptEdits"` | Auto-approve file edits, still confirm other actions |
|
|
128
|
+
| `"bypassPermissions"` | Auto-approve everything (use with caution) |
|
|
129
|
+
|
|
130
|
+
## Type Reference
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
// Agent config (all fields required — defaults filled by agent())
|
|
134
|
+
interface AgentConfig {
|
|
135
|
+
model: string
|
|
136
|
+
systemPrompt: string
|
|
137
|
+
tools: ToolSet
|
|
138
|
+
runtime: "claude-code" | "codex"
|
|
139
|
+
permissionMode: "default" | "acceptEdits" | "bypassPermissions"
|
|
140
|
+
maxTurns: number
|
|
141
|
+
maxBudgetUsd?: number
|
|
142
|
+
onStart?: () => Promise<void>
|
|
143
|
+
onToolCall?: (payload: { toolName: string; input: any }) => Promise<boolean | void>
|
|
144
|
+
onToolResult?: (payload: { toolName: string; input: any; output: any }) => Promise<void>
|
|
145
|
+
onStepFinish?: (payload: { step: any }) => Promise<void>
|
|
146
|
+
onFinish?: (payload: { result: any }) => Promise<void>
|
|
147
|
+
onError?: (payload: { error: Error }) => Promise<void>
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Tool definition — generic over Zod schema
|
|
151
|
+
interface ToolDefinition<TInput> {
|
|
152
|
+
description: string
|
|
153
|
+
inputSchema: ZodType<TInput>
|
|
154
|
+
execute: (args: TInput) => Promise<{ content: { type: string; text: string }[] }>
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
// Tool set
|
|
158
|
+
type ToolSet = Record<string, ToolDefinition<any>>
|
|
159
|
+
```
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
# React UI
|
|
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`.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @an-sdk/react ai @ai-sdk/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Basic Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
"use client"
|
|
15
|
+
|
|
16
|
+
import { useChat } from "@ai-sdk/react"
|
|
17
|
+
import { AnAgentChat, createAnChat } from "@an-sdk/react"
|
|
18
|
+
import "@an-sdk/react/styles.css"
|
|
19
|
+
import { useMemo } from "react"
|
|
20
|
+
|
|
21
|
+
export default function Chat() {
|
|
22
|
+
const chat = useMemo(
|
|
23
|
+
() => createAnChat({
|
|
24
|
+
agent: "your-agent-slug",
|
|
25
|
+
getToken: async () => "your_an_sk_token",
|
|
26
|
+
}),
|
|
27
|
+
[],
|
|
28
|
+
)
|
|
29
|
+
|
|
30
|
+
const { messages, sendMessage, status, stop, error } = useChat({ chat })
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<AnAgentChat
|
|
34
|
+
messages={messages}
|
|
35
|
+
onSend={(msg) =>
|
|
36
|
+
sendMessage({ parts: [{ type: "text", text: msg.content }] })
|
|
37
|
+
}
|
|
38
|
+
status={status}
|
|
39
|
+
onStop={stop}
|
|
40
|
+
error={error}
|
|
41
|
+
/>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## `createAnChat(options)`
|
|
47
|
+
|
|
48
|
+
Creates an AI SDK `Chat` instance pointed at the AN Relay.
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
createAnChat({
|
|
52
|
+
agent: string // Agent slug from dashboard
|
|
53
|
+
getToken: () => Promise<string> // Returns an_sk_ key or JWT
|
|
54
|
+
apiUrl?: string // Default: "https://relay.an.dev"
|
|
55
|
+
projectId?: string // Session persistence key
|
|
56
|
+
onFinish?: () => void
|
|
57
|
+
onError?: (error: Error) => void
|
|
58
|
+
})
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
For Next.js apps, use `tokenUrl` instead of `getToken` — see [Next.js Integration](./05-nextjs.md).
|
|
62
|
+
|
|
63
|
+
## `<AnAgentChat />` Props
|
|
64
|
+
|
|
65
|
+
| Prop | Type | Description |
|
|
66
|
+
|------|------|-------------|
|
|
67
|
+
| `messages` | `UIMessage[]` | From `useChat()` |
|
|
68
|
+
| `onSend` | `(msg) => void` | Send handler |
|
|
69
|
+
| `status` | `ChatStatus` | `"ready" \| "submitted" \| "streaming" \| "error"` |
|
|
70
|
+
| `onStop` | `() => void` | Stop generation |
|
|
71
|
+
| `error` | `Error` | Error to display |
|
|
72
|
+
| `theme` | `AnTheme` | Theme from playground |
|
|
73
|
+
| `colorMode` | `"light" \| "dark" \| "auto"` | Color mode |
|
|
74
|
+
| `classNames` | `Partial<AnClassNames>` | Per-element CSS overrides |
|
|
75
|
+
| `slots` | `Partial<AnSlots>` | Component swapping |
|
|
76
|
+
| `className` | `string` | Root element class |
|
|
77
|
+
| `style` | `CSSProperties` | Root element style |
|
|
78
|
+
|
|
79
|
+
## Customization
|
|
80
|
+
|
|
81
|
+
Four levels, from simple to full control:
|
|
82
|
+
|
|
83
|
+
### 1. Theme tokens
|
|
84
|
+
|
|
85
|
+
Apply a theme JSON from the [AN Playground](https://an.dev/an/playground):
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<AnAgentChat theme={playgroundTheme} colorMode="dark" />
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### 2. Class overrides
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
<AnAgentChat
|
|
95
|
+
classNames={{
|
|
96
|
+
root: "rounded-2xl border",
|
|
97
|
+
messageList: "px-8",
|
|
98
|
+
inputBar: "bg-gray-50",
|
|
99
|
+
userMessage: "bg-blue-100",
|
|
100
|
+
}}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 3. Slot components
|
|
105
|
+
|
|
106
|
+
Swap sub-components:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<AnAgentChat
|
|
110
|
+
slots={{
|
|
111
|
+
InputBar: MyCustomInput,
|
|
112
|
+
UserMessage: MyUserBubble,
|
|
113
|
+
ToolRenderer: MyToolRenderer,
|
|
114
|
+
}}
|
|
115
|
+
/>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### 4. Individual component imports
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
import { MessageList, InputBar, ToolRenderer } from "@an-sdk/react"
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## CSS
|
|
125
|
+
|
|
126
|
+
Import once in your app:
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
import "@an-sdk/react/styles.css"
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
No Tailwind peer dependency — CSS is pre-compiled. All elements have stable `an-*` class names:
|
|
133
|
+
|
|
134
|
+
```css
|
|
135
|
+
.an-root { }
|
|
136
|
+
.an-message-list { }
|
|
137
|
+
.an-user-message { }
|
|
138
|
+
.an-assistant-message { }
|
|
139
|
+
.an-input-bar { }
|
|
140
|
+
.an-send-button { }
|
|
141
|
+
.an-tool-bash { }
|
|
142
|
+
.an-tool-edit { }
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Theme Type
|
|
146
|
+
|
|
147
|
+
```ts
|
|
148
|
+
interface AnTheme {
|
|
149
|
+
theme: Record<string, string> // Shared: font, spacing, accent
|
|
150
|
+
light: Record<string, string> // Light mode CSS vars
|
|
151
|
+
dark: Record<string, string> // Dark mode CSS vars
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## `applyTheme(element, theme, colorMode?)`
|
|
156
|
+
|
|
157
|
+
Manually inject CSS variables from a theme JSON onto a DOM element.
|
|
158
|
+
|
|
159
|
+
## Components
|
|
160
|
+
|
|
161
|
+
| Component | Description |
|
|
162
|
+
|-----------|-------------|
|
|
163
|
+
| `MessageList` | Auto-scrolling message container with grouping |
|
|
164
|
+
| `UserMessage` | User message bubble |
|
|
165
|
+
| `AssistantMessage` | Assistant response with parts routing |
|
|
166
|
+
| `StreamingMarkdown` | Markdown renderer with syntax highlighting |
|
|
167
|
+
| `InputBar` | Text input with send/stop buttons |
|
|
168
|
+
| `MessageActions` | Copy button |
|
|
169
|
+
| `ToolRenderer` | Routes tool parts to the correct component |
|
|
170
|
+
|
|
171
|
+
## Built-in Tool Renderers
|
|
172
|
+
|
|
173
|
+
| Component | Renders |
|
|
174
|
+
|-----------|---------|
|
|
175
|
+
| `BashTool` | Terminal commands with output |
|
|
176
|
+
| `EditTool` | File edits with diff display |
|
|
177
|
+
| `WriteTool` | File creation |
|
|
178
|
+
| `SearchTool` | Web search results |
|
|
179
|
+
| `TodoTool` | Task checklists |
|
|
180
|
+
| `PlanTool` | Step-by-step plans |
|
|
181
|
+
| `TaskTool` | Sub-agent tasks |
|
|
182
|
+
| `McpTool` | MCP protocol calls |
|
|
183
|
+
| `ThinkingTool` | Reasoning/thinking indicator |
|
|
184
|
+
| `GenericTool` | Fallback for unknown tools |
|
|
185
|
+
|
|
186
|
+
See [Custom Tools](./08-custom-tools.md) for building your own tool renderers.
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Next.js Integration
|
|
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.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @an-sdk/nextjs @an-sdk/react ai @ai-sdk/react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
### 1. Set your API key
|
|
14
|
+
|
|
15
|
+
```env
|
|
16
|
+
# .env.local
|
|
17
|
+
AN_API_KEY=an_sk_your_key_here
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Get your API key from [an.dev/agents/dashboard/api](https://an.dev/agents/dashboard/api).
|
|
21
|
+
|
|
22
|
+
### 2. Create the token route
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
// app/api/an/token/route.ts
|
|
26
|
+
import { createAnTokenHandler } from "@an-sdk/nextjs/server"
|
|
27
|
+
|
|
28
|
+
export const POST = createAnTokenHandler({
|
|
29
|
+
apiKey: process.env.AN_API_KEY!,
|
|
30
|
+
})
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### 3. Use in your page
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// app/page.tsx
|
|
37
|
+
"use client"
|
|
38
|
+
|
|
39
|
+
import { useChat } from "@ai-sdk/react"
|
|
40
|
+
import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
|
|
41
|
+
import "@an-sdk/react/styles.css"
|
|
42
|
+
import { useMemo } from "react"
|
|
43
|
+
|
|
44
|
+
export default function Chat() {
|
|
45
|
+
const chat = useMemo(
|
|
46
|
+
() => createAnChat({
|
|
47
|
+
agent: "your-agent-slug",
|
|
48
|
+
tokenUrl: "/api/an/token",
|
|
49
|
+
}),
|
|
50
|
+
[],
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
const { messages, sendMessage, status, stop, error } = useChat({ chat })
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<AnAgentChat
|
|
57
|
+
messages={messages}
|
|
58
|
+
onSend={(msg) =>
|
|
59
|
+
sendMessage({ parts: [{ type: "text", text: msg.content }] })
|
|
60
|
+
}
|
|
61
|
+
status={status}
|
|
62
|
+
onStop={stop}
|
|
63
|
+
error={error}
|
|
64
|
+
/>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## How It Works
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
Browser Your Next.js Server AN Relay
|
|
73
|
+
| | |
|
|
74
|
+
|-- POST /api/an/token --------->| |
|
|
75
|
+
| |-- POST /v1/tokens -------->|
|
|
76
|
+
| | (with an_sk_ key) |
|
|
77
|
+
| |<-- { token, expiresAt } ---|
|
|
78
|
+
|<-- { token, expiresAt } ------| |
|
|
79
|
+
| |
|
|
80
|
+
|-- POST /v1/chat/:agent ------(with short-lived JWT)------->|
|
|
81
|
+
|<-- streaming response -----(SSE)---------------------------|
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
The client only receives short-lived JWTs. Your API key stays on the server.
|
|
85
|
+
|
|
86
|
+
## API
|
|
87
|
+
|
|
88
|
+
### `createAnTokenHandler(options)`
|
|
89
|
+
|
|
90
|
+
Returns a Next.js `POST` route handler.
|
|
91
|
+
|
|
92
|
+
```ts
|
|
93
|
+
createAnTokenHandler({
|
|
94
|
+
apiKey: string // Your an_sk_ API key
|
|
95
|
+
relayUrl?: string // Default: "https://relay.an.dev"
|
|
96
|
+
expiresIn?: string // Default: "1h"
|
|
97
|
+
})
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### `exchangeToken(options)`
|
|
101
|
+
|
|
102
|
+
Lower-level function for custom token exchange logic.
|
|
103
|
+
|
|
104
|
+
```ts
|
|
105
|
+
import { exchangeToken } from "@an-sdk/nextjs/server"
|
|
106
|
+
|
|
107
|
+
const { token, expiresAt } = await exchangeToken({
|
|
108
|
+
apiKey: process.env.AN_API_KEY!,
|
|
109
|
+
relayUrl: "https://relay.an.dev",
|
|
110
|
+
expiresIn: "1h",
|
|
111
|
+
})
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Entry Points
|
|
115
|
+
|
|
116
|
+
- `@an-sdk/nextjs` — Re-exports everything from `@an-sdk/react` (components, types, `createAnChat`)
|
|
117
|
+
- `@an-sdk/nextjs/server` — Server-only: `createAnTokenHandler`, `exchangeToken`
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
# Node SDK
|
|
2
|
+
|
|
3
|
+
`@an-sdk/node` is a server-side client for the AN API. Use it to manage sandboxes, threads, and tokens programmatically.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @an-sdk/node
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { AnClient } from "@an-sdk/node"
|
|
15
|
+
|
|
16
|
+
const an = new AnClient({
|
|
17
|
+
apiKey: process.env.AN_API_KEY!, // an_sk_...
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
// Create a sandbox for your agent
|
|
21
|
+
const sandbox = await an.sandboxes.create({ agent: "my-agent" })
|
|
22
|
+
|
|
23
|
+
// Create a thread
|
|
24
|
+
const thread = await an.threads.create({
|
|
25
|
+
sandboxId: sandbox.sandboxId,
|
|
26
|
+
name: "Review PR #42",
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
// Generate a short-lived token for browser clients
|
|
30
|
+
const { token, expiresAt } = await an.tokens.create({
|
|
31
|
+
agent: "my-agent",
|
|
32
|
+
expiresIn: "1h",
|
|
33
|
+
})
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## `AnClient`
|
|
37
|
+
|
|
38
|
+
```ts
|
|
39
|
+
new AnClient({
|
|
40
|
+
apiKey: string // Your an_sk_ API key
|
|
41
|
+
baseUrl?: string // Default: "https://relay.an.dev"
|
|
42
|
+
})
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Resources
|
|
46
|
+
|
|
47
|
+
### `client.sandboxes`
|
|
48
|
+
|
|
49
|
+
| Method | Description |
|
|
50
|
+
|--------|-------------|
|
|
51
|
+
| `create({ agent })` | Create a new sandbox for an agent |
|
|
52
|
+
| `get(sandboxId)` | Get sandbox details (status, threads, agent info) |
|
|
53
|
+
| `delete(sandboxId)` | Delete a sandbox |
|
|
54
|
+
|
|
55
|
+
### `client.threads`
|
|
56
|
+
|
|
57
|
+
| Method | Description |
|
|
58
|
+
|--------|-------------|
|
|
59
|
+
| `list({ sandboxId })` | List all threads in a sandbox |
|
|
60
|
+
| `create({ sandboxId, name? })` | Create a new thread |
|
|
61
|
+
| `get({ sandboxId, threadId })` | Get thread with messages |
|
|
62
|
+
| `delete({ sandboxId, threadId })` | Delete a thread |
|
|
63
|
+
|
|
64
|
+
### `client.tokens`
|
|
65
|
+
|
|
66
|
+
| Method | Description |
|
|
67
|
+
|--------|-------------|
|
|
68
|
+
| `create({ agent?, userId?, expiresIn? })` | Create a short-lived JWT |
|
|
69
|
+
|
|
70
|
+
Default `expiresIn` is `"1h"`.
|
|
71
|
+
|
|
72
|
+
## Types
|
|
73
|
+
|
|
74
|
+
```ts
|
|
75
|
+
interface Sandbox {
|
|
76
|
+
id: string
|
|
77
|
+
sandboxId: string
|
|
78
|
+
status: string
|
|
79
|
+
createdAt: string
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
interface SandboxDetail {
|
|
83
|
+
id: string
|
|
84
|
+
sandboxId: string
|
|
85
|
+
status: string
|
|
86
|
+
error?: string | null
|
|
87
|
+
agent: { slug: string; name: string }
|
|
88
|
+
threads: ThreadSummary[]
|
|
89
|
+
createdAt: string
|
|
90
|
+
updatedAt: string
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
interface ThreadSummary {
|
|
94
|
+
id: string
|
|
95
|
+
name?: string | null
|
|
96
|
+
status: string
|
|
97
|
+
createdAt: string
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
interface Thread {
|
|
101
|
+
id: string
|
|
102
|
+
name?: string | null
|
|
103
|
+
status: string
|
|
104
|
+
messages?: unknown
|
|
105
|
+
createdAt: string
|
|
106
|
+
updatedAt: string
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
interface Token {
|
|
110
|
+
token: string
|
|
111
|
+
expiresAt: string
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Error Handling
|
|
116
|
+
|
|
117
|
+
All methods throw on non-2xx responses. The error message comes from the API response body when available.
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
try {
|
|
121
|
+
const sandbox = await an.sandboxes.get("nonexistent")
|
|
122
|
+
} catch (err) {
|
|
123
|
+
console.error(err.message) // "Sandbox not found" or similar
|
|
124
|
+
}
|
|
125
|
+
```
|