About codemirror-mcp
codemirror-mcp is a CodeMirror extension that adds MCP resource mentions and prompt commands to a web editor. It is aimed at front-end developers who want to bring MCP interactions into a CodeMirror-based editor.
Key features
- 01Autocomplete for @resource mentions
- 02Visual styling and click handling for resource mentions
- 03Autocomplete for /prompt commands
- 04Customizable theme styling
Use cases
- 01Reference MCP resources with @ mentions in a web editor
- 02Invoke MCP prompts with / commands inside an editor
- 03Embed MCP interactions in CodeMirror-based applications
MCP support
This project is a client-side component that connects to MCP servers through the MCP SDK transport, such as WebSocket, and uses their resources and prompts in the editor.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.
Tools
Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.
Details
From the project READMEcodemirror-mcp
A CodeMirror extension that implements the Model Context Protocol (MCP) for resource mentions and prompt commands.
Features
- Resource Completion: Autocomplete for
@resourcementions - Resource Decorations: Visual styling for
@resourcementions with click handling - Prompt Completion: Autocomplete for
/promptcommands - Theme Support: Customizable styling
Installation
npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
Peer Dependencies
This module requires the following peer dependencies:
@codemirror/view@codemirror/state@modelcontextprotocol/sdk
Usage
import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
import { mcpExtension, extractResources } from '@marimo-team/codemirror-mcp';
import { EditorView } from '@codemirror/view';
const transport = new WebSocketClientTransport(new URL('ws://localhost:8080'));
const view = new EditorView({
extensions: [
// ... other extensions
mcpExtension({
// Required options
transport: transport,
// Optional options
logger: console,
clientOptions: {
name: 'your-client',
version: '1.0.0'
},
onResourceClick: (resource) => {
// Open resource
// e.g. open in a tab, etc.
},
}),
// Handle submit
keymap.of([
{
key: 'Enter',
run: () => {
const resources = extractResources(view);
const formattedResources = resources
.map(
({ resource }) =>
`${resource.uri} (${resource.type}): ${resource.description || resource.name}`
)
.join('\n');
const prompt = `${view.state.doc.toString()}\n\nResources:\n${formattedResources}`;
// ... submit prompt to AI server
// const response = await generateText(prompt);
},
},
]),
],
parent: document.querySelector('#editor'),
});
Resources
- Use
@resource-urisyntax to reference resources - Resources are visually decorated and clickable
- Click handling for resource interactions
- Hover tooltips show resource details
- Customizable theme
Prompts
- Use
/commandsyntax for prompt commands - Autocomplete for available prompts
Development
# Install dependencies
pnpm install
# Run tests
pnpm test
# Run demo
pnpm dev
License
MIT
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.