diff --git a/docs/ai_builder/integrations/ai_onboarding.md b/docs/ai_builder/integrations/ai_onboarding.md index 16dc484b96f..009d2a2835a 100644 --- a/docs/ai_builder/integrations/ai_onboarding.md +++ b/docs/ai_builder/integrations/ai_onboarding.md @@ -102,7 +102,7 @@ The index groups docs by section and links to agent-friendly Markdown assets. Use MCP when your editor or agent can call tools for structured documentation and component lookup: ```text -https://mcp.reflex.dev/mcp +https://build.reflex.dev/mcp ``` See the [MCP overview](/docs/ai/integrations/mcp-overview/) and [MCP installation](/docs/ai/integrations/mcp-installation/) guides for details. diff --git a/docs/ai_builder/integrations/mcp_installation.md b/docs/ai_builder/integrations/mcp_installation.md index 41fb1d21639..6e9baf1f4c7 100644 --- a/docs/ai_builder/integrations/mcp_installation.md +++ b/docs/ai_builder/integrations/mcp_installation.md @@ -12,7 +12,7 @@ To use the Reflex MCP integration, you'll need to configure your AI assistant or ## Prerequisites -- An MCP-compatible AI tool (Claude Desktop, Windsurf, Codex, etc.) +- An MCP-compatible AI tool (Claude Code, Claude Desktop, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode, Windsurf, etc.) - Internet connection to access the hosted MCP server - Valid Reflex account for OAuth 2.1 authentication @@ -27,49 +27,105 @@ The Reflex MCP server uses OAuth 2.1 protocol for secure authentication. You'll Add the Reflex MCP server to Claude Code by running: ```bash -claude mcp add --transport http reflex https://mcp.reflex.dev/mcp +claude mcp add --transport http reflex https://build.reflex.dev/mcp ``` Then authenticate by running the `/mcp` command inside Claude Code and following the login steps in your browser. Authentication tokens are stored securely and refreshed automatically. See the [Claude Code MCP documentation](https://code.claude.com/docs/en/mcp) for more details. ### Claude Desktop -Add the Reflex MCP server to your Claude Desktop configuration by editing your configuration file: +Claude Desktop pulls remote MCP servers from your Claude account's connectors. Go to [claude.ai](https://claude.ai) → **Settings** → **Connectors** → **Add custom connector**, enter `https://build.reflex.dev/mcp` as the URL, and complete the OAuth login. The connector will then be available in Claude Desktop after you sign in. See the [custom connectors guide](https://support.claude.com/en/articles/11175166-get-started-with-custom-connectors-using-remote-mcp) for details and plan availability. + +### Codex + +Add the Reflex MCP server to Codex by running: + +```bash +codex mcp add reflex --url https://build.reflex.dev/mcp +``` + +See the [Codex MCP documentation](https://developers.openai.com/codex/mcp) for more details. + +### Cursor + +[Click here to install the Reflex MCP server in Cursor](cursor://anysphere.cursor-deeplink/mcp/install?name=reflex&config=eyJ1cmwiOiJodHRwczovL2J1aWxkLnJlZmxleC5kZXYvbWNwIn0=), or edit (or create) `~/.cursor/mcp.json` for a global config, or `.cursor/mcp.json` in your project root for a project-specific config: ```json { "mcpServers": { "reflex": { - "command": "npx", - "args": ["-y", "mcp-remote", "https://mcp.reflex.dev/mcp"] + "url": "https://build.reflex.dev/mcp" } } } ``` -### Windsurf/Cascade +Open Cursor settings under **MCP & Integrations** to verify the server is connected and complete OAuth login. See the [Cursor MCP documentation](https://cursor.com/docs/context/mcp) for more details. -Create a `.vscode/mcp.json` file in your project root: +### Gemini CLI + +Add the Reflex MCP server to `~/.gemini/settings.json`: ```json { "mcpServers": { "reflex": { - "serverType": "http", - "url": "https://mcp.reflex.dev/mcp" + "httpUrl": "https://build.reflex.dev/mcp" } } } ``` -### Codex +See the [Gemini CLI MCP documentation](https://google-gemini.github.io/gemini-cli/docs/tools/mcp-server.html) for more details. + +### GitHub Copilot + +Create a `.vscode/mcp.json` file in your project root (or open **MCP: Open User Configuration** from the VS Code command palette for a global config): + +```json +{ + "servers": { + "reflex": { + "type": "http", + "url": "https://build.reflex.dev/mcp" + } + } +} +``` -Add this configuration to your `~/.codex/config.toml` file: +After saving, start the server from the inline action above the entry in `mcp.json`, then complete the OAuth login when prompted. See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) for more details. -```toml -[mcp_servers.reflex] -command = "npx" -args = ["-y", "mcp-remote", "https://mcp.reflex.dev/mcp"] +### OpenCode + +Add the Reflex MCP server to your `opencode.json` (project) or `~/.config/opencode/opencode.json` (global): + +```json +{ + "$schema": "https://opencode.ai/config.json", + "mcp": { + "reflex": { + "type": "remote", + "url": "https://build.reflex.dev/mcp", + "enabled": true + } + } +} +``` + +See the [OpenCode MCP documentation](https://opencode.ai/docs/mcp-servers/) for more details. + +### Windsurf + +Edit (or create) `~/.codeium/windsurf/mcp_config.json` and add the Reflex server: + +```json +{ + "mcpServers": { + "reflex": { + "serverUrl": "https://build.reflex.dev/mcp" + } + } +} ``` -Note: Codex requires MCP servers to communicate over stdio. The `mcp-remote` package bridges the connection to the HTTP-based Reflex MCP server. +After saving, open Cascade and click the refresh icon in the MCP toolbar to load the new server. See the [Windsurf MCP documentation](https://docs.windsurf.com/windsurf/cascade/mcp) for more details. diff --git a/docs/ai_builder/integrations/mcp_overview.md b/docs/ai_builder/integrations/mcp_overview.md index f75b97cf97f..0fa1981660a 100644 --- a/docs/ai_builder/integrations/mcp_overview.md +++ b/docs/ai_builder/integrations/mcp_overview.md @@ -10,7 +10,7 @@ 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. +The Reflex MCP server is deployed at `https://build.reflex.dev/mcp` and provides access to component documentation and Reflex documentation through standardized MCP tools. ## Available Tools diff --git a/packages/integrations-docs/src/integrations_docs/docs/mcp_installation.md b/packages/integrations-docs/src/integrations_docs/docs/mcp_installation.md deleted file mode 100644 index b5267837069..00000000000 --- a/packages/integrations-docs/src/integrations_docs/docs/mcp_installation.md +++ /dev/null @@ -1,65 +0,0 @@ -# Installation - -```python exec -import reflex as rx -``` - -```md alert warning -# The Reflex MCP integration is currently only available for enterprise customers. Please [book a demo](https://reflex.dev/pricing/) to discuss access. -``` - -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", "mcp-remote", "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", "mcp-remote", "https://mcp.reflex.dev/mcp"] -``` - -Note: Codex requires MCP servers to communicate over stdio. The `mcp-remote` package bridges the connection to the HTTP-based Reflex MCP server. diff --git a/packages/integrations-docs/src/integrations_docs/docs/mcp_overview.md b/packages/integrations-docs/src/integrations_docs/docs/mcp_overview.md deleted file mode 100644 index f75b97cf97f..00000000000 --- a/packages/integrations-docs/src/integrations_docs/docs/mcp_overview.md +++ /dev/null @@ -1,21 +0,0 @@ -# Overview - -```python exec -import reflex as rx -``` - -```md alert warning -# The Reflex MCP integration is currently only available for enterprise customers. Please [book a demo](https://reflex.dev/pricing/) to discuss access. -``` - -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.