Vibeleaderboard
← Back to Tools
Index / tool

Browser Use Chat UI Example

https://github.com/browser-use/chat-ui-example
Visit github.com
Category
AI Agents
Rank
No. 1593Tools index

Previous survey · No. 1599 ·

Pricing
Open Source
Type
TOOL
Builder
browser-use
GitHub
21 stars
Date

About

Reference chat application demonstrating the Browser Use v3 SDK with a browser-controlling AI agent.

What it does

Users describe a web task, then watch the agent act through an embedded browser while progress messages stream into a chat. Sessions stay open for follow-up requests, can use saved profiles or workspace context, support country proxies, and produce downloadable browser recordings.

Why it's ranked here

This is a focused, inspectable starting point for teams building a hosted browser-agent interface. It covers the full interaction loop, including session creation, streamed progress, stopping work, follow-ups, live viewing, and recordings. Its dependence on Browser Use Cloud makes it less useful as a general browser automation foundation.

What's good

The API key remains server-side. Streaming avoids manual polling during tasks, while the interface turns raw messages and tool results into readable steps. Users can choose models, reuse authenticated profiles, attach workspace context, select proxy countries, stop active work, and continue within persistent sessions.

Tradeoffs

Running it requires a Browser Use API key and the hosted SDK. The live browser panel is desktop-only. Profile listing still uses the older SDK client because that capability is unavailable on the newer client. The supplied project structure shows linting but no test suite or test script.

How to use it well

Use it when prototyping or teaching the interaction model for a browser agent inside a React application. Fork the interface, study the session and streaming flow, then adapt the presentation to your product. Choose something else for self-hosted, always-on operation or automation independent of Browser Use Cloud.

Technical notes+

The private npm application uses Next.js 15, React 19, TypeScript, Tailwind CSS, and browser-use-sdk. src/lib/api.ts creates both v3 and v2 clients from the server-only BROWSER_USE_API_KEY. src/lib/actions.ts creates persistent, recordable sessions through v3 but lists profiles through v2. src/context/session-context.tsx consumes server-sent events from /api/stream/[sessionId], deduplicates messages, tracks task state, and retrieves recordings after terminal states. src/lib/message-converter.ts parses OpenAI-format message data in two passes, associates tool results by call ID, hides internal tools, and groups output into turns and steps. src/components/browser-panel.tsx embeds the session live URL in an iframe.

Observed

License
MIT
Primary language
TypeScript
Packaging
Private npm application installed with npm
Interface
Next.js web chat interface backed by the Browser Use Cloud SDK
Runtime requirement
Requires a server-side Browser Use API key
Deployment surface
Includes local development, production build, production start, and Vercel deployment instructions
Testing structure
No test directory or test script appears in the supplied repository text

Read from README.md, package.json, src/lib/api.ts, src/app/page.tsx, src/lib/types.ts, src/app/layout.tsx, src/lib/actions.ts, src/lib/countries.ts, src/lib/tool-labels.ts, src/components/markdown.tsx, src/lib/message-converter.ts, src/components/chat-input.tsx, src/components/step-section.tsx, src/context/session-context.tsx, src/components/browser-panel.tsx.

What it can do

  • Control web browser through AI agent

    Natural language commands → Automated browser actions

  • Navigate to websites

    Website URLs or descriptions → Loaded web pages

  • Fill out web forms

    Form field requirements and data → Completed web forms

  • Extract data from web pages

    Web page content and extraction criteria → Structured data

  • Click buttons and links

    Element descriptions or selectors → Triggered web page interactions

  • Search for content on web pages

    Search terms and target websites → Located content or search results

Tags

browser-usechatexampleai-agent

Tech Stack

Node.jsNext.jsTailwind CSSTypeScript

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.