Agent In A Browser
Agent that uses code execution via a wasm mcp server in rust that allows dynamic TypeScript execution
Ask AI about Agent In A Browser
Powered by Claude · Grounded in docs
I know everything about Agent In A Browser. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
Edge Agent
✨ Vibed with Antigravity & Claude Code ✨
The Story
I was nerd-sniped into: Why can't an agent in the browser just write dynamic code and execute it?
Everything else is either:
- Fully in the Cloud: A web UI calling a VM. High latency, privacy concerns, and it's not really yours.
- Locally Installed: Tedious setup, complex dependencies, and risk to your local machine.
Edge Agent is different. It's primed out of the box. If you can visit the page, you can get the value. It runs a full WASM-based runtime that compiles and executes TypeScript natively in your browser tab. Safe, private, and instant. No server round-trips. No external sandbox.
FAQ
What actually is this?
It's a full-stack agent environment running in WebAssembly, consisting of three parts:
- Ratatui TUI: A terminal interface written in Rust, compiled to WASM. It supports full keyboard navigation, mouse events, and resizing.
- Agent Layer: A multi-turn agent driven by Rig, supporting Anthropic, OpenAI, and Gemini.
- Browser Sandbox: A WASI Preview 2 runtime that provides a virtual file system (OPFS), shell ecosystem, and code execution.
graph TD
subgraph Browser
TUI[Ratatui TUI]
Agent[Agent Layer]
Sandbox[WASI Sandbox]
TUI -->|User Input| Agent
Agent -->|Tools| Sandbox
Sandbox -->|Result| Agent
Agent -->|Response| TUI
end
How does it run code?
That's the "nerd-sniped" part. We built a pipeline entirely in WASM:
graph LR
TS[weather.ts] -->|SWC| JS[JavaScript]
JS -->|QuickJS| Out[stdout]
When the agent (or you) runs tsx script.ts, the runtime transpiles it on the fly using SWC and executes it in an embedded QuickJS engine.
What can the shell do?
It's not a toy shell. It supports:
- Core utils:
ls,cd,cat,grep,cp,mv,rm - Development:
tsx(TypeScript),git(go-git compiled to WASM),sqlite3 - Interactive features: Tab completion, history (persisted to OPFS), reverse search (
Ctrl+R)
Can I connect to external tools?
Yes. While the agent runs in the browser, it can connect to local or remote MCP (Model Context Protocol) servers.
We also provide an MCP Bridge that lets external agents (like Claude Code) use the browser sandbox as their backend:
cd tools/mcp-bridge && npm start
# Then run Claude Code:
claude --tools "" --mcp-config '{"mcpServers": {"browser-sandbox": {"type": "http", "url": "http://localhost:3050/mcp"}}}'
This effectively turns your browser tab into a secure, local sandbox for any AI agent.
Can I embed this in my app?
Yes. The core logic is structured as a package, @tjfontaine/web-agent-core, though currently you must build from source.
import { WebAgent } from '@tjfontaine/web-agent-core';
// 1. Initialize
const agent = new WebAgent({
provider: 'anthropic',
model: 'claude-3-5-sonnet-20241022',
apiKey: 'sk-...'
});
await agent.initialize();
// 2. Chat with tools
for await (const event of agent.send('Write a script to fetch weather')) {
if (event.type === 'chunk') console.log(event.text);
if (event.type === 'tool-call') console.log('Executing:', event.toolName);
}
How does it handle async operations in WASM?
We support two modes depending on browser capabilities:
- JSPI (JavaScript Promise Integration): Used in Chrome/Edge. Allows WASM to suspend execution while waiting for async browser APIs (like
fetchorOPFS). - Asyncify / Sync Shim: Used in Safari/Firefox. Uses a synchronous worker bridge to handle I/O without native stack switching.
Development
# Install dependencies
pnpm install
# Build WASM and packages
pnpm build
# Start dev server
pnpm dev
License
MIT
