Add comprehensive MCP integration documentation (#1549)

* Add comprehensive MCP integration documentation

- Create docs/ai_builder/integrations/mcp.md with complete MCP integration guide
- Include sections: introduction, installation, authentication, IDE integrations, best practices, troubleshooting
- Add support for Claude Desktop, Windsurf/Cascade, Codex, and other MCP clients
- Update sidebar navigation to include MCP alongside GitHub and database integrations
- Document Reflex MCP server endpoints and configuration examples

Fixes ENG-6748

Co-Authored-By: [email protected] <[email protected]>

* Fix MCP documentation with correct server URL and authentication

- Update server URL to https://mcp.reflex.dev/mcp
- Correct authentication to OAuth 2.1 protocol
- Remove references to SSE endpoints and local repos
- Update all IDE configuration examples with correct endpoint
- Fix spacing issue in MCP protocol description

Addresses feedback from @adhami3310 on PR #1549

Co-Authored-By: [email protected] <[email protected]>

* Fix remaining incorrect URLs in troubleshooting section

- Update server status URLs to https://mcp.reflex.dev/mcp
- Remove references to unsupported SSE connections
- Update troubleshooting solutions to reflect OAuth 2.1 authentication

Completes corrections from @adhami3310 feedback on PR #1549

Co-Authored-By: [email protected] <[email protected]>

* Simplify MCP documentation per GitHub feedback

- Remove all spacing elements (rx.box height elements)
- Remove hardcoded examples and detailed explanations
- Remove entire Best Practices and Troubleshooting sections
- Remove Other MCP Clients table section
- Simplify Available Tools section to just mention capabilities
- Add link to official MCP documentation
- Keep only essential installation and IDE configuration info

Addresses all GitHub comments from @adhami3310 on PR #1549

Co-Authored-By: [email protected] <[email protected]>

* Add enterprise section for on-premises deployment

- Add Enterprise Use section mentioning on-prem deployment availability
- Include link to book demo at https://reflex.dev/pricing/
- Addresses GitHub comment from @adhami3310 on PR #1549

Co-Authored-By: [email protected] <[email protected]>

* Add MCP as top-level section in AI Builder navigation

- Add MCP sidebar category alongside Learn in AI Builder
- Update sidebar content handling to support multiple sections
- Use 'plug' icon for MCP section
- Addresses GitHub comment from @adhami3310 on PR #1549

The MCP section now appears at the same hierarchical level as Learn
in the AI Builder navigation, making it easily discoverable.

Co-Authored-By: [email protected] <[email protected]>

* Restructure MCP sidebar: remove from Learn section, add Overview/Installation subsections

- Remove MCP from Learn section's Integrations to prevent duplication
- Create dedicated get_sidebar_items_mcp() function with Overview and Installation subsections
- Update sidebar.py to use mcp_items instead of ai_builder_overview_items[3]
- Add clear Overview section header in MCP documentation
- Addresses GitHub PR feedback to ensure MCP only appears in its own section

Co-Authored-By: [email protected] <[email protected]>

* Split MCP documentation into separate overview and installation articles

- Create mcp_overview.md with MCP introduction, available tools, and enterprise info
- Create mcp_installation.md with prerequisites, authentication, and IDE integration guides
- Update sidebar to show one 'MCP Integration' section containing both articles
- Remove original mcp.md file to avoid duplication
- Addresses GitHub comment requesting articles under one section instead of subsections

Co-Authored-By: [email protected] <[email protected]>

* Fix broken MCP reference in sidebar causing CI failures

- Update ai_builder_pages.integrations.mcp.path to mcp_overview.path
- Update hardcoded path from /mcp to /mcp-overview
- Resolves AttributeError preventing reflex export from completing

Co-Authored-By: [email protected] <[email protected]>

* Update page titles from 'MCP Overview/Installation' to 'Overview/Installation' per GitHub feedback

Co-Authored-By: [email protected] <[email protected]>

* add index for MCP content

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>
Co-authored-by: Ahmad Hakim <[email protected]>

Author: 3 people

docs/ai_builder/integrations/mcp_installation.md

@@ -0,0 +1,65 @@
+# Installation
+
+```python exec
+import reflex as rx
+```
+
+To use the Reflex MCP integration, you'll need to configure your AI assistant or coding tool to connect to the Reflex MCP server. No additional Python packages are required on your local machine - the server is hosted and ready to use.
+
+## Prerequisites
+
+- An MCP-compatible AI tool (Claude Desktop, Windsurf, Codex, etc.)
+- Internet connection to access the hosted MCP server
+- Valid Reflex account for OAuth 2.1 authentication
+
+## Authentication
+
+The Reflex MCP server uses OAuth 2.1 protocol for secure authentication. You'll need a valid Reflex account, and authentication is handled automatically through your MCP client configuration when you provide your Reflex credentials.
+
+## IDE and Coding Assistant Integration
+
+### Claude Desktop
+
+Add the Reflex MCP server to your Claude Desktop configuration by editing your configuration file:
+
+```json
+{
+  "mcpServers": {
+    "reflex": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-proxy"],
+      "env": {
+        "MCP_PROXY_URL": "https://mcp.reflex.dev/mcp"
+      }
+    }
+  }
+}
+```
+
+### Windsurf/Cascade
+
+Create a `.vscode/mcp.json` file in your project root:
+
+```json
+{
+  "mcpServers": {
+    "reflex": {
+      "serverType": "http",
+      "url": "https://mcp.reflex.dev/mcp"
+    }
+  }
+}
+```
+
+### Codex
+
+Add this configuration to your `~/.codex/config.toml` file:
+
+```toml
+[mcp_servers.reflex]
+command = "npx"
+args = ["-y", "@modelcontextprotocol/server-proxy"]
+env = { "MCP_PROXY_URL" = "https://mcp.reflex.dev/mcp" }
+```
+
+Note: Codex requires MCP servers to communicate over stdio. The `@modelcontextprotocol/server-proxy` adapter bridges the connection to the HTTP-based Reflex MCP server.

docs/ai_builder/integrations/mcp_overview.md

@@ -0,0 +1,17 @@
+# Overview
+
+```python exec
+import reflex as rx
+```
+
+The Reflex [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) integration provides AI assistants and coding tools with structured access to Reflex framework documentation and component information. This enables intelligent assistance while developing Reflex applications.
+
+The Reflex MCP server is deployed at `https://mcp.reflex.dev/mcp` and provides access to component documentation and Reflex documentation through standardized MCP tools.
+
+## Available Tools
+
+The Reflex MCP server provides tools for accessing component documentation and Reflex documentation through standardized MCP capabilities.
+
+## Enterprise Use
+
+For enterprise customers requiring on-premises deployment of the Reflex MCP server, please [book a demo](https://reflex.dev/pricing/) to discuss your requirements.

pcweb/components/docpage/sidebar/sidebar.py

@@ -8,7 +8,7 @@
 from pcweb.constants import ENTERPRISE_DOCS_URL
 from pcweb.styles.colors import c_color
 
-from .sidebar_items.ai import ai_builder_overview_items
+from .sidebar_items.ai import ai_builder_overview_items, mcp_items
 from .sidebar_items.component_lib import component_lib, graphing_libs
 from .sidebar_items.enterprise import (
     enterprise_items,
@@ -383,6 +383,7 @@ def sidebar_comp(
     recipes_index: list[int],
     enterprise_usage_index: list[int],
     enterprise_component_index: list[int],
+    mcp_index: list[int],
     #
     cli_ref_index: list[int],
     ai_builder_overview_index: list[int],
@@ -420,6 +421,12 @@ def sidebar_comp(
                         "bot",
                         0,
                     ),
+                    sidebar_category(
+                        "MCP",
+                        "/docs/ai-builder/integrations/mcp-overview",
+                        "plug",
+                        1,
+                    ),
                     class_name="flex flex-col items-start gap-1 w-full list-none",
                 ),
                 # If the path doesn't start with /docs/cloud, check for general docs
@@ -489,15 +496,34 @@ def sidebar_comp(
             ),
             rx.cond(  # pyright: ignore [reportCallIssue]
                 rx.State.router.page.path.startswith("/docs/ai-builder/"),
-                rx.el.ul(
-                    create_sidebar_section(
-                        "Overview",
-                        ai_builder_pages.overview.what_is_reflex_build.path,
-                        ai_builder_overview_items,
-                        ai_builder_overview_index,
-                        url,
+                rx.match(  # pyright: ignore [reportCallIssue]
+                    SidebarState.sidebar_index,
+                    (
+                        0,
+                        rx.el.ul(
+                            create_sidebar_section(
+                                "Overview",
+                                ai_builder_pages.overview.what_is_reflex_build.path,
+                                ai_builder_overview_items,
+                                ai_builder_overview_index,
+                                url,
+                            ),
+                            class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                        ),
+                    ),
+                    (
+                        1,
+                        rx.el.ul(
+                            create_sidebar_section(
+                                "MCP Integration",
+                                ai_builder_pages.integrations.mcp_overview.path,
+                                mcp_items,
+                                mcp_index,
+                                url,
+                            ),
+                            class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
+                        ),
                     ),
-                    class_name="flex flex-col items-start gap-6 p-[0px_1rem_0px_0.5rem] w-full list-none list-style-none",
                 ),
                 rx.cond(  # pyright: ignore [reportCallIssue]
                     rx.State.router.page.path.startswith("/docs/"),
@@ -643,6 +669,7 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
 
     cli_ref_index = calculate_index(cli_ref, url)
     ai_builder_overview_index = calculate_index(ai_builder_overview_items, url)
+    mcp_index = calculate_index(mcp_items, url)
 
     return rx.box(
         sidebar_comp(
@@ -659,6 +686,7 @@ def sidebar(url=None, width: str = "100%") -> rx.Component:
             enterprise_component_index=enterprise_component_index,
             ai_builder_overview_index=ai_builder_overview_index,
             cli_ref_index=cli_ref_index,
+            mcp_index=mcp_index,
             #
             width=width,
         ),

pcweb/components/docpage/sidebar/sidebar_items/ai.py

@@ -45,4 +45,19 @@ def get_sidebar_items_ai_builder_overview():
     ]
 
 
+def get_sidebar_items_mcp():
+    from pcweb.pages.docs import ai_builder
+
+    return [
+        create_item(
+            "MCP Integration",
+            children=[
+                ai_builder.integrations.mcp_overview,
+                ai_builder.integrations.mcp_installation,
+            ],
+        ),
+    ]
+
+
 ai_builder_overview_items = get_sidebar_items_ai_builder_overview()
+mcp_items = get_sidebar_items_mcp()