CodeMirror-MCP is a CodeMirror extension that brings the power of the Model Context Protocol (MCP) directly into your code editor. It enhances AI model interactions by providing features like autocomplete for @resource mentions and /prompt commands, streamlining the process of referencing resources and triggering actions.

This extension visually decorates resource mentions, making them easily identifiable and clickable for quick access to resource details. It seamlessly integrates with AI models through MCP, allowing developers to build more context-aware applications. By supporting WebSocketClientTransport, CodeMirror-MCP ensures efficient and real-time communication. The core value lies in simplifying resource management and prompt engineering within the coding environment, leading to faster development cycles and improved AI-powered features. Integrating CodeMirror-MCP involves installing the package and adding the mcpExtension to your CodeMirror editor configuration, connecting it to your MCP transport layer.

Resource Autocompletion with @

The codemirror-mcp extension enhances the CodeMirror editor by providing autocompletion for resource mentions using the @ symbol. When a user types @ followed by characters, the extension triggers a lookup via the configured MCP transport (e.g., WebSocket) to suggest relevant resources. These resources are typically identified by their URIs and types, allowing the AI model to access external data or services. This feature streamlines the process of incorporating contextual information into prompts, ensuring that the AI model has the necessary data to generate accurate and relevant responses. For example, a user might type @weather to trigger autocompletion that suggests a specific weather data resource, which the AI model can then use to answer weather-related queries.

Visual Resource Decoration & Click Handling

This feature visually distinguishes resource mentions within the CodeMirror editor and enables interactive click handling. When a resource is mentioned using the @resource-uri syntax, the extension applies a specific style to highlight it, making it easily identifiable within the text. More importantly, it attaches a click event handler to these decorated resources. When a user clicks on a resource mention, the onResourceClick callback function is triggered, allowing developers to define custom actions, such as opening the resource in a new tab or displaying additional information. This functionality enhances the user experience by providing a clear visual representation of resource mentions and enabling seamless access to the underlying data or services. For instance, clicking on a @document resource could open the document in a separate viewer.

Prompt Command Autocompletion with /

The codemirror-mcp extension offers autocompletion for prompt commands using the / symbol. When a user types / followed by characters, the extension suggests available commands. These commands can trigger specific actions or functionalities within the AI model or the application. This feature simplifies the process of interacting with the AI model and allows users to easily access and execute predefined commands. For example, a user might type /summarize to trigger a summarization command that instructs the AI model to generate a summary of the current text. This feature enhances the efficiency and usability of the AI model integration by providing a convenient way to execute common tasks.

Integration Advantages

The codemirror-mcp offers seamless integration with existing CodeMirror setups and the broader MCP ecosystem. It leverages the standard @modelcontextprotocol/sdk for client-server communication, ensuring compatibility with various MCP-compliant servers. The extension is designed as a CodeMirror extension, making it easy to incorporate into existing CodeMirror-based applications. The provided code snippet demonstrates how to integrate the extension, configure the transport layer (e.g., WebSocket), and handle resource clicks. This ease of integration reduces the development effort required to add MCP support to CodeMirror editors, enabling developers to quickly leverage the benefits of contextual AI interactions. Furthermore, the extension supports customizable styling and theming, allowing developers to tailor the appearance of resource mentions and prompt commands to match the overall look and feel of their applications.