diff --git a/developer-guides/mcp-setup-guides/chatgpt.mdx b/developer-guides/mcp-setup-guides/chatgpt.mdx new file mode 100644 index 00000000..4df51ead --- /dev/null +++ b/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" +--- + + +MCP support in ChatGPT is currently a beta feature. The interface and availability may change as OpenAI continues development. + + + +**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. + + +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. + + + ChatGPT settings showing Advanced Settings with Developer mode toggle + + +### 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. + + + Apps & Connectors tab with Create button highlighted + + +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). + + + New Connector form filled out with Firecrawl MCP details + + +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**. + + + ChatGPT chat input showing + menu expanded with More submenu and Firecrawl MCP option + + +## 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. + + + ChatGPT tool confirmation dialog showing Firecrawl MCP request + + +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. + + + Example of Firecrawl search results displayed in ChatGPT + diff --git a/docs.json b/docs.json index eb262306..ba2034d4 100755 --- a/docs.json +++ b/docs.json @@ -108,6 +108,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", diff --git a/images/integrations/mcp/chatgpt/apps-connectors-create.png b/images/integrations/mcp/chatgpt/apps-connectors-create.png new file mode 100644 index 00000000..8a8e0646 Binary files /dev/null and b/images/integrations/mcp/chatgpt/apps-connectors-create.png differ diff --git a/images/integrations/mcp/chatgpt/connector-form-filled.png b/images/integrations/mcp/chatgpt/connector-form-filled.png new file mode 100644 index 00000000..5b76baa0 Binary files /dev/null and b/images/integrations/mcp/chatgpt/connector-form-filled.png differ diff --git a/images/integrations/mcp/chatgpt/enable-developer-mode.gif b/images/integrations/mcp/chatgpt/enable-developer-mode.gif new file mode 100755 index 00000000..e09b717d Binary files /dev/null and b/images/integrations/mcp/chatgpt/enable-developer-mode.gif differ diff --git a/images/integrations/mcp/chatgpt/search-results-example.png b/images/integrations/mcp/chatgpt/search-results-example.png new file mode 100644 index 00000000..347808ad Binary files /dev/null and b/images/integrations/mcp/chatgpt/search-results-example.png differ diff --git a/images/integrations/mcp/chatgpt/select-firecrawl-mcp.png b/images/integrations/mcp/chatgpt/select-firecrawl-mcp.png new file mode 100644 index 00000000..961b2aa2 Binary files /dev/null and b/images/integrations/mcp/chatgpt/select-firecrawl-mcp.png differ diff --git a/images/integrations/mcp/chatgpt/tool-confirmation.png b/images/integrations/mcp/chatgpt/tool-confirmation.png new file mode 100644 index 00000000..ce862729 Binary files /dev/null and b/images/integrations/mcp/chatgpt/tool-confirmation.png differ