Docs

Browser Adapter

BrowserAgent runs the whole agent client-side: the filesystem, the tools, and the loop all live in the tab. No server, no upload — ideal for BYOK products where a user's API key must never leave their machine.

npm install @nanocodana/browser @ai-sdk/openai ai

app.tsx

import { BrowserAgent } from '@nanocodana/browser'
import { openai } from '@ai-sdk/openai'

const agent = BrowserAgent({
  model: openai('gpt-5.1'),
  // Seed the in-browser filesystem.
  initialFiles: [{ path: 'index.html', content: '<h1>hi</h1>' }],
  persist: true, // IndexedDB (default). false = in-memory only.
})

const result = await agent.stream({
  messages: [{ role: 'user', content: 'Add a dark-mode toggle to index.html.' }],
})

The virtual filesystem#

persist: true (the default) backs the filesystem with IndexedDB, so projects survive reloads.
persist: false keeps everything in memory — perfect for ephemeral playgrounds.
initialFiles seeds the filesystem at construction: an array of { path, content } entries.
onFilesChange fires with every file the agent creates, edits, or deletes — the hook for mirroring the agent's work into your editor, preview, or store in real time.

Skills in the browser#

Skills are discovered from the agent's own filesystem, exactly like Node — seed them via initialFiles at .agents/skills/<name>/SKILL.md and they're picked up automatically. No loader call.

Calling providers from a tab#

The browser talks to the model API directly, so the provider must allow cross-origin requests. Anthropic supports an explicit opt-in header for this; OpenAI-compatible endpoints vary — check CORS before you pick one for a frontend-only product.

For local or fully in-browser models (Ollama, WebLLM, transformers.js) that lack native tool calling, set toolMiddleware: 'hermes' — the agent parses tool calls the model emits as plain text, so even a small local model can drive the file tools.

This adapter is what powers Sharables: React Native apps described in chat, built file-by-file in the tab, previewed live, and shared with a link. Your API key stays in localStorage — there is no server to send it to.