Content
# FastAPI MCP LangGraph Template
Read the docs with demo videos [here](https://nicholas-goh.com/docs/intro?ref=fastapi-mcp-langgraph-template).
<!--toc:start-->
- [FastAPI MCP LangGraph Template](#fastapi-mcp-langgraph-template)
- [Core Features](#core-features)
- [Technology Stack and Features](#technology-stack-and-features)
- [Planned Features](#planned-features)
- [Architecture](#architecture)
- [Inspector](#inspector)
- [Template Setup](#template-setup)
- [Reverse Proxy](#reverse-proxy)
- [Monitoring and Observability](#monitoring-and-observability)
- [Getting Started](#getting-started)
- [Development](#development)
- [VSCode Devcontainer](#vscode-devcontainer)
- [Without VSCode Devcontainer](#without-vscode-devcontainer)
- [Refactored Markdown Files](#refactored-markdown-files)
- [MCP](#mcp)
- [Supabase](#supabase)
- [Debugging](#debugging)
<!--toc:end-->
## Core Features
[](https://github.com/modelcontextprotocol/python-sdk) is an open protocol that standardizes how apps provide context to LLMs.
- Seamlessly integrates LLM with growing list of community integrations found here [](https://github.com/modelcontextprotocol/servers)
- No LLM provider lock in
[](https://github.com/langchain-ai/langgraph) for Customizable Agentic Orchestration
- Native streaming for UX in complex Agentic Workflows
- Native persisted chat history and state management
### Technology Stack and Features
- [](https://github.com/fastapi/fastapi) for Python backend API
- [](https://github.com/fastapi/sqlmodel) for Python SQL database interactions (ORM + Validation).
- Wrapper of [](https://github.com/sqlalchemy/sqlalchemy)
- [](https://github.com/pydantic/pydantic) for Data Validation and Settings Management.
- [](https://github.com/supabase/supabase) for DB RBAC
- [](https://github.com/postgres/postgres) Relational DB
- [](https://github.com/pgvector/pgvector) Vector Store
- [](https://github.com/nginx/nginx) Reverse Proxy
- [](https://github.com/docker/compose) for development and production.
### Planned Features
- [](https://github.com/langfuse/langfuse) for LLM Observability and LLM Metrics
- [](https://github.com/prometheus/prometheus) for scraping Metrics
- [](https://github.com/grafana/grafana) for visualizing Metrics
- [](https://auth0.com/docs) SaaS for JWT authentication
- CI/CD via Github Actions
- :dollar: Deploy live demo to [](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/AWS_Fargate.html)
- Provision with [](https://github.com/hashicorp/terraform) IaC
- Push built images to ECR and Dockerhub
## Architecture
### Inspector
Inspector communicates via SSE protocol with each MCP Server, while each server adheres to MCP specification.
```mermaid
graph LR
subgraph localhost
A[Inspector]
B[DBHub Server]
C[Youtube Server]
D[Custom Server]
end
subgraph Supabase Cloud
E[Supabase DB]
end
subgraph Google Cloud
F[Youtube API]
end
A<-->|Protocol|B
A<-->|Protocol|C
A<-->|Protocol|D
B<-->E
C<-->F
```
### Template Setup
The current template does not connect to all MCP servers. Additionally, the API server communicates with the database using a SQL ORM.
```mermaid
graph LR
subgraph localhost
A[API Server]
B[DBHub Server]
C[Youtube Server]
D[Custom Server]
end
subgraph Supabase Cloud
E[Supabase DB]
end
A<-->|Protocol|D
A<-->E
```
### Reverse Proxy
```mermaid
graph LR
A[Web Browser]
subgraph localhost
B[Nginx Reverse Proxy]
C[API Server]
end
A-->B
B-->C
```
### Monitoring and Observability
```mermaid
graph LR
subgraph localhost
A[API Server]
end
subgraph Grafana Cloud
B[Grafana]
end
subgraph Langfuse Cloud
C[Langfuse]
end
A -->|Metrics & Logs| B
A -->|Traces & Events| C
```
## Getting Started
Build community youtube MCP image with:
```bash
./community/youtube/build.sh
```
> [!TIP]
> Instead of cloning or submoduling the repository locally, then building the image, this script builds the Docker image inside a temporary Docker-in-Docker container. This approach avoids polluting your local environment with throwaway files by cleaning up everything once the container exits.
Then build the other images with:
```bash
docker compose -f compose-dev.yaml build
```
Copy environment file:
```bash
cp .env.sample .env
```
Add your following API keys and value to the respective file: `./envs/backend.env`, `./envs/youtube.env` and `.env`.
```bash
OPENAI_API_KEY=sk-proj-...
POSTGRES_DSN=postgresql://postgres...
YOUTUBE_API_KEY=...
```
Set environment variables in shell: (compatible with `bash` and `zsh`)
```bash
set -a; for env_file in ./envs/*; do source $env_file; done; set +a
```
Start production containers:
```bash
docker compose up -d
```
## Development
First, set environment variables as per above.
### VSCode Devcontainer
> [!WARNING]
> Only replace the following if you plan to start debugger for FastAPI server in VSCode.
Replace `./compose-dev.yaml` entrypoint to allow debugging FastAPI server:
```yaml
# ...
api:
# ...
# entrypoint: uv run fastapi run api/main.py --root-path=/api --reload
# replace above with:
entrypoint: bash -c "sleep infinity"
# ...
```
```bash
code --no-sandbox .
```
Press `F1` and type `Dev Containers: Rebuild and Reopen in Container` to open containerized environment with IntelliSense and Debugger for FastAPI.
### Without VSCode Devcontainer
Run development environment with:
```bash
docker compose -f compose-dev.yaml up -d
```
## Refactored Markdown Files
The following markdown files provide additional details on other features:
### MCP
[`./docs/mcp.md`](./docs/mcp.md)
### Supabase
[`./docs/supabase.md`](./docs/supabase.md)
## Debugging
Sometimes in development, nginx reverse proxy needs to reload its config to route services properly.
```bash
docker compose -f compose-dev.yaml exec nginx sh -c "nginx -s reload"
```
