Improve Docs, Cleanup Code

Author: maticzav

typescript/agent/README.md

@@ -1,36 +1,69 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+## Browser Use Agent
 
-## Getting Started
+> Create an agent that can Browse the Web using Browser Use.
 
-First, run the development server:
+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.
+
+## Features
+
+- **Web Task Execution**: Run automated tasks in web browsers
+- **Real-time Monitoring**: Stream task progress and status updates
+- **Session Management**: Continue tasks across browser sessions
+- **AI Integration**: Powered by AI models for intelligent task handling
+- **Streaming Responses**: Real-time updates using Vercel AI SDK
+
+## Core Components
+
+### API Route (`/api/chat`)
+The main API endpoint that handles chat interactions and web task execution:
+
+- **`runTask`**: Creates and executes new browser tasks
+- **`continueTask`**: Continues existing tasks using session IDs
+- **Task Status Tracking**: Monitors running, paused, stopped, and finished states
+- **Live URL Access**: Provides real-time browser session URLs
+
+## Setup
+
+### Prerequisites
+- Node.js 18+ 
+- pnpm package manager
+
+### Environment Variables
+Create a `.env.local` file with the following variables:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+# Browser Use API Key (required)
+BROWSER_USE_API_KEY=your_browser_use_api_key_here
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### Installation & Development
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+# Install dependencies
+pnpm i
 
-## Learn More
+# Start Dev Server
+pnpm dev
+```
 
-To learn more about Next.js, take a look at the following resources:
+Open [http://localhost:3000](http://localhost:3000) to view the application.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## Usage
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+1. **Start a Task**: Use the chat interface to describe what you want to accomplish in the browser
+2. **Monitor Progress**: Watch real-time updates as the task executes
+3. **Access Live Session**: Click on the live URL to see the browser in action
+4. **Continue Tasks**: Use session IDs to resume interrupted tasks
 
-## Deploy on Vercel
+## Architecture
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+The application uses:
+- **Next.js 14** with App Router
+- **Vercel AI SDK** for streaming responses
+- **Browser Use SDK** for web automation
+- **TypeScript** for type safety
+- **Tailwind CSS** for styling
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+<p align="center">
+  <img src="media/app.png" alt="App Screenshot" height="400" />
+</p>

typescript/agent/media/app.png

@@ -151,10 +151,10 @@ export type ChatMessage = UIMessage<never, UIDataTypes, ChatTools>;
 // ROUTE
 
 export async function POST(req: Request) {
-  const { messages, model, webSearch }: { messages: UIMessage[]; model: string; webSearch: boolean } = await req.json();
+  const { messages, model }: { messages: UIMessage[]; model: string } = await req.json();
 
   const result = streamText({
-    model: webSearch ? "perplexity/sonar" : model,
+    model: model,
     messages: convertToModelMessages(messages),
     system:
       "You are a helpful assistant that can answer questions and help with tasks. You can use the tools provided to you to help you answer questions and help with tasks.",

typescript/agent/public/browseruse-black.svg

@@ -4,7 +4,6 @@ import { Conversation, ConversationContent, ConversationScrollButton } from "@/c
 import { Message, MessageContent } from "@/components/ai-elements/message";
 import {
   PromptInput,
-  PromptInputButton,
   PromptInputModelSelect,
   PromptInputModelSelectContent,
   PromptInputModelSelectItem,
@@ -19,7 +18,7 @@ import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-e
 import { Response } from "@/components/ai-elements/response";
 import { useChat } from "@ai-sdk/react";
 import { DefaultChatTransport } from "ai";
-import { GlobeIcon, Loader } from "lucide-react";
+import { Loader } from "lucide-react";
 import Image from "next/image";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -39,7 +38,6 @@ const MODELS = [
 export default function Home() {
   const [input, setInput] = useState("");
   const [model, setModel] = useState<string>(MODELS[0].value);
-  const [webSearch, setWebSearch] = useState(false);
   const { messages, sendMessage, status } = useChat<ChatMessage>({
     transport: new DefaultChatTransport({
       api: "/api/chat",
@@ -55,14 +53,13 @@ export default function Home() {
           {
             body: {
               model: model,
-              webSearch: webSearch,
             },
           },
         );
         setInput("");
       }
     },
-    [input, model, webSearch, sendMessage],
+    [input, model, sendMessage],
   );
 
   const liveUrl = useMemo(() => {
@@ -96,7 +93,7 @@ export default function Home() {
             {liveUrl != null ? (
               <iframe src={liveUrl} className="w-full h-full border border-dashed border-gray-400" />
             ) : (
-              <Image src="/browseruse-black.svg" alt="logo" width={40} height={40} className="size-16 object-contain" />
+              <Image src="/browseruse.svg" alt="logo" width={40} height={40} className="size-16 object-contain" />
             )}
           </div>
         </div>
@@ -124,7 +121,7 @@ export default function Home() {
                           return (
                             <Reasoning
                               key={`${message.id}-${i}`}
-                              className="w-full"
+                              className="w-full mb-0"
                               isStreaming={status === "streaming"}
                             >
                               <ReasoningTrigger />
@@ -164,10 +161,6 @@ export default function Home() {
             <PromptInputTextarea onChange={(e) => setInput(e.target.value)} value={input} />
             <PromptInputToolbar>
               <PromptInputTools>
-                <PromptInputButton variant={webSearch ? "default" : "ghost"} onClick={() => setWebSearch(!webSearch)}>
-                  <GlobeIcon size={16} />
-                  <span>Search</span>
-                </PromptInputButton>
                 <PromptInputModelSelect
                   onValueChange={(value) => {
                     setModel(value);