{"id":50564478,"url":"https://github.com/browser-use/chat-ui-example","last_synced_at":"2026-06-04T13:30:33.200Z","repository":{"id":347934959,"uuid":"1173174996","full_name":"browser-use/chat-ui-example","owner":"browser-use","description":"AI chat app using Browser Use v3 SDK","archived":false,"fork":false,"pushed_at":"2026-03-30T04:36:54.000Z","size":818,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T06:52:55.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/browser-use.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-05T04:43:44.000Z","updated_at":"2026-03-30T04:36:58.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/browser-use/chat-ui-example","commit_stats":null,"previous_names":["browser-use/chat-ui-example"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/browser-use/chat-ui-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fchat-ui-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fchat-ui-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fchat-ui-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fchat-ui-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/browser-use","download_url":"https://codeload.github.com/browser-use/chat-ui-example/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fchat-ui-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33907693,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-04T02:00:06.755Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-04T13:30:32.734Z","updated_at":"2026-06-04T13:30:33.191Z","avatar_url":"https://github.com/browser-use.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser Use Chat UI Example\n\nA chat interface for [Browser Use](https://browser-use.com) that lets you give tasks to an AI agent that can browse the web in real time. Built with Next.js 15, React 19, and the Browser Use SDK.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbrowser-use%2Fchat-ui-example\u0026env=BROWSER_USE_API_KEY\u0026envDescription=Your%20Browser%20Use%20API%20key%20(server-only)\u0026envLink=https%3A%2F%2Fcloud.browser-use.com\u0026project-name=browser-use-chat-ui\u0026repository-name=browser-use-chat-ui)\n\n![Chat UI](public/chat-ui-preview.png)\n\n![Session View](public/chat-ui-session.png)\n\n## Quick Start\n\n### 1. Get a Browser Use API Key\n\nSign up at [browser-use.com](https://browser-use.com) and grab your API key from the dashboard.\n\n### 2. Clone \u0026 Install\n\n```bash\ngit clone https://github.com/browser-use/chat-ui-example.git\ncd chat-ui-example\nnpm install\n```\n\n### 3. Configure Environment\n\n```bash\ncp .env.example .env.local\n```\n\nEdit `.env.local` and add your API key:\n\n```\nBROWSER_USE_API_KEY=your-api-key-here\n```\n\n### 4. Run\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n## Usage\n\n1. Type a task like \"Find the top 3 articles on Hacker News\"\n2. The agent browses the web and reports back in real time\n3. Watch the agent work in the live browser panel (desktop only)\n4. Send follow-up messages to refine or continue the task\n5. When the session ends, download an MP4 recording of the browser session\n\n### Settings\n\nUse the icon buttons below the chat input to configure:\n\n| Icon | Setting | Options |\n|------|---------|---------|\n| CPU | Model | BU Mini (fast) / BU Max (powerful) |\n| User | Profile | Browser profiles with saved cookies/sessions |\n| HardDrive | Workspace | Workspace context for file operations |\n| Globe | Proxy | Route traffic through 190+ country proxies |\n\nSettings are persisted in localStorage across sessions.\n\n## How It Works — Browser Use SDK\n\nThis app is built on the [Browser Use Cloud SDK](https://docs.browser-use.com/cloud/introduction) (`browser-use-sdk`). Here's how the key pieces are wired up.\n\n### 1. Install the SDK\n\n```bash\nnpm install browser-use-sdk\n```\n\n### 2. Initialize the client\n\n```typescript\n// src/lib/api.ts — server-only, never imported in client components\nimport { BrowserUse } from \"browser-use-sdk/v3\";\n\nconst client = new BrowserUse({\n  apiKey: process.env.BROWSER_USE_API_KEY,\n});\n```\n\n### 3. Create a session\n\nA session gives you a persistent browser that the agent controls. You pick the model and optionally attach a profile, workspace, or proxy.\n\n```typescript\nconst session = await client.sessions.create({\n  model: \"bu-mini\",       // or \"bu-max\" for complex tasks\n  keepAlive: true,        // keep browser open between tasks\n  enableRecording: true,  // get MP4 recording after completion\n});\n// session.id         → use to send follow-up tasks\n// session.liveUrl    → embed in an iframe (available immediately)\n```\n\n### 4. Stream messages with `for await`\n\nSend a task and stream messages as the agent works — no manual polling needed:\n\n```typescript\nconst run = client.run(\"Find the top 3 articles on Hacker News\", {\n  sessionId: session.id,\n});\n\nfor await (const msg of run) {\n  console.log(`[${msg.role}] ${msg.summary}`);\n}\n\n// Iterator done — task completed\nconsole.log(run.result.output);\nconsole.log(run.result.status); // \"idle\" | \"stopped\" | \"error\" | \"timed_out\"\n```\n\n### 5. Stop a task\n\n```typescript\nawait client.sessions.stop(session.id, { strategy: \"task\" });\n```\n\n### 6. Get recording\n\nAfter a session completes, retrieve the MP4 recording:\n\n```typescript\nconst urls = await client.sessions.waitForRecording(session.id);\n// urls → string[] of presigned MP4 download URLs\n```\n\nIn this app, SDK calls live in [`src/lib/api.ts`](src/lib/api.ts), and message streaming is handled with `for await` on `client.run()` in [`src/context/session-context.tsx`](src/context/session-context.tsx).\n\nFor full SDK documentation, see [docs.browser-use.com/cloud/introduction](https://docs.browser-use.com/cloud/introduction).\n\n## Related Example\n\nNeed an always-on Browser Use Cloud agent outside a web app? [Browser Use Box](https://github.com/browser-use/bux) runs on your own Linux box, keeps a Browser Use profile online, and lets you control the agent from Telegram. [Watch the demo](https://www.tiktok.com/@browser_use/video/7639824093721758989).\n\n## Architecture\n\n```\nsrc/\n├── app/\n│   ├── layout.tsx              # Root layout with providers\n│   ├── page.tsx                # Home — create new session\n│   └── session/[id]/page.tsx   # Session — chat + browser view\n├── components/\n│   ├── browser-panel.tsx       # Live browser iframe\n│   ├── chat-input.tsx          # Auto-expanding textarea + send\n│   ├── chat-messages.tsx       # Conversation turn rendering\n│   ├── markdown.tsx            # GFM markdown renderer\n│   ├── model-selector.tsx      # Settings icon dropdowns\n│   ├── step-section.tsx        # Collapsible task steps\n│   ├── thinking-indicator.tsx  # Animated thinking dots\n│   └── tool-call-pill.tsx      # Tool call display pills\n├── context/\n│   ├── session-context.tsx     # Session polling \u0026 message state\n│   └── settings-context.tsx    # User preferences (localStorage)\n└── lib/\n    ├── api.ts                  # Browser Use SDK wrapper\n    ├── countries.ts            # Country codes for proxy selector\n    ├── message-converter.ts    # API → UI message transformation\n    ├── tool-labels.ts          # Tool name/icon mapping\n    └── types.ts                # TypeScript type definitions\n```\n\n### Data Flow\n\n1. User sends a task from the home page\n2. App creates a session (gets `liveUrl` immediately) and redirects to `/session/[id]`\n3. Session context streams messages via `for await` on `client.run()`\n4. Messages are converted into conversation turns (user message + agent steps + final answer)\n5. The browser panel displays a live iframe of the agent's browser\n6. When the task completes, the user can send follow-ups or download the recording\n\n## Scripts\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | Start dev server with Turbopack |\n| `npm run build` | Production build |\n| `npm start` | Start production server |\n| `npm run lint` | Run ESLint |\n\n## Tech Stack\n\n- **[Next.js 15](https://nextjs.org/)** with Turbopack\n- **[React 19](https://react.dev/)**\n- **[Tailwind CSS](https://tailwindcss.com/)** for styling\n- **[TanStack Query](https://tanstack.com/query)** for data fetching \u0026 polling\n- **[Browser Use SDK](https://docs.browser-use.com/)** for agent API\n- **[react-markdown](https://github.com/remarkjs/react-markdown)** with GFM for message rendering\n- **[lucide-react](https://lucide.dev/)** for icons\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowser-use%2Fchat-ui-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrowser-use%2Fchat-ui-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowser-use%2Fchat-ui-example/lists"}