Getting started with AG2B
AG2B (Agent to Browser) is a client-side agentic runtime. The agent runs where your app does — in the browser. The server's role can range from a thin LLM proxy to a layer that extends the client runtime.
AG2B has framework-specific libraries that ship as separate packages:
And plugins work with any framework:
Requirements
- An LLM provider — OpenAI, Anthropic, or your own proxy
zod^3.25.0 || ^4.0.0
Always import from zod/v4
The zod/v4 works on both zod@^3.25.0 (where v4 ships as a subpath) and zod@^4.0.0 (where it's equivalent to zod).
Mirror this in your code so it stays portable across the range.
Installation
Writing your first agent
import { Agent, OpenAiProvider, Scope, Tool } from '@ag2b/core';
import z from 'zod/v4';
// Create an Agent
const agent = new Agent({ provider: new OpenAiProvider({ baseURL: '/api/llm' }) });
// Create a Tool — runs in the browser
const setBackground = new Tool({
name: 'setBackground',
description: 'Change the page background color.',
parameters: z.object({
color: z.string().describe('Any valid CSS color (name, hex, rgb, etc.)'),
}),
handler: ({ color }) => {
document.body.style.backgroundColor = color;
},
});
// Create a Scope where the tool lives
const appearance = new Scope({
name: 'appearance',
tools: [setBackground],
});
// Register scope on agent
agent.scopes.register(appearance);
// Chat!
await agent.chat('Make the page feel like a sunset, use oklch.');The LLM interprets the prompt, picks a color, calls setBackground — the handler runs in your browser and the page changes. The result feeds back into the loop and the model replies in plain text describing what it did.
See this in a real app
Play with the live demo — a Kanban board the agent drives end to end.