# LangGraph MCP Prefab UI Demo

This is the companion repository for the blog post [Interactive LangGraph UIs with MCP Apps: Serving Inline Cards for Human-in-the-Loop Agents](https://medium.com/@pessini/interactive-langgraph-uis-with-mcp-apps-serving-inline-cards-for-human-in-the-loop-agents-9d745cb54ec1).

The goal of this demo is to show a LangGraph skills agent inside an MCP client with an inline Prefab UI. The example uses a sales analytics skill, a local SQLite database, and human-in-the-loop review buttons.

## Prerequisites

- Python 3.11+
- [uv](https://github.com/astral-sh/uv)
- Make, `curl`, and `tar`
- An OpenAI API key, unless you configure the demo to use Ollama
- An MCP client that can launch a stdio server and render MCP Apps UI

## Setup

Install the Python dependencies:

```bash
make install
```

Create your local environment file:

```bash
cp .env.example .env
```

Edit `.env` and set:

```bash
OPENAI_API_KEY=sk-...
```

Seed the demo database:

```bash
make seed
```

## Run

Start the sales MCP server:

```bash
make sales-mcp
```

In a second terminal, start the LangGraph skills agent:

```bash
make skills-agent
```

Keep both terminals running while you use the demo.

## MCP Client

Add this server command to your MCP client config:

```bash
uv --directory /ABSOLUTE/PATH/TO/langgraph-mcp-prefab-ui run python -m langgraph_prefab_ui.prefab_server
```

Use these environment variables for that MCP server:

```bash
LANGGRAPH_URL=http://127.0.0.1:2024
LANGGRAPH_ASSISTANT_ID=skills_agent
```

Replace `/ABSOLUTE/PATH/TO/langgraph-mcp-prefab-ui` with the path to your clone.

Then ask your MCP client:

```text
Show 2025 enterprise sales and investigate anomalies.
```

You should see an inline dashboard with the sales trend, source rows, and Investigate / Dismiss buttons.

## Notes

- Start `make sales-mcp` before `make skills-agent`.
- The first `make skills-agent` run downloads the pinned skills-agent release into `.skills-agent/`.