A Web Chat Interface for Your Agent
Put your agent in the browser: a small web app with streaming responses, visible tool activity, and approvals for risky actions.
The terminal is a fine home for an agent you drive yourself. But most people will never open one, and even for you, some things are simply better in a browser: a conversation you can scroll back through, tool activity you can expand, and a clear "Allow" or "Deny" button when the agent wants to do something consequential.
In this lesson you'll build a small web chat for your agent with no frameworks: a Node server and a single HTML page. Replies stream in as they're written, every tool call shows up live with its result, the conversation continues across messages, and the agent pauses to ask before it writes a file. Along the way you'll handle the security details that matter for any local web app that can act on your machine.
What a chat needs that a demo page didn't
In Streaming and a Better User Experience you built src/server.ts, a one-shot page: type a task, watch it stream, done. A chat interface needs four more things:
| Need | Why the demo page can't do it | What you'll build |
|---|---|---|
| Follow-up messages | Each run started from an empty messages array | Conversation history passed into runAgent |
| Sending real data | EventSource only makes GET requests with the task in the URL | A POST request whose response streams events |
| Human approval | The agent ran every tool immediately | A pause before risky tools, answered from the page |
| A stop button | Closing the tab was the only way to cancel | Aborting the request from the page |
The agent already emits everything a UI needs through its onEvent callback: text, tool starts, calls, results, retries, usage, and a final done. Most of this lesson is plumbing those events to a browser and one small question back.