MCP Fundamentals

Now that your server is running and tunneled via Ngrok, it is time to connect it to ChatGPT.

Step 1: Enabling Developer Mode

To connect a local MCP server, you must first enable the specific settings.

Important Eligibility Note: ChatGPT Developer Mode is currently in Beta. It is available only to Pro, Plus, Business, Enterprise, and Education accounts on the web. If you are using a free account, you may not see these settings.

1. Click your Username in the bottom left corner.
2. Select Settings.
3. In the settings window, click the Apps menu.
4. Click Advanced settings.
5. Make sure Developer mode is checked or turned ON.
6. Click Back to return to the previous menu.
7. Click the Create app button.

This opens the configuration form for your new custom tool.

Step 2: Configuring the App

1. Give your app a name, such as “Note Taking App”.
2. In the MCP Server URL field, paste the Ngrok URL you copied in the previous video.
3. Crucial Step: You must append /mcp to the end of the URL.
4. Select No Auth in the Authentication section.
5. Check the checkbox to confirm that you understand the risk of adding an MCP server.

Click Create.

Step 3: Verifying Actions and Templates

Before you start chatting, look at the summary screen. ChatGPT has successfully queried your server.

• Under Actions, you see the tools defined in your Python backend: create_note, list_notes, and open_dashboard.
• Under Templates, you see the Widget URI (ui://widget/notes.html).

This confirms that ChatGPT knows how to call your code and how to render your React frontend.

Step 4: Interacting with the App

Now, let’s test the workflow.

Add Note Taking App to your chat by clicking the + button, selecting the More menu, and then choosing Note Taking App.

1. Listing Notes (The Widget) Type “List notes” into the chat. ChatGPT renders your interactive React widget. It calls the list_notes tool, receives the data, and paints the “AI Notes” dashboard. It also display a text list of your notes below the widget.

2. Using the UI You can interact with the app just like a standard website.

• Click the + New button in the widget.
• Type a title (e.g., “Reading Books”) and some content.
• Click Save. The widget uses the Apps SDK to call the backend tool. The list updates immediately to show your new note.

3. Using Natural Language You are not limited to the UI. You can control the app with conversation. Type: “Create a note with the title ‘Watching Movies’ and the content ‘I’m gonna watch at least 2 movies this week’.”

ChatGPT recognizes the intent, calls the create_note tool in the background, and confirms the action. Watch as the widget automatically refreshes to include the new note in the list.

You have now successfully built and deployed a full-stack application that lives entirely inside a Large Language Model conversation.