Merge pull request #171 from leonardogrig/feat/ChatGPT-MCP-Guide

Add ChatGPT MCP setup guide and related images

Author: developersdigest

developer-guides/mcp-setup-guides/chatgpt.mdx

@@ -0,0 +1,104 @@
+---
+title: "MCP Web Search & Scrape in ChatGPT"
+description: "Add web scraping and search to ChatGPT in 2 minutes"
+---
+
+<Note>
+MCP support in ChatGPT is currently a beta feature. The interface and availability may change as OpenAI continues development.
+</Note>
+
+<Warning>
+**Availability:** Developer mode with MCP connectors is not available on the Free tier and requires a paid ChatGPT subscription. Availability and features vary by plan and region. See [OpenAI's documentation on Developer Mode](https://help.openai.com/en/articles/12584461-developer-mode-apps-and-full-mcp-connectors-in-chatgpt-beta) for current availability and setup instructions.
+</Warning>
+
+Add web scraping and search capabilities to ChatGPT with Firecrawl MCP.
+
+## Quick Setup
+
+### 1. Get Your API Key
+
+Sign up at [firecrawl.dev/app/api-keys](https://www.firecrawl.dev/app/api-keys) and copy your API key.
+
+### 2. Enable Developer Mode
+
+Open ChatGPT settings by clicking your username in the bottom left corner, or navigate directly to [chatgpt.com/#settings](https://chatgpt.com/#settings).
+
+In the settings modal, scroll to the bottom and select **Advanced Settings**. Toggle **Developer mode** to ON.
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/enable-developer-mode.gif" alt="ChatGPT settings showing Advanced Settings with Developer mode toggle" />
+</Frame>
+
+### 3. Create the Connector
+
+With Developer mode enabled, go to the **Apps & Connectors** tab in the same settings modal.
+
+Click the **Create** button in the top right corner.
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/apps-connectors-create.png" alt="Apps & Connectors tab with Create button highlighted" />
+</Frame>
+
+Fill in the connector details:
+
+- **Name:** `Firecrawl MCP`
+- **Description:** `Web scraping, crawling, search, and content extraction` (optional)
+- **MCP Server URL:** `https://mcp.firecrawl.dev/YOUR_API_KEY_HERE/v2/mcp`
+- **Authentication:** `None`
+
+Replace `YOUR_API_KEY_HERE` in the URL with your actual [Firecrawl API key](https://www.firecrawl.dev/app/api-keys).
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/connector-form-filled.png" alt="New Connector form filled out with Firecrawl MCP details" />
+</Frame>
+
+Check the **"I understand and want to continue"** checkbox, then click **Create**.
+
+### 4. Verify Setup
+
+Go back to the main ChatGPT interface. You should see **Developer mode** displayed, indicating that MCP connectors are active.
+
+If you do not see Developer mode, reload the page. If it still does not appear, open settings again and verify that Developer mode is toggled ON under Advanced Settings.
+
+### 5. Access Firecrawl Tools
+
+To use Firecrawl in a conversation, click the **+** button in the chat input, then select **More** and choose **Firecrawl MCP**.
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/select-firecrawl-mcp.png" alt="ChatGPT chat input showing + menu expanded with More submenu and Firecrawl MCP option" />
+</Frame>
+
+## Quick Demo
+
+With Firecrawl MCP selected, try these prompts:
+
+**Search:**
+```
+Search for the latest React Server Components updates
+```
+
+**Scrape:**
+```
+Scrape firecrawl.dev and tell me what it does
+```
+
+**Get docs:**
+```
+Scrape the Vercel documentation for edge functions and summarize it
+```
+
+## Tool Confirmation
+
+When ChatGPT uses the Firecrawl MCP tools, you will see a confirmation prompt asking for your approval.
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/tool-confirmation.png" alt="ChatGPT tool confirmation dialog showing Firecrawl MCP request" />
+</Frame>
+
+You can check **"Remember for this conversation"** to avoid repeated confirmations during the same chat session. This security measure is implemented by OpenAI to ensure MCP tools do not perform unintended actions.
+
+Once confirmed, ChatGPT will execute the request and return the results.
+
+<Frame>
+  <img src="/images/integrations/mcp/chatgpt/search-results-example.png" alt="Example of Firecrawl search results displayed in ChatGPT" />
+</Frame>

docs.json

@@ -113,6 +113,7 @@
                         "group": "MCP Setup Guides",
                         "icon": "plug",
                         "pages": [
+                          "developer-guides/mcp-setup-guides/chatgpt",
                           "developer-guides/mcp-setup-guides/claude-code",
                           "developer-guides/mcp-setup-guides/cursor",
                           "developer-guides/mcp-setup-guides/windsurf",