Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/ai_builder/integrations/ai_onboarding.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
88 changes: 72 additions & 16 deletions docs/ai_builder/integrations/mcp_installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.
2 changes: 1 addition & 1 deletion docs/ai_builder/integrations/mcp_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

This file was deleted.

This file was deleted.

Loading