drio
Open app

codemirror-mcp

Source

CodeMirror extension to hook up a Model Context Provider (MCP)

Catalog onlyCatalog onlySTDIO

Overview

codemirror-mcp is a CodeMirror extension that implements the Model Context Protocol (MCP) for resource mentions and prompt commands, enhancing the coding experience with autocomplete and visual styling features.

To use codemirror-mcp, install it via npm or pnpm, and integrate it into your CodeMirror editor setup by importing the necessary modules and configuring the MCP extension with your WebSocket transport.

  • Resource Completion: Autocomplete for @resource mentions - Resource Decorations: Visual styling for @resource mentions with click handling - Prompt Completion: Autocomplete for /prompt commands - Theme Support: Customizable styling
  1. Enhancing code editors with resource management capabilities.
  2. Streamlining the coding process with autocomplete features for resources and commands.
  3. Providing a visually enriched coding environment with clickable resource mentions.

Add to your AI client

Use these steps to connect codemirror-mcp in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "codemirror-mcp-marimo-team": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "codemirror-mcp-marimo-team": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "codemirror-mcp-marimo-team": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "codemirror-mcp-marimo-team": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "codemirror-mcp-marimo-team": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "codemirror-mcp-marimo-team": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-codemirror-mcp-marimo-team"
      ]
    }
  }
}

FAQ

What is the Model Context Protocol (MCP)?

MCP is a protocol designed to enhance the interaction with resources in code editors, allowing for better resource management and command execution.

How do I install codemirror-mcp?

You can install it using npm or pnpm with the command: `npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk`.

Can I customize the theme?

Yes! codemirror-mcp supports customizable styling to fit your preferences.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":839,"uuid":"a859b7e1-03d9-46c1-a07d-61f9f4d53188","name":"codemirror-mcp","title":"codemirror-mcp","description":"CodeMirror extension to hook up a Model Context Provider (MCP)","avatar_url":"https://avatars.githubusercontent.com/u/98563464?v=4","created_at":"2025-01-28T02:14:03.168Z","updated_at":"2025-02-23T07:20:28.202Z","status":"created","author_name":"marimo-team","author_avatar_url":"https://avatars.githubusercontent.com/u/98563464?v=4","tags":"[]","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/marimo-team/codemirror-mcp","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"70\",\"license\":\"Apache-2.0 license\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-01-09 14:21:08\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools