Overview

This MCP (Model Context Protocol) server integrates with CodeMirror to enable resource mentions and prompt-based commands inside the editor. It exposes a small HTTP API that enumerates editor-aware resources (files, snippets, docs, URLs) and prompt templates (summaries, refactors, searches). A CodeMirror extension can query the MCP server while the user types to show mention/autocomplete lists and to call prompt commands that use the selected context.

Using an MCP server provides a consistent, extensible way to surface and resolve contextual items for LLMs and editor tooling. Instead of hard-coding mentions and commands in the extension, the MCP server centralizes resource discovery and prompt execution, making workflows easier to customize and scale across projects or teams.

Features

Lightweight HTTP API to list and search resources and prompts
Resource mention resolution for in-editor autocompletion (e.g., @file, @doc)
Prompt templates and server-side prompt handlers (e.g., /summarize, /refactor)
Pluggable backends: file system, Git, search index, external services
JSON configuration for resources and prompt templates
Simple client integration example for CodeMirror

Installation / Configuration

Clone and run the server locally (Node.js example):

git clone https://github.com/marimo-team/codemirror-mcp.git
cd codemirror-mcp
npm install
npm run start

Minimal Express-style server example (illustrative):

// server.js
const express = require('express');
const app = express();
app.use(express.json());

// Example resources
const resources = [
  { id: 'file:src/index.js', type: 'file', title: 'src/index.js', text: 'export function...' },
  { id: 'doc:readme', type: 'doc', title: 'README', text: '# Project' }
];

app.get('/mcp/resources', (req, res) => {
  const q = (req.query.q || '').toLowerCase();
  const items = resources.filter(r => r.title.toLowerCase().includes(q));
  res.json({ items });
});

app.post('/mcp/prompts/execute', (req, res) => {
  // req.body: { promptId, resourceId, selection, params }
  // Implement your prompt handler here — e.g., run an LLM or perform a transformation
  res.json({ success: true, result: 'Processed result placeholder' });
});

app.listen(3000, () => console.log('MCP server listening on :3000'));

Dockerfile example:

FROM node:18-alpine
WORKDIR /app
COPY . .
RUN npm ci --production
CMD ["node", "server.js"]

Configuration file example (resources and prompts):

{
  "resources": [
    { "id": "file:src/app.ts", "type": "file", "title": "app.ts", "path": "src/app.ts" }
  ],
  "prompts": [
    { "id": "summarize", "title": "Summarize", "template": "Summarize the following code:\n\n{{text}}" }
  ]
}

Available Resources

The MCP server typically exposes resources with this schema:

id: string (unique identifier, e.g., file:src/index.js)
type: string (file, doc, snippet, url, issue)
title: string (human-friendly)
text: string (optional content for context)
metadata: object (size, path, language, tags)

Common resource types:

file — code files in the repo
doc — documentation pages, README
snippet — small reusable code snippets
url — external resources or API docs
issue/pr — links to issue tracker items

Available prompts (examples):

summarize — produce a concise summary of selected resource
explain — explain the code or concept under selection
translate — convert code between languages or natural language between locales
insert-template — insert a code template or boilerplate

Integration with CodeMirror (example)

Client-side snippet to query the MCP server and show mentions (pseudo-code):

async function fetchResources(query) {
  const res = await fetch(`/mcp/resources?q=${encodeURIComponent(query)}`);
  const json = await res.json();
  return json.items; // array of {id, title, type}
}

// Use your existing CodeMirror completion source
const mentionSource = async (context) => {
  const word = context.matchBefore(/[@\/]\w*/);
  if (!word) return null;
  const q = word.text.slice(1);
  const items = await fetchResources(q);
  return {
    from: word.from,
    options: items.map(i => ({ label: i.title, detail: i.type, id: i.id }))
  };
};

Invoking a prompt (client → MCP):

const payload = {
  promptId: 'summarize',
  resourceId: 'file:src/index.js',
  selection: { start: 120, end: 360 }
};
const resp = await fetch('/mcp/prompts/execute', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});
const result = await resp.json();
// Insert result into editor or show a preview

Use Cases

Context-aware completions: When a user types @ or /, surface project files, docs, or snippets to include as context for an LLM completion.
In-editor prompts: Run server-handled prompts like /summarize or /refactor on a selected function and insert or preview the output.
Cross-repo linking: Mention other repositories, issues, or design docs to create links or fetch context for AI assistants.
Team-specific workflows: Customize the MCP server to expose internal resources (API specs, templates) and prompt handlers that align with team conventions.

This MCP server pattern decouples the editor UI from resource discovery and execution logic, making it easier to adapt prompt behavior or resource sources without changing editor extensions.

CodeMirror MCP Server for Resource Mentions and Prompts