TS

codemirror-mcp

by marimo-team/codemirror-mcp

0 views

CodeMirror extension to hook up a Model Context Provider (MCP)

typescriptjavascriptAPI Integration

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

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-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

# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

License

MIT

Install

No configuration available
For more configuration details, refer to the content on the left

Related

Related projects feature coming soon

Will recommend related projects based on sub-categories