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

# Frontend interface

Surfer-H includes a web frontend for interacting with the agent. It has a few advantages over the CLI.

### Features

* **Task creation:** Describe what you want to accomplish in natural language through a web interface.
* **Real-time monitoring:** Watch your agent complete tasks with live updates.
* **Trajectory management:** View, replay, and manage automated browsing sequences.
* **Settings configuration:** Adjust agent behavior, target URLs, and execution parameters through a UI.
* **Example tasks:** Start from pre-configured example prompts.

### Quick start

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

```javascript theme={null}
./launch.sh
```

This starts both the Surfer-H backend and the Next.js frontend, and makes the web interface available at [<u>http://localhost:3000</u>](http://localhost:3000).

### Interface preview

<img src="https://mintcdn.com/hcompany/LMw5UOr-cFB8qr9R/images/interface-screenshot.png?fit=max&auto=format&n=LMw5UOr-cFB8qr9R&q=85&s=e96c1c2c42eb8c0b0cc16a6506d8a8a9" alt="Interface Screenshot Pn" width="3420" height="1956" data-path="images/interface-screenshot.png" />

*The Surfer-H web interface showing real-time agent monitoring as it searches for a beef Wellington recipe*