Get Started

Create an agent, deploy it, and add it to your Next.js app.

1.Create your agent

npm init -y
npm install @an-sdk/agent zod

Create src/agent.ts:

src/agent.ts

import { agent, tool } from "@an-sdk/agent"
import { z } from "zod"

export default agent({
  model: "claude-sonnet-4-6",
  systemPrompt: "You are a helpful coding assistant.",
  tools: {
    add: tool({
      description: "Add two numbers",
      inputSchema: z.object({ a: z.number(), b: z.number() }),
      execute: async ({ a, b }) => ({
        content: [{ type: "text", text: `${a + b}` }],
      }),
    }),
  },
})

See Build & Deploy for all configuration options, entry points, and project structure.

2.Deploy

npx @an-sdk/cli login
npx @an-sdk/cli deploy

Your agent is now live. Next, integrate it into your app.

3.Install the SDK

$pnpm add @an-sdk/nextjs

This also installs @an-sdk/react with all UI components. Peer dependencies: ai, @ai-sdk/react.

4.Create a token route

The SDK exchanges your secret API key for short-lived tokens server-side, so credentials are never exposed to the browser. Get your API key from the dashboard.

app/api/an-token/route.ts

import { createAnTokenHandler } from "@an-sdk/nextjs/server"

export const POST = createAnTokenHandler({
  apiKey: process.env.AN_API_KEY!,
})

5.Add the chat component

Use createAnChat to connect to your agent and <AnAgentChat> to render the UI. It handles streaming, tools, and theming automatically.

app/page.tsx

"use client"

import { AnAgentChat, createAnChat } from "@an-sdk/nextjs"
import { useChat } from "@ai-sdk/react"

const chat = createAnChat({
  agent: "my-agent",
  tokenUrl: "/api/an-token",
  // Optional: continue in an existing sandbox/thread
  // sandboxId: "uuid-of-existing-sandbox",
  // threadId: "uuid-of-existing-thread",
})

export default function Page() {
  const { messages, input, handleInputChange, handleSubmit, status, stop, error } =
    useChat({ chat })

  return (
    <AnAgentChat
      messages={messages}
      onSend={() => handleSubmit()}
      status={status}
      onStop={stop}
      error={error ?? undefined}
    />
  )
}

Server-side SDK

Use @an-sdk/node for server-side sandbox and thread management — creating sandboxes, listing threads, and generating tokens.

pnpm add @an-sdk/node

server.ts

import { AnClient } from "@an-sdk/node"

const an = new AnClient({ apiKey: process.env.AN_API_KEY! })

// Create a sandbox for an agent
const sandbox = await an.sandboxes.create({ agent: "my-agent" })

// Create a thread in the sandbox
const thread = await an.threads.create({
  sandboxId: sandbox.id,
  name: "Chat 1",
})

// Create a short-lived token for client-side use
const token = await an.tokens.create({ agent: "my-agent" })

Components

Component	Description
`<AnAgentChat />`	Full chat interface with messages, input, and tool rendering.
`<MessageList />`	Standalone message list for custom layouts.
`<InputBar />`	Chat input with submit handling.
`<ToolRenderer />`	Individual tool call renderer with expand/collapse.