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.

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
• 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:

make install

Create your local environment file:

cp .env.example .env

Edit .env and set:

OPENAI_API_KEY=sk-...

Seed the demo database:

make seed

Run

Start the sales MCP server:

make sales-mcp

In a second terminal, start the LangGraph skills agent:

make skills-agent

Keep both terminals running while you use the demo.

MCP Client

Add this server command to your MCP client config:

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:

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:

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