|
1 |
| -## Browser Use Agent |
| 1 | +# Browser Use Agent |
2 | 2 |
|
3 | 3 | > Create an agent that can Browse the Web using Browser Use.
|
4 | 4 |
|
5 |
| -A Next.js application that provides an AI-powered web browsing assistant using the Browser Use SDK. This agent can execute tasks in a web browser, monitor their progress, and provide real-time updates through a streaming interface. |
6 |
| - |
7 |
| -## Features |
8 |
| - |
9 |
| -- **Web Task Execution**: Run automated tasks in web browsers |
10 |
| -- **Real-time Monitoring**: Stream task progress and status updates |
11 |
| -- **Session Management**: Continue tasks across browser sessions |
12 |
| -- **AI Integration**: Powered by AI models for intelligent task handling |
13 |
| -- **Streaming Responses**: Real-time updates using Vercel AI SDK |
14 |
| - |
15 |
| -## Core Components |
16 |
| - |
17 |
| -### API Route (`/api/chat`) |
18 |
| -The main API endpoint that handles chat interactions and web task execution: |
19 |
| - |
20 |
| -- **`runTask`**: Creates and executes new browser tasks |
21 |
| -- **`continueTask`**: Continues existing tasks using session IDs |
22 |
| -- **Task Status Tracking**: Monitors running, paused, stopped, and finished states |
23 |
| -- **Live URL Access**: Provides real-time browser session URLs |
24 |
| - |
25 |
| -## Setup |
26 |
| - |
27 |
| -### Prerequisites |
28 |
| -- Node.js 18+ |
29 |
| -- pnpm package manager |
30 |
| - |
31 |
| -### Environment Variables |
32 |
| -Create a `.env.local` file with the following variables: |
33 |
| - |
34 |
| -```bash |
35 |
| -# Browser Use API Key (required) |
36 |
| -BROWSER_USE_API_KEY=your_browser_use_api_key_here |
37 |
| -``` |
| 5 | +<p align="center"> |
| 6 | + <img src="media/app.png" alt="App Screenshot" height="400" /> |
| 7 | +</p> |
38 | 8 |
|
39 |
| -### Installation & Development |
| 9 | +## Development Setup |
40 | 10 |
|
41 | 11 | ```bash
|
42 | 12 | # Install dependencies
|
43 | 13 | pnpm i
|
44 | 14 |
|
45 |
| -# Start Dev Server |
| 15 | +# Start Dev |
46 | 16 | pnpm dev
|
47 | 17 | ```
|
48 | 18 |
|
49 |
| -Open [http://localhost:3000](http://localhost:3000) to view the application. |
50 |
| - |
51 |
| -## Usage |
| 19 | +### Getting Environment Variables |
52 | 20 |
|
53 |
| -1. **Start a Task**: Use the chat interface to describe what you want to accomplish in the browser |
54 |
| -2. **Monitor Progress**: Watch real-time updates as the task executes |
55 |
| -3. **Access Live Session**: Click on the live URL to see the browser in action |
56 |
| -4. **Continue Tasks**: Use session IDs to resume interrupted tasks |
| 21 | +> Set up environment variables to successfully run this example locally. |
57 | 22 |
|
58 |
| -## Architecture |
| 23 | +- Vercel Gateway AI - [Get API Key](https://vercel.com/d?to=%2F%5Bteam%5D%2F%7E%2Fai%2Fapi-keys&title=Get%20your%20AI%20Gateway%20key) |
| 24 | +- Browser Use Cloud API - [Get API Key](https://cloud.browser-use.com/billing) |
59 | 25 |
|
60 |
| -The application uses: |
61 |
| -- **Next.js 14** with App Router |
62 |
| -- **Vercel AI SDK** for streaming responses |
63 |
| -- **Browser Use SDK** for web automation |
64 |
| -- **TypeScript** for type safety |
65 |
| -- **Tailwind CSS** for styling |
66 |
| - |
67 |
| -<p align="center"> |
68 |
| - <img src="media/app.png" alt="App Screenshot" height="400" /> |
69 |
| -</p> |
| 26 | +Copy `.env.example` into `.env` and run the project! |
0 commit comments