{"id":29960351,"url":"https://github.com/browser-use/agent-studio","last_synced_at":"2025-08-03T22:40:50.630Z","repository":{"id":307561998,"uuid":"1026048966","full_name":"browser-use/agent-studio","owner":"browser-use","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-31T21:01:29.000Z","size":4611,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-31T23:54:57.909Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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}},"created_at":"2025-07-25T08:19:15.000Z","updated_at":"2025-07-31T23:48:42.000Z","dependencies_parsed_at":"2025-07-31T23:54:59.599Z","dependency_job_id":"47a95f08-bf26-45b6-8b46-d870417540a1","html_url":"https://github.com/browser-use/agent-studio","commit_stats":null,"previous_names":["browser-use/agent-studio"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/browser-use/agent-studio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fagent-studio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fagent-studio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fagent-studio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fagent-studio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/browser-use","download_url":"https://codeload.github.com/browser-use/agent-studio/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/browser-use%2Fagent-studio/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268624253,"owners_count":24280155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"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":"2025-08-03T22:40:41.946Z","updated_at":"2025-08-03T22:40:50.591Z","avatar_url":"https://github.com/browser-use.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🤖 Browser Use Agent Studio - Integration Examples \u0026 UI Components\n\nA comprehensive demo repository showcasing how to integrate the [Browser Use Cloud API](https://docs.browser-use.com) into web applications. This project demonstrates real-world implementation patterns, UI components, and integration techniques that developers can reference and customize for their own projects.\n\n![Main Interface](./public/images/main.png)\n\n## 🎯 Purpose \u0026 Overview\n\nThis repository serves as a **reference implementation** for integrating Browser Use Cloud API into modern web applications. It's designed for developers who want to:\n\n- **Learn API Integration**: See real-world examples of Browser Use Cloud API implementation\n- **Reference UI Components**: Copy and adapt professional UI components for automation interfaces\n- **Understand Data Flow**: Learn how to handle real-time automation data, progress tracking, and file management\n- **Customize for Projects**: Use this as a starting point for building custom automation interfaces\n\n## ✨ Demo Features \u0026 Components\n\n### 🖥️ Live Browser View\nReal-time browser automation viewing with embedded iframe display.\n\n![Live Browser View](./public/images/live_url.png)\n\n### 📊 Progress \u0026 Steps Tracking\nStep-by-step execution monitoring with screenshots and timing data.\n\n![Steps Updates](./public/images/steps.png)\n\n### 📁 File Management \u0026 Downloads\nGenerated files display with download capabilities (PDFs, Excel, JSON, ZIP).\n\n![Files Section](./public/images/files.png)\n\n### 🎨 Key UI Components Demonstrated\n\n- **Real-time Progress Indicators** - Live status updates and step completion\n- **Tabbed Interface** - Overview, Live Browser, Steps, Files organization\n- **File Download System** - Handle multiple file types from automation results\n- **Screenshot Gallery** - Display automation screenshots at each step\n- **Responsive Design** - Mobile-friendly layout with professional aesthetics\n- **Error Handling** - Proper error states and user feedback\n- **Loading States** - Smooth loading experiences during automation\n\n## 🚀 Quick Start\n\n### Prerequisites\n- Node.js 18+ and Yarn\n- Browser Use Cloud API key ([Get yours here](https://docs.browser-use.com))\n\n### Setup Instructions\n\n1. **Clone and Install**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd agent-studio\n   yarn install\n   ```\n\n2. **Configure API Key**\n   ```bash\n   cp .env.local.example .env.local\n   # Add your Browser Use API key to .env.local\n   BROWSER_USE_API_KEY=your_api_key_here\n   ```\n\n3. **Run Demo**\n   ```bash\n   yarn dev\n   ```\n\n4. **Open Demo**\n   Navigate to `http://localhost:3000`\n\n## 🔧 API Integration Examples\n\n### Task Creation \u0026 Management\n```typescript\n// Example: Starting an automation task\nconst response = await fetch('/api/task/start', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify({\n    prompt: \"Your automation instructions\",\n    maxSteps: 50\n  })\n});\n```\n\n### Real-time Progress Polling\n```typescript\nexport const YOUR_AUTOMATION: TaskConfig = {\n  id: 'your-automation',\n  name: 'Your Automation Type',\n  description: 'What your automation focuses on',\n  prompt: `Analyze \"{companyName}\" focusing on:\n  1. Your specific research areas\n  2. Data sources you want to use\n  3. Output format requirements`,\n  allowedDomains: [\n    'your-data-source.com',\n    'another-source.com'\n  ],\n  maxSteps: 100,\n  llmModel: 'gpt-4.1'\n}\n```\n\n### File Download Handling\n```typescript\n// Example: Downloading generated files\nconst downloadFile = async (taskId: string, fileName: string) =\u003e {\n  const response = await fetch(`/api/task/files/${taskId}/${fileName}`);\n  const blob = await response.blob();\n  \n  const url = window.URL.createObjectURL(blob);\n  const a = document.createElement('a');\n  a.href = url;\n  a.download = fileName;\n  a.click();\n};\n```\n\n## 🎨 UI Components You Can Reuse\n\n### 1. Progress Section Component\n- Real-time status updates\n- Step-by-step progress tracking\n- Timing information display\n\n### 2. Live Browser Tab Component  \n- Embedded iframe for live viewing\n- Loading states and error handling\n- Responsive iframe sizing\n\n### 3. Steps Tab Component\n- Screenshot gallery with timestamps\n- Step descriptions and status\n- Expandable detail views\n\n### 4. Files Tab Component\n- File type detection and icons\n- Download functionality\n- File size and metadata display\n\n### 5. Sidebar Navigation\n- Task status indicators\n- Clean, professional design\n- Responsive mobile layout\n\n## 🛠️ Customization Guide\n\n### Modify Input Interface\n```typescript\n// src/components/SimpleChatInterface.tsx\n// Customize the input form for your specific use case\nconst handleSubmit = (input: string) =\u003e {\n  // Your custom input processing logic\n  startAutomation(input);\n};\n```\n\n### Customize Output Display\n```typescript\n// src/components/tabs/OverviewTab.tsx\n// Modify how automation results are displayed\nconst renderResults = (data: AutomationResults) =\u003e {\n  // Your custom result visualization\n  return \u003cCustomResultsView data={data} /\u003e;\n};\n```\n\n### Add New File Types\n```typescript\n// src/context/TaskContext.tsx\n// Extend supported file types\ntype FileType = 'pdf' | 'excel' | 'json' | 'zip' | 'csv' | 'your_type';\n```\n\n### Brand Customization\n```typescript\n// src/components/Sidebar.tsx\n// Update branding and titles\n\u003ch1 className=\"text-2xl font-bold\"\u003eYour App Name\u003c/h1\u003e\n\u003ch2 className=\"text-gray-400\"\u003eYour Use Case Description\u003c/h2\u003e\n```\n\n## 📁 Project Structure\n\n```\nsrc/\n├── app/api/task/          # Browser Use API integration endpoints\n│   ├── start/            # Task creation endpoint\n│   ├── status/           # Progress polling endpoint\n│   ├── files/            # File download endpoints\n│   └── screenshots/      # Screenshot retrieval\n├── components/           # Reusable UI components\n│   ├── tabs/            # Tab content components\n│   ├── MainContent.tsx  # Main tabbed interface\n│   ├── ProgressSection.tsx # Real-time progress display\n│   └── SimpleChatInterface.tsx # Input interface\n├── context/             # React context for state management\n│   └── TaskContext.tsx  # Global task state\n├── hooks/               # Custom React hooks\n│   └── useTaskExecution.ts # Task execution logic\n└── lib/                 # Utility libraries\n    └── browserUseApi.ts # API client functions\n```\n\n## 🔗 Browser Use Cloud API Integration\n\n### Implemented Endpoints\n- ✅ **POST** `/api/v1/run-task` - Create automation tasks\n- ✅ **GET** `/api/v1/task/{taskId}` - Monitor task progress  \n- ✅ **GET** `/api/v1/task/{taskId}/output-file/{fileName}` - Download files\n- ✅ **Real-time polling** - Live progress updates\n- ✅ **Screenshot capture** - Step-by-step visual documentation\n\n### Demo Configuration\n```env\n# Required environment variables\nBROWSER_USE_API_KEY=your_api_key_here\nNEXT_PUBLIC_UI_MODE=advanced  # or \"simple\"\n```\n\n## 🎯 Use This Demo For\n\n### Learning API Integration\n- Study the API client implementation in `src/lib/browserUseApi.ts`\n- See error handling patterns in API routes\n- Understand polling and real-time updates\n\n### Building Custom UIs\n- Copy component patterns from `src/components/`\n- Adapt the tabbed interface design\n- Reuse progress tracking components\n\n### Reference Implementation\n- See complete data flow from API to UI\n- Study file handling and download patterns\n- Learn responsive design techniques\n\n## 🚢 Deployment\n\n### Vercel (Recommended)\n```bash\nyarn build\nvercel deploy\n```\n\n### Environment Variables\nSet these in your deployment platform:\n```env\nBROWSER_USE_API_KEY=your_api_key_here\n```\n\n## 🤝 Contributing\n\nThis demo is open for community contributions:\n\n1. **Add UI Components** - New interface patterns\n2. **API Examples** - Additional integration patterns  \n3. **Customization Guides** - Documentation improvements\n4. **Bug Fixes** - Issue resolution\n\n## 📝 License\n\nMIT License - Use this code freely in your projects.\n\n---\n\n**🎨 Built to showcase Browser Use Cloud API integration patterns**\n\nReady to build your own automation interface? Use this demo as your starting point!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowser-use%2Fagent-studio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrowser-use%2Fagent-studio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrowser-use%2Fagent-studio/lists"}