codemirror-mcp

What is codemirror-mcp?

A CodeMirror extension that implements the Model Context Protocol (MCP) for autocompleting @resource mentions and /prompt commands, with visual decorations and click handling. It's designed for developers building AI-assisted editors or chat interfaces on top of CodeMirror.

How to use codemirror-mcp?

Install with npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk and peer dependencies. Import mcpExtension and pass it to an EditorView with a transport (e.g., WebSocketClientTransport) and optional options like logger, clientOptions, and onResourceClick. Use extractResources(view) to collect referenced resources for submission.

Key features of codemirror-mcp

• Autocomplete for @resource mentions
• Visual styling for resource mentions with click handling
• Autocomplete for /prompt commands
• Customizable theme
• Hover tooltips showing resource details
• Resource extraction via extractResources

Use cases of codemirror-mcp

• Building a chat editor that references files, tools, or context
• Adding AI prompt commands to a text editor
• Creating a resource-aware notebook or documentation interface
• Enabling structured resource selection in a web-based IDE

FAQ from codemirror-mcp

What are the peer dependencies?

You need @codemirror/view, @codemirror/state, and @modelcontextprotocol/sdk.

How does transport work?

The extension accepts any MCP transport; the README shows WebSocketClientTransport connecting to ws://localhost:8080.

Can I customize the appearance?

Yes, the extension supports customizable styling via theme options.

How do I extract referenced resources?

Use the extractResources(view) function to get an array of resources from the editor state.

Is data stored locally or sent over the network?

Resources and prompts are handled client-side; network transport depends on the provided MCP transport (e.g., WebSocket).