Pre-requisites
- Node.js 18+: Download from nodejs.org
- npm (comes with Node.js) or yarn or pnpm
- Python 3.11+: Required for the backend
- uv: Python package manager (Install instructions)
Quick start
To start both the backend and frontend, run this from the root directory:Manual installation
To launch the Surfer-H backend manually:Step 1: Install dependencies
Use your preferred package manager (npm, yarn, or pnpm) to install the project’s dependencies.
Step 2: Run the development server
Start the local development server to preview and work on the project.Step 3: Open the application in your browser
Open http://localhost:3000 in your browserUsage
Step 1: Create a task
Enter a natural language description of what you want to accomplish.Example tasks“Find a beef Wellington recipe with a rating of 4.7 or higher and at least 200 reviews”
“Search for the latest iPhone price on Amazon”
For more use cases, see the Example tasks section below.
“Search for the latest iPhone price on Amazon”
For more use cases, see the Example tasks section below.
Step 2: Configure settings
Set your target URL and adjust agent parameters.Step 3: Start browsing
Launch the agent and watch it work in real time.Step 4: Monitor progress
Use the Surfer View to see what the agent is doing.Example tasks
The interface includes several example tasks:- Finding recipes with specific criteria
- Searching for products on e-commerce sites
- Booking travel arrangements
- Checking weather forecasts
Architecture
This frontend is built with:- Next.js 15: React framework with App Router
- React 19: React with concurrent features
- TypeScript: Type-safe development
- Tailwind CSS v4: Utility-first CSS framework
- shadcn/ui: Component library built on Radix UI
- TanStack React Query v5: Server state management
API integration
The frontend communicates with the Surfer-H backend through REST endpoints:/api/trajectories- Manage task execution/api/trajectory-events- Real-time task monitoring