A minimal template for building ChatGPT apps using FastMCP. This template demonstrates both simple function tools and custom UI widgets.
- Simple Math Tool: Add two numbers together
- Hello World Widget: Custom UI component that renders inline in ChatGPT
- Minimal Setup: No API keys or complex configuration required
- Easy to Extend: Clean structure for adding more tools
- Python 3.8 or higher
-
Clone this template:
git clone <your-repo-url> cd simple-chatgpt-template
-
Set up Python environment:
cd mcp python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate pip install -r requirements.txt
-
Start the MCP server:
python src/main.py
-
Connect to ChatGPT:
- Open ChatGPT
- Go to Settings → Apps → Add App
- Enter your server URL:
https://your-ngrok-url.ngrok.io/mcp - Test the tools!
For local development, ChatGPT needs to access your MCP server over the internet. Use ngrok to create a secure tunnel to your local server.
Adds two numbers together and returns a formatted result.
Example:
Use the add_numbers tool to calculate 5 + 3
Displays a custom UI widget inline in ChatGPT conversation.
Example:
Use the hello_world_widget tool to show the demo widget
-
Create a new tool file in
mcp/src/tools/:# my_tools.py from fastmcp import FastMCP def register_my_tools(mcp: FastMCP): @mcp.tool( name="my_tool", title="My Tool", description="What my tool does" ) def my_tool(param: str) -> str: return f"Result: {param}"
-
Import and register in
main.py:from tools.my_tools import register_my_tools # In main.py register_my_tools(mcp)
-
Test your tool in ChatGPT!
-
Create widget HTML in your tool file:
@mcp.resource( uri="ui://widget/my-widget.html", name="my-widget", title="My Widget", description="My custom widget", mime_type="text/html+skybridge" ) def my_widget_resource(): return """ <!DOCTYPE html> <html> <head><title>My Widget</title></head> <body> <h1>Hello from my widget!</h1> </body> </html> """
-
Create tool that uses the widget:
@mcp.tool( name="my_widget", title="My Widget", description="Display my custom widget", meta={ "openai/outputTemplate": "ui://widget/my-widget.html" } ) def my_widget(): return {"content": [{"type": "text", "text": "Widget loaded!"}]}
simple-chatgpt-template/
├── README.md # This file
└── mcp/ # MCP server implementation
├── src/
│ ├── main.py # Main server entry point
│ └── tools/
│ ├── math_tools.py # Math operations
│ └── ux_widget.py # Hello world widget
├── requirements.txt # Python dependencies
└── README.md # MCP-specific documentation
- Start your MCP server
- Expose it with ngrok:
ngrok http 8123 - In ChatGPT, go to Settings → Apps
- Add a new app with URL:
https://your-ngrok-url.ngrok.io/mcp - Test your tools in conversation
- Check Python version (3.8+ required)
- Verify all dependencies installed:
pip install -r requirements.txt
- Verify server is running:
curl http://localhost:8123/mcp - Verify ngrok tunnel is open
- Check firewall settings
- Check server logs for errors
- Verify tool registration in
main.py - Test tools individually
MIT License - feel free to use this template for your own projects!
LFG! 🚀