A comprehensive demo repository showcasing how to integrate the Browser Use Cloud API 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.
This repository serves as a reference implementation for integrating Browser Use Cloud API into modern web applications. It's designed for developers who want to:
- Learn API Integration: See real-world examples of Browser Use Cloud API implementation
- Reference UI Components: Copy and adapt professional UI components for automation interfaces
- Understand Data Flow: Learn how to handle real-time automation data, progress tracking, and file management
- Customize for Projects: Use this as a starting point for building custom automation interfaces
Real-time browser automation viewing with embedded iframe display.
Step-by-step execution monitoring with screenshots and timing data.
Generated files display with download capabilities (PDFs, Excel, JSON, ZIP).
- Real-time Progress Indicators - Live status updates and step completion
- Tabbed Interface - Overview, Live Browser, Steps, Files organization
- File Download System - Handle multiple file types from automation results
- Screenshot Gallery - Display automation screenshots at each step
- Responsive Design - Mobile-friendly layout with professional aesthetics
- Error Handling - Proper error states and user feedback
- Loading States - Smooth loading experiences during automation
- Node.js 18+ and Yarn
- Browser Use Cloud API key (Get yours here)
-
Clone and Install
git clone <repository-url> cd agent-studio yarn install
-
Configure API Key
cp .env.local.example .env.local # Add your Browser Use API key to .env.local BROWSER_USE_API_KEY=your_api_key_here -
Run Demo
yarn dev
-
Open Demo Navigate to
http://localhost:3000
// Example: Starting an automation task
const response = await fetch('/api/task/start', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt: "Your automation instructions",
maxSteps: 50
})
});export const YOUR_AUTOMATION: TaskConfig = {
id: 'your-automation',
name: 'Your Automation Type',
description: 'What your automation focuses on',
prompt: `Analyze "{companyName}" focusing on:
1. Your specific research areas
2. Data sources you want to use
3. Output format requirements`,
allowedDomains: [
'your-data-source.com',
'another-source.com'
],
maxSteps: 100,
llmModel: 'gpt-4.1'
}// Example: Downloading generated files
const downloadFile = async (taskId: string, fileName: string) => {
const response = await fetch(`/api/task/files/${taskId}/${fileName}`);
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
};- Real-time status updates
- Step-by-step progress tracking
- Timing information display
- Embedded iframe for live viewing
- Loading states and error handling
- Responsive iframe sizing
- Screenshot gallery with timestamps
- Step descriptions and status
- Expandable detail views
- File type detection and icons
- Download functionality
- File size and metadata display
- Task status indicators
- Clean, professional design
- Responsive mobile layout
// src/components/SimpleChatInterface.tsx
// Customize the input form for your specific use case
const handleSubmit = (input: string) => {
// Your custom input processing logic
startAutomation(input);
};// src/components/tabs/OverviewTab.tsx
// Modify how automation results are displayed
const renderResults = (data: AutomationResults) => {
// Your custom result visualization
return <CustomResultsView data={data} />;
};// src/context/TaskContext.tsx
// Extend supported file types
type FileType = 'pdf' | 'excel' | 'json' | 'zip' | 'csv' | 'your_type';// src/components/Sidebar.tsx
// Update branding and titles
<h1 className="text-2xl font-bold">Your App Name</h1>
<h2 className="text-gray-400">Your Use Case Description</h2>src/
├── app/api/task/ # Browser Use API integration endpoints
│ ├── start/ # Task creation endpoint
│ ├── status/ # Progress polling endpoint
│ ├── files/ # File download endpoints
│ └── screenshots/ # Screenshot retrieval
├── components/ # Reusable UI components
│ ├── tabs/ # Tab content components
│ ├── MainContent.tsx # Main tabbed interface
│ ├── ProgressSection.tsx # Real-time progress display
│ └── SimpleChatInterface.tsx # Input interface
├── context/ # React context for state management
│ └── TaskContext.tsx # Global task state
├── hooks/ # Custom React hooks
│ └── useTaskExecution.ts # Task execution logic
└── lib/ # Utility libraries
└── browserUseApi.ts # API client functions
- ✅ POST
/api/v1/run-task- Create automation tasks - ✅ GET
/api/v1/task/{taskId}- Monitor task progress - ✅ GET
/api/v1/task/{taskId}/output-file/{fileName}- Download files - ✅ Real-time polling - Live progress updates
- ✅ Screenshot capture - Step-by-step visual documentation
# Required environment variables
BROWSER_USE_API_KEY=your_api_key_here
NEXT_PUBLIC_UI_MODE=advanced # or "simple"- Study the API client implementation in
src/lib/browserUseApi.ts - See error handling patterns in API routes
- Understand polling and real-time updates
- Copy component patterns from
src/components/ - Adapt the tabbed interface design
- Reuse progress tracking components
- See complete data flow from API to UI
- Study file handling and download patterns
- Learn responsive design techniques
yarn build
vercel deploySet these in your deployment platform:
BROWSER_USE_API_KEY=your_api_key_hereThis demo is open for community contributions:
- Add UI Components - New interface patterns
- API Examples - Additional integration patterns
- Customization Guides - Documentation improvements
- Bug Fixes - Issue resolution
MIT License - Use this code freely in your projects.
🎨 Built to showcase Browser Use Cloud API integration patterns
Ready to build your own automation interface? Use this demo as your starting point!