# codemirror-mcp

> MCP Server

This CodeMirror extension implements the Model Context Protocol (MCP), offering features like resource and prompt autocompletion, resource decorations, and customizable theme support for enhanced text editing. This CodeMirror extension implements

## Overview

- **Category:** Developer Tools
- **Language:** TypeScript
- **Stars:** 79
- **Forks:** 0
- **Owner:** marimo-team
- **GitHub:** https://github.com/marimo-team/codemirror-mcp
- **Homepage:** https://marimo-team.github.io/codemirror-mcp/
- **Created:** 2025-01-09T03:24:07+00:00
- **Updated:** 2025-03-27T22:29:58+00:00
- **Source:** https://model-context-protocol.com/servers/codemirror-model-context-protocol-extension

## Setup

## Setup

1.  Install the package and its peer dependencies:

```bash
npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
```

2.  Ensure you have the required peer dependencies: `@codemirror/view`, `@codemirror/state`, and `@modelcontextprotocol/sdk`.

3.  Import and use the `mcpExtension` in your CodeMirror setup, providing a transport and optional configurations like logger, client options, and `onResourceClick` handler.

4.  Implement a keymap to handle actions like submitting the prompt, extracting resources using `extractResources`, and formatting them for use with an AI server.

## Tools

## Available Tools

1.  Resource Completion: Autocomplete for `@resource` mentions.
2.  Resource Decorations: Visual styling for `@resource` mentions with click handling.
3.  Prompt Completion: Autocomplete for `/prompt` commands.
4.  Theme Support: Customizable styling.
5.  Resource Mentions: Use `@resource-uri` syntax to reference resources.
6.  Click handling for resource interactions.
7.  Hover tooltips show resource details.
8.  Prompt Commands: Use `/command` syntax for prompt commands.