import { Callout, Cards } from "nextra/components";

# DeerFlow App

<Callout type="info" emoji="🚀">
  DeerFlow App is a complete Super Agent application built on top of DeerFlow
  Harness. It packages the runtime capabilities into a ready-to-deploy product
  with a web UI, API gateway, and operational tooling.
</Callout>

DeerFlow App is the reference implementation of what a production DeerFlow experience looks like. It assembles the Harness runtime, a web-based conversation workspace, an API gateway, and a reverse proxy into a single deployable system.

## What the App provides

| Capability | Description |
|---|---|
| **Web workspace** | Browser-based conversation UI with support for threads, artifacts, file uploads, and skill selection |
| **Custom agents** | Create and manage named agents with different models, skills, and tool sets |
| **Thread management** | Persistent conversation threads with checkpointing and history |
| **Streaming responses** | Real-time token streaming with thinking steps and tool call visibility |
| **Artifact viewer** | In-browser preview and download of files and outputs produced by the agent |
| **Extensions UI** | Enable/disable MCP servers and skills without editing config files |
| **Gateway API** | FastAPI-based REST API that bridges the frontend and the LangGraph runtime |

## Architecture

The DeerFlow App runs as four services behind a single nginx reverse proxy:

```
                ┌──────────────────┐
     Browser → │  nginx :2026      │
                └──────────────────┘
                  │          │
         ┌────────┘          └────────┐
         ▼                            ▼
┌──────────────────┐       ┌──────────────────────┐
│  Frontend :3000  │       │  Gateway API :8001    │
│  (Next.js)       │       │  (FastAPI)            │
└──────────────────┘       └──────────────────────┘
                                      │
                            ┌─────────┘
                            ▼
                  ┌──────────────────────┐
                  │  LangGraph :2024     │
                  │  (DeerFlow Harness)  │
                  └──────────────────────┘
```

- **nginx**: routes requests — `/api/*` to the Gateway, LangGraph streaming endpoints to LangGraph directly, and everything else to the frontend.
- **Frontend** (Next.js + React): the browser UI. Communicates with both the Gateway and LangGraph.
- **Gateway** (FastAPI): handles API operations — model listing, agent CRUD, memory, extensions management, file uploads.
- **LangGraph**: the DeerFlow Harness runtime. Manages thread state, agent execution, and streaming.

## Technology stack

| Layer | Technology |
|---|---|
| Frontend | Next.js 16, React 19, TypeScript, pnpm |
| Gateway | FastAPI, Python 3.12, uvicorn |
| Agent runtime | LangGraph, LangChain, DeerFlow Harness |
| Reverse proxy | nginx |
| State persistence | LangGraph Server (default) + optional SQLite/PostgreSQL checkpointer |

<Cards num={2}>
  <Cards.Card title="Quick Start" href="/docs/application/quick-start" />
  <Cards.Card title="Deployment Guide" href="/docs/application/deployment-guide" />
</Cards>