Skip to content

Commit 1a2f2af

Browse files
committed
docs(docusaurus): sync changes with docusaurus
1 parent 62e3ac0 commit 1a2f2af

File tree

8 files changed

+145
-58
lines changed

8 files changed

+145
-58
lines changed

README.md

Lines changed: 77 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
# FastAPI MCP LangGraph Template
22

3-
[![FastAPI MCP LangGraph Template](https://img.shields.io/github/stars/nicholasgoh/fastapi-mcp-langgraph-template?label=FastAPI%20MCP%20LangGraph%20Template)](https://github.com/modelcontextprotocol/python-sdk)
3+
A modern template for agentic orchestration — built for rapid iteration and scalable deployment using highly customizable, community-supported tools like MCP, LangGraph, and more.
44

5-
Read the docs with demo videos [here](https://nicholas-goh.com/docs/intro?ref=fastapi-mcp-langgraph-template).
5+
Visit the Github: [![FastAPI MCP LangGraph Template](https://img.shields.io/github/stars/nicholasgoh/fastapi-mcp-langgraph-template?label=FastAPI%20MCP%20LangGraph%20Template)](https://github.com/NicholasGoh/fastapi-mcp-langgraph-template)
6+
7+
> [!NOTE]
8+
> Read the docs with demo videos [here](https://nicholas-goh.com/docs/intro?ref=fastapi-mcp-langgraph-template). This repo will not contain demo videos.
69
710
<!--toc:start-->
811
- [FastAPI MCP LangGraph Template](#fastapi-mcp-langgraph-template)
@@ -13,15 +16,20 @@ Read the docs with demo videos [here](https://nicholas-goh.com/docs/intro?ref=fa
1316
- [Inspector](#inspector)
1417
- [Template Setup](#template-setup)
1518
- [Reverse Proxy](#reverse-proxy)
16-
- [Monitoring and Observability](#monitoring-and-observability)
17-
- [Getting Started](#getting-started)
19+
- [Planned Features Diagrams](#planned-features-diagrams)
20+
- [Monitoring and Observability](#monitoring-and-observability)
21+
- [Authentication and Authorization](#authentication-and-authorization)
22+
- [Quick Start](#quick-start)
1823
- [Development](#development)
1924
- [VSCode Devcontainer](#vscode-devcontainer)
2025
- [Without VSCode Devcontainer](#without-vscode-devcontainer)
26+
- [Debugging](#debugging)
2127
- [Refactored Markdown Files](#refactored-markdown-files)
2228
- [MCP](#mcp)
29+
- [LangGraph](#langgraph)
2330
- [Supabase](#supabase)
24-
- [Debugging](#debugging)
31+
- [Langfuse](#langfuse)
32+
- [Grafana Stack](#grafana-stack)
2533
<!--toc:end-->
2634

2735
## Core Features
@@ -51,14 +59,16 @@ Read the docs with demo videos [here](https://nicholas-goh.com/docs/intro?ref=fa
5159
- [![LangFuse](https://img.shields.io/github/stars/langfuse/langfuse?logo=langfuse&label=LangFuse)](https://github.com/langfuse/langfuse) for LLM Observability and LLM Metrics
5260
- [![Prometheus](https://img.shields.io/github/stars/prometheus/prometheus?logo=prometheus&label=Prometheus)](https://github.com/prometheus/prometheus) for scraping Metrics
5361
- [![Grafana](https://img.shields.io/github/stars/prometheus/prometheus?logo=grafana&label=Grafana)](https://github.com/grafana/grafana) for visualizing Metrics
54-
- [![Auth0](https://img.shields.io/badge/Auth0-white?logo=auth0)](https://auth0.com/docs) SaaS for JWT authentication
62+
- [![Auth0](https://img.shields.io/badge/Auth0-white?logo=auth0)](https://auth0.com/docs) SaaS for Authentication and Authorization with OIDC & JWT via OAuth 2.0
5563
- CI/CD via Github Actions
5664
- :dollar: Deploy live demo to [![Fargate](https://img.shields.io/badge/Fargate-white.svg?logo=awsfargate)](https://docs.aws.amazon.com/AmazonECS/latest/developerguide/AWS_Fargate.html)
5765
- Provision with [![Terraform](https://img.shields.io/github/stars/hashicorp/terraform?logo=terraform&label=Terraform)](https://github.com/hashicorp/terraform) IaC
5866
- Push built images to ECR and Dockerhub
5967

6068
## Architecture
6169

70+
This section outlines the architecture of the services, their interactions, and planned features.
71+
6272
### Inspector
6373

6474
Inspector communicates via SSE protocol with each MCP Server, while each server adheres to MCP specification.
@@ -112,6 +122,8 @@ graph LR
112122

113123
### Reverse Proxy
114124

125+
Can be extended for other services like Frontend and/or certain backend services self-hosted instead of on cloud (e.g., Langfuse).
126+
115127
```mermaid
116128
graph LR
117129
A[Web Browser]
@@ -125,7 +137,9 @@ graph LR
125137
B-->C
126138
```
127139

128-
### Monitoring and Observability
140+
### Planned Features Diagrams
141+
142+
#### Monitoring and Observability
129143

130144
```mermaid
131145
graph LR
@@ -146,16 +160,27 @@ graph LR
146160
A -->|Traces & Events| C
147161
```
148162

149-
## Getting Started
163+
#### Authentication and Authorization
164+
165+
![Auth0 Diagram](https://images.ctfassets.net/cdy7uua7fh8z/7mWk9No612EefC8uBidCqr/821eb60b0aa953b0d8e4afe897228844/Auth-code-flow-diagram.png)
166+
167+
[Auth0 Source](https://auth0.com/docs/get-started/authentication-and-authorization-flow/authorization-code-flow)
168+
169+
## Quick Start
170+
171+
Setup to run the repository in both production and development environments.
150172

151173
Build community youtube MCP image with:
152174

153175
```bash
154176
./community/youtube/build.sh
155177
```
156178

157-
> [!TIP]
158-
> 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.
179+
:::tip
180+
181+
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.
182+
183+
:::
159184

160185
Then build the other images with:
161186

@@ -189,27 +214,39 @@ Start production containers:
189214
docker compose up -d
190215
```
191216

217+
<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/api.mp4' />
218+
192219
## Development
193220

194221
First, set environment variables as per above.
195222

196223
### VSCode Devcontainer
197224

198-
> [!WARNING]
199-
> Only replace the following if you plan to start debugger for FastAPI server in VSCode.
225+
<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/vscode.mp4' />
226+
227+
<br/>
228+
229+
:::warning
230+
231+
Only replace the following if you plan to start debugger for FastAPI server in VSCode.
232+
233+
:::
200234

201235
Replace `./compose-dev.yaml` entrypoint to allow debugging FastAPI server:
202236

203-
```yaml
204-
# ...
237+
```yaml title="./compose-dev.yaml"
205238
api:
206-
# ...
207-
# entrypoint: uv run fastapi run api/main.py --root-path=/api --reload
208-
# replace above with:
239+
image: api:prod
240+
build:
241+
dockerfile: ./backend/api/Dockerfile
242+
# highlight-next-line
209243
entrypoint: bash -c "sleep infinity"
210-
# ...
244+
env_file:
245+
- ./envs/backend.env
211246
```
212247
248+
Then:
249+
213250
```bash
214251
code --no-sandbox .
215252
```
@@ -224,6 +261,14 @@ Run development environment with:
224261
docker compose -f compose-dev.yaml up -d
225262
```
226263

264+
## Debugging
265+
266+
Sometimes in development, nginx reverse proxy needs to reload its config to route services properly.
267+
268+
```bash
269+
docker compose -f compose-dev.yaml exec nginx sh -c "nginx -s reload"
270+
```
271+
227272
## Refactored Markdown Files
228273

229274
The following markdown files provide additional details on other features:
@@ -232,16 +277,25 @@ The following markdown files provide additional details on other features:
232277

233278
[`./docs/mcp.md`](./docs/mcp.md)
234279

280+
### LangGraph
281+
282+
[`./docs/langgraph.md`](./docs/langgraph.md)
283+
235284
### Supabase
236285

237286
[`./docs/supabase.md`](./docs/supabase.md)
238287

239-
## Debugging
288+
### Langfuse
240289

241-
Sometimes in development, nginx reverse proxy needs to reload its config to route services properly.
290+
[`./docs/langfuse.md`](./docs/langfuse.md)
242291

243-
```bash
244-
docker compose -f compose-dev.yaml exec nginx sh -c "nginx -s reload"
245-
```
292+
### Grafana Stack
293+
294+
[`./docs/grafana-stack.md`](./docs/grafana-stack.md)
246295

247296
[![Star History Chart](https://api.star-history.com/svg?repos=nicholasgoh/fastapi-mcp-langgraph-template&type=Date)](https://www.star-history.com/#nicholasgoh/fastapi-mcp-langgraph-template&Date)
297+
298+
> [!NOTE]
299+
> Click above to view live update on star history as per their [article](https://www.star-history.com/blog/a-message-to-github-star-history-users):
300+
> Ongoing Broken Live Chart
301+
> you can still use this website to view and download charts (though you may need to provide your own token).

docs/assets/mcps.mp4

-2.98 MB
Binary file not shown.

docs/assets/supabase.mp4

-4.28 MB
Binary file not shown.

docs/grafana-stack.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Grafana Stack
2+
3+
> By configuring the OpenAI Integration, users can gain valuable insights into token usage rates, response times, and overall costs. This integration empowers users to make data-driven decisions while ensuring optimal utilization of OpenAI APIs.
4+
5+
Learn more [here](https://grafana.com/docs/grafana-cloud/monitor-infrastructure/integrations/integration-reference/integration-openai/)
6+
7+
[![Grafana](https://img.shields.io/github/stars/prometheus/prometheus?logo=grafana&label=Grafana)](https://github.com/grafana/grafana)

docs/langfuse.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Langfuse
2+
3+
> Traces, evals, prompt management and metrics to debug and improve your LLM application.
4+
5+
Learn more [here](https://langfuse.com/)
6+
7+
[![LangFuse](https://img.shields.io/github/stars/langfuse/langfuse?logo=langfuse&label=LangFuse)](https://github.com/langfuse/langfuse)

docs/langgraph.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# LangGraph
2+
3+
> Gain control with LangGraph to design agents that reliably handle complex tasks.
4+
5+
Learn more [here](https://www.langchain.com/langgraph)
6+
7+
[![LangGraph](https://img.shields.io/github/stars/langchain-ai/langgraph?logo=langgraph&label=LangGraph)](https://github.com/langchain-ai/langgraph)
8+
9+
## Streaming
10+
11+
At its core, a compiled LangGraph is a [Runnable](https://github.com/langchain-ai/langchain/blob/langchain%3D%3D0.3.6/libs/core/langchain_core/runnables/base.py#L108). This template utilizes LangChain’s built-in streaming support through [`astream_events`](https://python.langchain.com/docs/how_to/streaming/#using-stream-events), granting programmatic access to every stage of the Agentic Workflow. You can observe and interact with key components—LLM, prompt, and tool—throughout their full execution lifecycle: start, stream, and end. For a comprehensive list of event types and usage examples, refer to the [Event Reference](https://python.langchain.com/docs/how_to/streaming/#event-reference).
12+
13+
## Persistence
14+
15+
LangGraph offers built-in state management and persistence via the [AsyncPostgresSaver](https://github.com/langchain-ai/langgraph/blob/0.2.39/libs/checkpoint-postgres/langgraph/checkpoint/postgres/aio.py#L39), enabling faster iteration on agentic workflows. Since LLMs are inherently stateless, chat history must typically be injected as context for each query—but LangGraph abstracts this away, requiring only a `thread_id`. It seamlessly handles chat history and metadata serialization/deserialization, simplifying development. Learn more about its advanced persistence capabilities [here](https://langchain-ai.github.io/langgraph/concepts/persistence/).

docs/mcp.md

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,11 @@
1-
# MCPs
2-
3-
[![MCP Client](https://img.shields.io/github/stars/modelcontextprotocol/python-sdk?logo=modelcontextprotocol&label=MCP-Client)](https://github.com/modelcontextprotocol/python-sdk) [![MCP Server](https://img.shields.io/github/stars/modelcontextprotocol/servers?logo=modelcontextprotocol&label=MCP-Servers)](https://github.com/modelcontextprotocol/servers)
4-
5-
<!--toc:start-->
6-
- [MCPs](#mcps)
7-
- [Video Demo](#video-demo)
8-
- [Key Features](#key-features)
9-
- [Inspector](#inspector)
10-
- [Community MCPs](#community-mcps)
11-
- [DBHub](#dbhub)
12-
- [Youtube](#youtube)
13-
- [Custom MCP](#custom-mcp)
14-
<!--toc:end-->
1+
# Model Context Protocol
152

3+
> [!INFO]
164
> MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.
175
186
Learn more [here](https://modelcontextprotocol.io/introduction).
197

20-
## Video Demo
21-
22-
![mcps](./assets/mcps.mp4)
8+
[![MCP Client](https://img.shields.io/github/stars/modelcontextprotocol/python-sdk?logo=modelcontextprotocol&label=MCP-Client)](https://github.com/modelcontextprotocol/python-sdk) [![MCP Server](https://img.shields.io/github/stars/modelcontextprotocol/servers?logo=modelcontextprotocol&label=MCP-Servers)](https://github.com/modelcontextprotocol/servers)
239

2410
## Key Features
2511

@@ -30,7 +16,7 @@ Learn more [here](https://modelcontextprotocol.io/introduction).
3016
3117
## Inspector
3218

33-
Explore community and your custom MCP servers via Inspector at [http://localhost:6274](http://localhost:6274) in [Development](../README.md#development).
19+
Explore community and your custom MCP servers via Inspector at [http://localhost:6274](http://localhost:6274) in [Development](./quick-start#development).
3420

3521
Left Sidebar:
3622

@@ -42,11 +28,13 @@ Explore the following tabs in the Top Navbar:
4228

4329
- `Resources`
4430
- `Prompts`
45-
- `Tools`.
31+
- `Tools`
32+
33+
See demo videos to learn more.
4634

47-
## Community MCPs
35+
## Community MCP Servers
4836

49-
Before building your own custom MCP, explore the growing list of hundreds of [community MCPs](https://github.com/modelcontextprotocol/servers). With integrations spanning databases, cloud services, and web resources, the perfect fit might already exist.
37+
Before building your own custom MCP servers, explore the growing list of hundreds of [community MCP servers](https://github.com/modelcontextprotocol/servers). With integrations spanning databases, cloud services, and web resources, the perfect fit might already exist.
5038

5139
### DBHub
5240

@@ -55,10 +43,12 @@ Learn more [here](https://github.com/bytebase/dbhub). Explore more in [Inspector
5543
Easily plug in this MCP into LLM to allow LLM to:
5644

5745
- Perform read-only SQL query validation for secure operations
46+
5847
- Enable deterministic introspection of DB
5948
- List schemas
6049
- List tables in schemas
6150
- Retrieve table structures
51+
6252
- Enrich user queries deterministically
6353
- Ground DB related queries with DB schemas
6454
- Provide SQL templates for translating natural language to SQL
@@ -78,6 +68,31 @@ Simply plug in this MCP to enable LLM to:
7868

7969
- Fetch transcripts from any YouTube URL on demand
8070

71+
Check out the [demo video](#video-demo) at the top.
72+
8173
## Custom MCP
8274

83-
Should you require a custom MCP, a template is provided [here](https://github.com/NicholasGoh/fastapi-mcp-langgraph-template/blob/main/backend/shared_mcp/tools.py) for you to reference in development.
75+
Should you require a custom MCP server, a template is provided [here](https://github.com/NicholasGoh/fastapi-mcp-langgraph-template/blob/main/backend/shared_mcp/tools.py) for you to reference in development.
76+
77+
```python
78+
import os
79+
80+
from mcp.server.fastmcp import FastMCP
81+
82+
mcp = FastMCP(
83+
"MCP Server",
84+
port=os.environ["MCP_SERVER_PORT"],
85+
)
86+
87+
88+
@mcp.tool()
89+
def add(a: int, b: int) -> int:
90+
"""Add two numbers"""
91+
return a + b
92+
93+
94+
@mcp.resource("greeting://{name}")
95+
def get_greeting(name: str) -> str:
96+
"""Get a personalized greeting"""
97+
return f"Hello, {name}!"
98+
```

docs/supabase.md

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
11
# Supabase
22

3-
[![Supabase](https://img.shields.io/github/stars/supabase/supabase?logo=supabase&label=Supabase)](https://github.com/supabase/supabase)
4-
5-
<!--toc:start-->
6-
- [Supabase](#supabase)
7-
- [Video Demo](#video-demo)
8-
- [Features](#features)
9-
<!--toc:end-->
10-
3+
Demo on getting `POSTGRES_DSN` with Supabase’s free database, auth, and APIs.
114

12-
## Video Demo
13-
14-
The start of the video shows how you can get your `POSTGRES_DSN` URL.
15-
16-
![Supabase](./assets/supabase.mp4)
5+
[![Supabase](https://img.shields.io/github/stars/supabase/supabase?logo=supabase&label=Supabase)](https://github.com/supabase/supabase)
176

187
## Features
198

0 commit comments

Comments
 (0)