MCP Fundamentals
In this video, you will get the infrastructure running.
Before you begin:
Make sure you have cloned the materials repository https://github.com/kodecocodes/m3-mcpf-materials/ and navigated to the lesson folder:
05-building-a-chatgpt-app/note-taking-app.
From there, open your terminal. You will proceed in three steps, using separate tabs for the frontend, backend, and the tunnel.
Step 1: Building the Frontend
Start in the frontend folder.
Although the compiled index.html is already committed to the dist folder for your convenience, it is good practice to know how to build it yourself, especially if you want to customize the UI.
First, you need to install the JavaScript dependencies. Run:
npm install
Once the packages are installed, you compile the React application into a single HTML file that your backend can serve. Run:
npm run build
Watch the Vite output. It generates the static assets and injects them into dist/index.html. This file is the “Widget” that ChatGPT will eventually render.
Step 2: Starting the Backend
Next, switch to the backend terminal tab. You should already be inside the backend directory.
First, you need to sync your Python dependencies:
uv sync
Optionally, if you want to populate your database with sample notes so the app isn’t empty when you start, you can run:
uv run python demo_data.py
Finally, start the FastMCP server. This server hosts the SQLite database, the MCP tools, and the widget resource.
uv run python server.py
You will see the startup logs indicating that the server is active and running on http://0.0.0.0:8000.
Step 3: Creating the Tunnel
Finally, switch to the third terminal tab. You need to bridge the gap between your local localhost and OpenAI’s cloud servers.
You will use ngrok to forward port 8000. Run the command:
ngrok http 8000 --host-header="localhost:8000"
Once Ngrok starts, look for the Forwarding line (e.g., https://f072...ngrok-free.app).
Copy that HTTPS URL. This is the public entry point for your application.
In the next video, you will use this URL to connect ChatGPT to your server and run the application.