{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"connect-mcp-tag","__idx":0},"children":["Connect MCP tag"]},{"$$mdtype":"Tag","name":"ConfigOptionRequirements","attributes":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["connect-mcp"]}," tag renders a button that allows users to connect to the MCP (Model Context Protocol) server through various MCP clients."," ","When clicked or hovered, it displays a dropdown menu."," ","The menu has options to connect via Cursor, VS Code, or Claude, copy the Claude Code or Codex CLI command, or copy the MCP configuration."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Before you begin"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Connect MCP button requires a properly configured Docs MCP server to function."," ","See the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/mcp"},"children":["MCP configuration documentation"]}," for setup instructions."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"syntax-and-usage","__idx":1},"children":["Syntax and usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["connect-mcp"]}," tag where you want the button to appear."]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The button opens a dropdown menu on hover with connection options."," ","Users can click to connect their editor or copy the configuration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"attributes","__idx":2},"children":["Attributes"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Attribute"},"children":["Attribute"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["placement"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the vertical placement of the dropdown menu relative to the button."," ","Accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["top"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},"."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bottom"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["alignment"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the horizontal alignment of the dropdown menu relative to the button."," ","Accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["end"]},"."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["start"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["options"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["array"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies which connection options to display and their order."," ","The first option is the main button, and the other options appear in the dropdown in the given order."," ","Accepts an array containing any combination of: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cursor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vscode"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["claude"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["claude-code"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["codex"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["copy"]},"."," ","The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["claude"]}," option opens claude.ai with the MCP server name and URL filled in."," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default:"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[\"cursor\", \"vscode\", \"claude\", \"claude-code\", \"codex\", \"copy\"]"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":3},"children":["Examples"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"basic-usage","__idx":4},"children":["Basic usage"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Connect MCP"]}," button with all default options:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-placement","__idx":5},"children":["Dropdown placement"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display the dropdown above the button:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"start","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"start","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp placement=\"top\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"dropdown-alignment","__idx":6},"children":["Dropdown alignment"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Align the dropdown to the end (right side) of the button:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"end","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"end","options":["cursor","vscode","claude","claude-code","codex","copy"]},"children":[]}],"rawContent":"{% connect-mcp alignment=\"end\" /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"display-specific-options","__idx":7},"children":["Display specific options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only the Cursor connection option:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["cursor"]},"children":[]}],"rawContent":"{% connect-mcp options=[\"cursor\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Display only the Copy option configuration:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy"]},"children":[]}],"rawContent":"{% connect-mcp options=[\"copy\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"option-order","__idx":8},"children":["Option order"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Make ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Copy MCP Configuration"]}," the main button and show the Cursor option in the dropdown:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy","cursor"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"bottom","alignment":"start","options":["copy","cursor"]},"children":[]}],"rawContent":"{% connect-mcp options=[\"copy\", \"cursor\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combined-attributes","__idx":9},"children":["Combined attributes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize multiple attributes:"]},{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"end","options":["vscode","copy"]},"children":[]},{"$$mdtype":"Tag","name":"MarkdocExample","attributes":{"renderDemo":false,"language":"markdoc","demoContent":[{"$$mdtype":"Tag","name":"ConnectMCP","attributes":{"placement":"top","alignment":"end","options":["vscode","copy"]},"children":[]}],"rawContent":"{% connect-mcp placement=\"top\" alignment=\"end\" options=[\"vscode\", \"copy\"] /%}\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"best-practices","__idx":10},"children":["Best practices"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Use placement strategically"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placement=\"top\""]}," when the button appears near the bottom of the page to prevent the dropdown from extending beyond the viewport."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Choose appropriate alignment"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignment=\"start\""]}," for inline usage in content to align the dropdown with the left side of the button."," ","Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alignment=\"end\""]}," for navbar or right-aligned layouts to align the dropdown with the right side of the button."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Display relevant options"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}," array to display only the connection methods relevant to your audience."," ","If your users primarily use Cursor, consider showing only that option to reduce cognitive load."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":11},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/config/mcp"},"children":["MCP configuration"]}]}," - Configure the MCP server and Connect MCP button visibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/customization/mcp-server"},"children":["Model Context Protocol server"]}]}," - Learn about MCP servers and integration with AI tools"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/learn/markdoc"},"children":["Markdoc overview for technical writers"]}]}," - Learn how to use Markdoc in your documentation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs/realm/content/markdoc-tags"},"children":["Markdoc tags"]}]}," - See the full list of supported Markdoc tags"]}]}]},"frontmatter":{"products":["Revel","Reef","Realm"],"plans":["Pro","Enterprise","Enterprise+"]},"tagList":["admonition","configOptionRequirements","connect-mcp","markdoc-example","table"],"title":"Connect MCP tag","lastModified":"2026-10-07T09:46:14.000Z"}