NicholasGoh · NicholasGoh · Apr 25, 2025 · Apr 25, 2025 · Apr 25, 2025 · Apr 25, 2025
diff --git a/docs/tutorial-basics/_category_.json → docs/getting-started/_category_.json b/docs/tutorial-basics/_category_.json → docs/getting-started/_category_.json
@@ -1,5 +1,5 @@
 {
-  "label": "Tutorial - Basics",
+  "label": "Getting Started",
   "position": 2,
   "link": {
     "type": "generated-index",

diff --git a/docs/getting-started/model-context-protocol.mdx b/docs/getting-started/model-context-protocol.mdx
@@ -0,0 +1,105 @@
+---
+sidebar_position: 2
+---
+
+import ReactPlayer from 'react-player'
+
+# Model Context Protocol
+
+[![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)
+
+:::info
+
+> 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.
+
+:::
+
+Learn more [here](https://modelcontextprotocol.io/introduction).
+
+## Video Demo
+
+<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/mcps.mp4' />
+
+## Key Features
+
+> MCP helps you build agents and complex workflows on top of LLMs. LLMs frequently need to integrate with data and tools, and MCP provides:
+> - A growing list of pre-built integrations that your LLM can directly plug into
+> - The flexibility to switch between LLM providers and vendors
+> - Best practices for securing your data within your infrastructure
+
+## Inspector
+
+Explore community and your custom MCP servers via Inspector at [http://localhost:6274](http://localhost:6274) in [Development](./quick-start#development).
+
+Left Sidebar:
+
+- Select SSE `Transport Type`
+- Input `http://<mcp server>:<MCP_SERVER_PORT>/sse` in `URL`
+- Click `Connect`
+
+Explore the following tabs in the Top Navbar:
+
+- `Resources`
+- `Prompts`
+- `Tools`
+
+## Community MCP Servers
+
+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.
+
+### DBHub
+
+Learn more [here](https://github.com/bytebase/dbhub). Explore more in [Inspector](#inspector).
+
+Easily plug in this MCP into LLM to allow LLM to:
+
+- Perform read-only SQL query validation for secure operations
+- Enable deterministic introspection of DB
+  - List schemas
+  - List tables in schemas
+  - Retrieve table structures
+- Enrich user queries deterministically
+  - Ground DB related queries with DB schemas
+  - Provide SQL templates for translating natural language to SQL
+
+### Youtube
+
+Learn more [here](https://github.com/Klavis-AI/klavis/tree/main/mcp_servers/youtube). Explore more in [Inspector](#inspector).
+
+Instead of building logic to:
+
+- Scrape YouTube content
+- Adapt outputs for LLM compatibility
+- Validate tool invocation by the LLM
+- Chain these steps to fetch transcripts from URLs
+
+Simply plug in this MCP to enable LLM to:
+
+- Fetch transcripts from any YouTube URL on demand
+
+## Custom MCP
+
+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.
+
+```python title="./backend/shared_mcp/tools.py"
+import os
+
+from mcp.server.fastmcp import FastMCP
+
+mcp = FastMCP(
+    "MCP Server",
+    port=os.environ["MCP_SERVER_PORT"],
+)
+
+
+@mcp.tool()
+def add(a: int, b: int) -> int:
+    """Add two numbers"""
+    return a + b
+
+
+@mcp.resource("greeting://{name}")
+def get_greeting(name: str) -> str:
+    """Get a personalized greeting"""
+    return f"Hello, {name}!"
+```
diff --git a/docs/getting-started/quick-start.mdx b/docs/getting-started/quick-start.mdx
@@ -0,0 +1,106 @@
+---
+sidebar_position: 1
+---
+
+import ReactPlayer from 'react-player'
+
+# Quick Start
+
+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
+```
+
+<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/api.mp4' />
+
+## Development
+
+First, set environment variables as per above.
+
+### VSCode Devcontainer
+
+<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/vscode.mp4' />
+
+<br/>
+
+:::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 title="./compose-dev.yaml"
+  api:
+    image: api:prod
+    build:
+      dockerfile: ./backend/api/Dockerfile
+    # highlight-next-line
+    entrypoint: bash -c "sleep infinity"
+    env_file:
+      - ./envs/backend.env
+```
+
+Then:
+
+```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
+```
+
+## 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"
+```
diff --git a/docs/getting-started/supabase.mdx b/docs/getting-started/supabase.mdx
@@ -0,0 +1,28 @@
+---
+sidebar_position: 3
+---
+
+import ReactPlayer from 'react-player'
+
+# Supabase
+
+[![Supabase](https://img.shields.io/github/stars/supabase/supabase?logo=supabase&label=Supabase)](https://github.com/supabase/supabase)
+
+The start of the video shows how you can get your `POSTGRES_DSN` URL.
+
+## Video Demo
+
+<ReactPlayer playing controls url='/vid/fastapi-mcp-langgraph-template/supabase.mp4' />
+
+## Features
+
+Visit [here](https://supabase.com/) for a full list of features and learn more.
+
+- Postgres Relational Database
+- Authentication
+  - User Sign up and Login
+  - Row and Column Security
+- Data APIs
+  - Auto Generated from Table Schema
+- Self Host for free
+- Free Cloud usage for rapid prototyping
diff --git a/docs/intro.md b/docs/intro.md
diff --git a/docs/intro.mdx b/docs/intro.mdx
@@ -0,0 +1,43 @@
+---
+sidebar_position: 1
+title: Introduction
+---
+
+# Introduction
+
+A modern template for agentic orchestration — built for rapid iteration and scalable deployment using highly customizable, community-supported tools like MCP, LangGraph, and more.
+
+Visit the [Github](https://github.com/NicholasGoh/fastapi-mcp-langgraph-template)
+
+## Core Features
+
+[![MCP Client](https://img.shields.io/github/stars/modelcontextprotocol/python-sdk?logo=modelcontextprotocol&label=MCP-Client)](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 [![MCP Server](https://img.shields.io/github/stars/modelcontextprotocol/servers?logo=modelcontextprotocol&label=MCP-Servers)](https://github.com/modelcontextprotocol/servers)
+  - No LLM provider lock in
+
+[![LangGraph](https://img.shields.io/github/stars/langchain-ai/langgraph?logo=langgraph&label=LangGraph)](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
+
+- [![FastAPI](https://img.shields.io/github/stars/fastapi/fastapi?logo=fastapi&label=fastapi)](https://github.com/fastapi/fastapi) for Python backend API
+- [![SQLModel](https://img.shields.io/github/stars/fastapi/sqlmodel?logo=sqlmodel&label=SQLModel)](https://github.com/fastapi/sqlmodel) for Python SQL database interactions (ORM + Validation).
+  - Wrapper of [![SQLAlchemy](https://img.shields.io/github/stars/sqlalchemy/sqlalchemy?logo=sqlalchemy&label=SQLAlchemy)](https://github.com/sqlalchemy/sqlalchemy)
+- [![Pydantic](https://img.shields.io/github/stars/pydantic/pydantic?logo=pydantic&label=Pydantic)](https://github.com/pydantic/pydantic) for Data Validation and Settings Management.
+- [![Supabase](https://img.shields.io/github/stars/supabase/supabase?logo=supabase&label=Supabase)](https://github.com/supabase/supabase) for DB RBAC
+  - [![PostgreSQL](https://img.shields.io/github/stars/postgres/postgres?logo=postgresql&label=Postgres)](https://github.com/postgres/postgres) Relational DB
+  - [![PGVector](https://img.shields.io/github/stars/pgvector/pgvector?logo=postgresql&label=PGVector)](https://github.com/pgvector/pgvector) Vector Store
+- [![Nginx](https://img.shields.io/github/stars/nginx/nginx?logo=nginx&label=Nginx)](https://github.com/nginx/nginx) Reverse Proxy
+- [![Compose](https://img.shields.io/github/stars/docker/compose?logo=docker&label=Compose)](https://github.com/docker/compose) for development and production.
+
+### Planned Features
+
+- [![LangFuse](https://img.shields.io/github/stars/langfuse/langfuse?logo=langfuse&label=LangFuse)](https://github.com/langfuse/langfuse) for LLM Observability and LLM Metrics
+- [![Prometheus](https://img.shields.io/github/stars/prometheus/prometheus?logo=prometheus&label=Prometheus)](https://github.com/prometheus/prometheus) for scraping Metrics
+- [![Grafana](https://img.shields.io/github/stars/prometheus/prometheus?logo=grafana&label=Grafana)](https://github.com/grafana/grafana) for visualizing Metrics
+- [![Auth0](https://img.shields.io/badge/Auth0-white?logo=auth0)](https://auth0.com/docs) SaaS for JWT authentication
+- CI/CD via Github Actions
+  - :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)
+  - Provision with [![Terraform](https://img.shields.io/github/stars/hashicorp/terraform?logo=terraform&label=Terraform)](https://github.com/hashicorp/terraform) IaC
+  - Push built images to ECR and Dockerhub
diff --git a/docs/tutorial-basics/congratulations.md b/docs/tutorial-basics/congratulations.md
diff --git a/docs/tutorial-basics/create-a-blog-post.md b/docs/tutorial-basics/create-a-blog-post.md