Content
# codemirror-mcp
A CodeMirror extension that implements the [Model Context Protocol](https://modelcontextprotocol.io) (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
Connection Info
You Might Also Like
MarkItDown MCP
Converting files and office documents to Markdown.
Time
Obtaining current time information and converting time between different...
Filesystem
Model Context Protocol Servers
Sequential Thinking
Offers a structured approach to dynamic and reflective problem-solving,...
Git
Model Context Protocol Servers
Context 7
Context7 MCP Server -- Up-to-date code documentation for LLMs and AI code editors