codemirror-mcp

codemirror-mcp

CodeMirror extension for Model Context Protocol resource mentions and prompt commands

78
Stars
3
Forks
78
Watchers
0
Issues
codemirror-mcp provides a CodeMirror extension that implements the Model Context Protocol (MCP) to enable resource mention handling and prompt command integration within code editors. It offers autocomplete, visual decorations, and interaction support for '@resource' mentions, as well as command triggers using the '/prompt' syntax. The extension integrates with model context servers using a defined transport and enhances the editor experience with resource click handling and customizable theming.

Key Features

Autocomplete for @resource mentions
Autocomplete for /prompt commands
Visual decoration of resource mentions
Customizable theme support
Click handling for resource mentions
Hover tooltips for resource details
Peer dependency integration with @modelcontextprotocol/sdk
Resource extraction utilities
WebSocket transport support for MCP
Keymap extension for submission handling

Use Cases

Enhancing code editors with resource-aware autocompletion
Integrating AI model context management into editing workflows
Building context-rich editor interfaces for AI assistants
Enabling easy referencing of contextual resources within text
Triggering model prompts with standardized slash commands
Providing interactive resource tooltips and actions in editors
Customizing editor themes for visual distinction of resources
Streamlining prompt construction for language model interactions
Seamless integration with MCP-compliant backend services
Facilitating prototyping of context-enabled AI editor features

README

codemirror-mcp

A CodeMirror extension that implements the Model Context Protocol (MCP) for resource mentions and prompt commands.

Features

  • 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

Installation

bash
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

ts
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-uri syntax to reference resources
  • Resources are visually decorated and clickable
  • Click handling for resource interactions
  • Hover tooltips show resource details
  • Customizable theme

Prompts

  • Use /command syntax for prompt commands
  • Autocomplete for available prompts

Development

bash
# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

License

MIT

Star History

Star History Chart

Repository Owner

marimo-team
marimo-team

Organization

Repository Details

Language TypeScript
Default Branch main
Size 142 KB
Contributors 1
License Apache License 2.0
MCP Verified Nov 12, 2025

Programming Languages

TypeScript
100%

Tags

Topics

codemirror codemirror-extension mcp

Join Our Newsletter

Stay updated with the latest AI tools, news, and offers by subscribing to our weekly newsletter.

We respect your privacy. Unsubscribe at any time.

Related MCPs

Discover similar Model Context Protocol servers

  • Azure MCP Server

    Azure MCP Server

    Connect AI agents with Azure services through Model Context Protocol.

    Azure MCP Server provides a seamless interface between AI agents and Azure services by implementing the Model Context Protocol (MCP) specification. It enables integration with tools like GitHub Copilot for Azure and supports a wide range of Azure resource management tasks directly via conversational AI interfaces. Designed for extensibility and compatibility, it offers enhanced contextual capabilities for agents working with Azure environments.

    • 1,178
    • MCP
    • Azure/azure-mcp
  • Context7 MCP

    Context7 MCP

    Up-to-date code docs for every AI prompt.

    Context7 MCP delivers current, version-specific documentation and code examples directly into large language model prompts. By integrating with model workflows, it ensures responses are accurate and based on the latest source material, reducing outdated and hallucinated code. Users can fetch relevant API documentation and examples by simply adding a directive to their prompts. This allows for more reliable, context-rich answers tailored to real-world programming scenarios.

    • 36,881
    • MCP
    • upstash/context7
  • MCP Unity Editor

    MCP Unity Editor

    A Model Context Protocol implementation for Unity game development.

    MCP Unity Editor implements the Model Context Protocol within the Unity Editor environment, enabling standardized management of model context. It provides tools and infrastructure for developers to build and integrate AI and model-driven workflows in Unity projects. Built with support for Unity and Node.js, it aims to facilitate robust context handling and protocol compliance for model interactions.

    • 1,075
    • MCP
    • CoderGamester/mcp-unity
  • kibitz

    kibitz

    The coding agent for professionals with MCP integration.

    kibitz is a coding agent that supports advanced AI collaboration by enabling seamless integration with Model Context Protocol (MCP) servers via WebSockets. It allows users to configure Anthropic API keys, system prompts, and custom context providers for each project, enhancing contextual understanding for coding tasks. The platform is designed for developers and professionals seeking tailored AI-driven coding workflows and provides flexible project-specific configuration.

    • 104
    • MCP
    • nick1udwig/kibitz
  • Mem0 MCP Server

    Mem0 MCP Server

    Structured management of coding preferences using Mem0 and Model Context Protocol.

    Mem0 MCP Server implements a Model Context Protocol-compliant server for storing, retrieving, and searching coding preferences. It integrates with Mem0 and offers tools for persistent management of code snippets, best practices, and technical documentation. The server exposes an SSE endpoint for clients like Cursor, enabling seamless access and interaction with coding context data.

    • 506
    • MCP
    • mem0ai/mem0-mcp
  • FastMCP

    FastMCP

    TypeScript framework for building robust MCP servers with minimal setup.

    FastMCP is a TypeScript framework designed for building servers that adhere to the Model Context Protocol (MCP), enabling efficient management of client sessions and context. It streamlines the creation of MCP servers by providing intuitive APIs, built-in authentication, session and request tracking, and support for handling various content types such as images and audio. The framework also enforces best practices around error handling, logging, and streaming outputs. Developers benefit from reduced boilerplate and a focus on core MCP functionality.

    • 2,738
    • MCP
    • punkpeye/fastmcp
  • Didn't find tool you were looking for?

    Be as detailed as possible for better results