Merge branch 'main' into carlos/bg-search

Author: carlosabadia

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()