docs: Document radon-mcp (#1906)

latekvo · web-flow · commit 8b936a5e48ae · 2026-02-26T16:26:22.000+01:00
This PR documents `radon-mcp` which allows our users to connect their agents to our Radon IDE tooling. It's a proxy for all the MCP tools we already expose (8 of them at the time of writing this including the to-be-released ones). **NOTE:** The seemingly unrelated changed are due to `.mdx` documents being automatically formatted differently than `.md` files. **NOTE:** I wanted to use `<details>` for the collapsible sections, but these tags turned out severely offputting, and due to lack of a better alternative i added a new component. Here are the versions i tested all the configs on: | CLI | Version | |---|---| | Claude Code | 2.1.50 | | Codex | 0.104.0 | | OpenCode | 1.2.0 | | Gemini CLI | 0.29.5 | | Goose | 1.25.0 | | Amp | 0.0.1771838262 | | Kiro CLI | 1.26.2 | --- All commands i used for testing: <details> <summary>Claude Code</summary> ```sh $ claude mcp list Checking MCP server health... radon: npx -y radon-mcp@latest /Users/ignacylatka/dev/radon-ide - ✓ Connected ``` </details> <details> <summary>Gemini CLI</summary> ```sh $ gemini mcp list Configured MCP servers: ✓ radon: npx -y radon-mcp@latest /Users/ignacylatka/dev/radon-ide (stdio) - Connected ``` </details> <details> <summary>Codex</summary> ```sh $ codex mcp list Name Command Args Env Cwd Status Auth radon npx -y radon-mcp@latest /Users/ignacylatka/dev/radon-ide - - enabled Unsupported ``` </details> <details> <summary>OpenCode</summary> ```sh $ opencode mcp list ┌ MCP Servers │ ● ✓ radon connected │ npx -y radon-mcp@latest /Users/ignacylatka/dev/expo-storybook │ ● ✓ linear connected (OAuth) │ https://mcp.linear.app/mcp │ └ 2 server(s) ``` </details> <details> <summary>Goose</summary> Can't see a built in "list loaded MCPs" command other than: `goose configure > settings > configure tools`, which lists all loaded tools. ```sh $ goose configure This will update your existing config files if you prefer, you can edit them directly at /Users/ignacylatka/.config/goose ┌ goose-configure │ ◇ What would you like to configure? │ goose settings │ ◇ What setting would you like to configure? │ Tool Permission │ ◇ Choose an extension to configure tools │ Radon │ ``` </details> <details> <summary>Amp</summary> ```sh $ amp mcp list Global ~/.config/amp/settings.json radon command npx -y radon-mcp@latest /Users/ignacylatka/dev/radon-ide ``` </details> <details> <summary>Kiro CLI</summary> ```sh $ kiro-cli mcp list 🤖 default: kiro_default • radon npx $ kiro-cli mcp status --name radon Scope : 🤖 default Agent : kiro_default Command : npx Timeout : 120000 ms Disabled: false Env Vars: (none) ``` </details>
diff --git a/packages/docs/docs/features/radon-ai.mdx b/packages/docs/docs/features/radon-ai.mdx
@@ -4,6 +4,8 @@ title: Radon AI
 sidebar_position: 11
 ---
 
+import CollapsibleItem from "@site/src/components/CollapsibleItem";
+
 Radon AI is a MCP server that provides a set of tools that enhances your editor’s Agent.
 It provides up-to-date knowledge of the React Native ecosystem, access to a comprehensive set of debugging data that is otherwise unavailable, and the ability to interact directly with your app.
 
@@ -12,7 +14,7 @@ We index most React Native libraries along with their relevant documentation, ve
 Our knowledge database is updated daily to provide the most up-to-date information.
 
 <video autoPlay loop width="700" controls className="shadow-image">
-  <source src="/video/radon_ai_query_database.mp4" type="video/mp4"/>
+  <source src="/video/radon_ai_query_database.mp4" type="video/mp4" />
 </video>
 
 ## Pre-requisites
@@ -29,21 +31,21 @@ To access `agent mode` in Visual Studio Code use `Ctrl + Shift + I` or `Cmd + Sh
 
 Alternatively, open VSCode Command Palette (`Ctrl + Shift + P` or `Cmd + Shift + P`) and type `Chat: Open Chat`, then select `agent mode`.
 
-<img width="550" src="/img/docs/ai_vscode_agent_mode.png" className="shadow-image"/>
+<img width="550" src="/img/docs/ai_vscode_agent_mode.png" className="shadow-image" />
 
 To adjust the configuration of the MCP tools exposed by Radon - choose `Configure Tools...` menu.
 
-<img width="550" src="/img/docs/ai_vscode_choose_tools.png" className="shadow-image"/>
+<img width="550" src="/img/docs/ai_vscode_choose_tools.png" className="shadow-image" />
 
 There you can adjust which tools are enabled or disable the Radon AI MCP toolset completely.
 
-<img width="600" src="/img/docs/ai_vscode_mcp_tools.png" className="shadow-image"/>
+<img width="600" src="/img/docs/ai_vscode_mcp_tools.png" className="shadow-image" />
 
 ## Usage in Cursor
 
 Radon AI assistant integrates with Cursor's `agent mode`.
 
-<img width="550" src="/img/docs/ai_cursor_chat_response.png" className="shadow-image"/>
+<img width="550" src="/img/docs/ai_cursor_chat_response.png" className="shadow-image" />
 
 The Radon IDE automatically registers Radon AI tools in Cursor.
 You configure the Radon AI MCP tools from Cursor Settings. There, you can choose which tools are enabled or disable the MCP Radon toolset completely.
@@ -53,10 +55,131 @@ You configure the Radon AI MCP tools from Cursor Settings. There, you can choose
 3. Find the `MCP Tools` section.
 4. Select `Radon AI` from the list of available toolsets.
 
-<img width="550" src="/img/docs/ai_cursor_mcp_settings.png" className="shadow-image"/>
+<img width="550" src="/img/docs/ai_cursor_mcp_settings.png" className="shadow-image" />
 
 Alternatively, you can type and run `View: Open MCP Settings` from the Command Palette (`Ctrl + Shift + P` or `Cmd + Shift + P`).
 
+## Usage in external Agent CLIs
+
+For tools that don't read VS Code or Cursor MCP configurations, you can manually connect to Radon IDE's MCP server using the [`radon-mcp`](https://www.npmjs.com/package/radon-mcp) proxy package. The proxy locates the correct MCP server instance running in Radon IDE for a given workspace.
+
+The workspace path argument is optional. If omitted, the proxy uses the current working directory. If you run the agent from your project folder, you don't need to supply it.
+
+#### Installation instructions:
+
+<CollapsibleItem title="Claude Code">
+
+Run `claude mcp add --transport stdio radon -- npx -y radon-mcp@latest /path/to/your/react-native/project`, or add the following to your `.mcp.json` or `~/.claude.json`:
+
+```json
+{
+  "mcpServers": {
+    "radon": {
+      "command": "npx",
+      "args": ["-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+    }
+  }
+}
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="Codex">
+
+Run `codex mcp add radon -- npx -y radon-mcp@latest /path/to/your/react-native/project`, or add the following to `~/.codex/config.toml`:
+
+```toml
+[mcp_servers.radon]
+command = "npx"
+args = ["-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="OpenCode">
+
+Add the following to your `opencode.json` or `opencode.jsonc`:
+
+```json
+{
+  "mcp": {
+    "radon": {
+      "type": "local",
+      "command": ["npx", "-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+    }
+  }
+}
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="Gemini CLI">
+
+Run `gemini mcp add radon npx -y radon-mcp@latest /path/to/your/react-native/project`, or add the following to `.gemini/settings.json` (project scope) or `~/.gemini/settings.json` (user scope):
+
+```json
+{
+  "mcpServers": {
+    "radon": {
+      "command": "npx",
+      "args": ["-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+    }
+  }
+}
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="Goose">
+
+Add the following to `~/.config/goose/config.yaml`:
+
+```yaml
+extensions:
+  radon:
+    name: Radon
+    cmd: npx
+    args: [-y, radon-mcp@latest, /path/to/your/react-native/project]
+    enabled: true
+    type: stdio
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="Amp">
+
+Run `amp mcp add radon -- npx -y radon-mcp@latest /path/to/your/react-native/project`, or add the following to `~/.config/amp/settings.json`:
+
+```json
+{
+  "amp.mcpServers": {
+    "radon": {
+      "command": "npx",
+      "args": ["-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+    }
+  }
+}
+```
+
+</CollapsibleItem>
+
+<CollapsibleItem title="Kiro CLI">
+
+Run `kiro-cli mcp add --name radon --command npx --args "-y radon-mcp@latest /path/to/your/react-native/project"`, or add the following to `~/.kiro/settings/mcp.json` (global) or `<project-root>/.kiro/settings/mcp.json` (workspace):
+
+```json
+{
+  "mcpServers": {
+    "radon": {
+      "command": "npx",
+      "args": ["-y", "radon-mcp@latest", "/path/to/your/react-native/project"]
+    }
+  }
+}
+```
+
+</CollapsibleItem>
+
 ## Available tools
 
 The AI models automatically discover and invoke tools when they decide it will be useful. You can query the agent to use the tool by mentioning it's name in the prompt. These are currently available tools in Radon AI:
@@ -69,7 +192,7 @@ The AI models automatically discover and invoke tools when they decide it will b
 - `view_component_tree` Displays the component tree of the running app. This tool allows the agent to gain a broad understanding of the project's structure.
 
 <video autoPlay loop width="700" controls className="shadow-image">
-  <source src="/video/radon_ai_preview.mp4" type="video/mp4"/>
+  <source src="/video/radon_ai_preview.mp4" type="video/mp4" />
 </video>
 
 ## Limitations
diff --git a/packages/docs/src/components/CollapsibleItem/index.tsx b/packages/docs/src/components/CollapsibleItem/index.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import { useCollapsible, Collapsible } from "@docusaurus/theme-common";
+import styles from "./styles.module.css";
+import PlusIcon from "../PlusIcon";
+import MinusIcon from "../MinusIcon";
+
+interface CollapsibleItemProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export default function CollapsibleItem({
+  title,
+  children,
+  defaultOpen = false,
+}: CollapsibleItemProps) {
+  const { collapsed, setCollapsed } = useCollapsible({
+    initialState: !defaultOpen,
+  });
+
+  return (
+    <div className={styles.collapsible}>
+      <button
+        className={styles.header}
+        onClick={() => {
+          setCollapsed(!collapsed);
+        }}
+        type="button">
+        {title}
+        {collapsed ? <PlusIcon /> : <MinusIcon />}
+      </button>
+      <Collapsible
+        lazy={false}
+        collapsed={collapsed}
+        disableSSRStyle
+        onCollapseTransitionEnd={setCollapsed}>
+        <div className={styles.content}>{children}</div>
+      </Collapsible>
+    </div>
+  );
+}
diff --git a/packages/docs/src/components/CollapsibleItem/styles.module.css b/packages/docs/src/components/CollapsibleItem/styles.module.css
@@ -0,0 +1,32 @@
+.collapsible {
+  border-bottom: 1px solid var(--radon-border-grid-subtle);
+  margin-bottom: 0.5rem;
+}
+
+.collapsible button {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  width: 100%;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
+  user-select: none;
+  gap: 10px;
+}
+
+.content {
+  padding: 8px 16px;
+}
diff --git a/packages/docs/src/components/FaqList/FaqItem/index.tsx b/packages/docs/src/components/FaqList/FaqItem/index.tsx
@@ -1,9 +1,8 @@
-import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import { useRef } from "react";
-import PlusIcon from "../PlusIcon";
-import MinusIcon from "../MinusIcon";
+import PlusIcon from "../../PlusIcon";
+import MinusIcon from "../../MinusIcon";
 
 export interface ActiveItem {
   index: number;
diff --git a/packages/docs/src/components/MinusIcon/index.tsx b/packages/docs/src/components/MinusIcon/index.tsx
diff --git a/packages/docs/src/components/PlusIcon/index.tsx b/packages/docs/src/components/PlusIcon/index.tsx
