> ## Documentation Index
> Fetch the complete documentation index at: https://hub.hcompany.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Launch the frontend

This page covers setup for the Surfer-H frontend.

# Pre-requisites

* Node.js 18+: [<u>Download from </u>](https://nodejs.org/)[<u>nodejs.org</u>](http://nodejs.org)
* npm (comes with Node.js) or yarn or pnpm
* Python 3.11+: Required for the backend
* uv: Python package manager ([<u>Install instructions</u>](https://docs.astral.sh/uv/getting-started/installation/))

# Quick start

To start both the backend and frontend, run this from the root directory:

```
./launch.sh
```

This starts both the Surfer-H backend and the Next.js frontend.

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

```
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 [<u>http://localhost:3000</u>](http://localhost:3000) in your browser

# Usage

## Step 1: Create a task

Enter a natural language description of what you want to accomplish.

<Info>
  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.*
</Info>

## 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