This page includes full setup instructions related to the Surfer-H frontend.

​
Pre-requisites

​
Quick start

The easiest way to start both the backend and frontend is to run from the root directory: 
./launch.sh
This will automatically start both the Surfer-H backend and the Next.js frontend.

​
Manual installation

Follow the steps below 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. 
npm install
# or
yarn install
# or
pnpm install

​
Step 2: Run the development server

Start the local development server to preview and work on the project. 
npm run dev
# or
yarn dev
# or
pnpm dev

​
Step 3: Open the application in your browser

Open http://localhost:3000 in your browser

​
Usage

Follow the instructions below to put the Surfer-H frontend to work.

​
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.

​
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 exactly what the agent is doing

​
Example tasks

The interface includes several example tasks to get you started:
  • 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: Latest React with concurrent features
  • TypeScript: Type-safe development
  • Tailwind CSS v4: Latest utility-first CSS framework
  • shadcn/ui: Modern 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