Merge pull request #8 from NicholasGoh/docs/add-video-assets-to-readme

Docs/add video assets to readme

Author: NicholasGoh

README.md

@@ -1,5 +1,7 @@
 # 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)
@@ -10,6 +12,9 @@
     - [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
@@ -90,6 +95,8 @@ docker compose up -d
 
 ## Development
 
+First, set environment variables as per above.
+
 ### VSCode Devcontainer
 
 > [!WARNING]
@@ -125,5 +132,18 @@ docker compose -f compose-dev.yaml up -d
 
 The following markdown files provide additional details on other features:
 
-- [`./docs/mcp.md`](./docs/mcp.md)
-- [`./docs/supabase.md`](./docs/supabase.md)
+### 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"
+```

docs/assets/mcps.mp4

@@ -0,0 +1,83 @@
+# MCPs
+
+[![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)
+
+<!--toc:start-->
+- [MCPs](#mcps)
+  - [Video Demo](#video-demo)
+  - [Key Features](#key-features)
+  - [Inspector](#inspector)
+  - [Community MCPs](#community-mcps)
+    - [DBHub](#dbhub)
+    - [Youtube](#youtube)
+  - [Custom MCP](#custom-mcp)
+<!--toc:end-->
+
+> 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
+
+![mcps](./assets/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](../README.md#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 MCPs
+
+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.
+
+### 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, 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.

docs/assets/supabase.mp4

@@ -0,0 +1,29 @@
+# Supabase
+
+[![Supabase](https://img.shields.io/github/stars/supabase/supabase?logo=supabase&label=Supabase)](https://github.com/supabase/supabase)
+
+<!--toc:start-->
+- [Supabase](#supabase)
+  - [Video Demo](#video-demo)
+  - [Features](#features)
+<!--toc:end-->
+
+
+## Video Demo
+
+The start of the video shows how you can get your `POSTGRES_DSN` URL.
+
+![Supabase](./assets/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