使用说明
MCP-Desmos
MCP server for Desmos graphing calculator. Generate publication-quality 2D math graphs from LaTeX expressions, capture screenshots of shared Desmos graphs, and extract expression data — all through the Model Context Protocol.
Overview
MCP-Desmos launches a headless Chromium browser via Playwright, loads the Desmos API v1.11, and exposes three tools over MCP's stdio transport. An AI assistant (Claude Desktop, Claude Code, or any MCP client) can call these tools to plot functions, inequalities, parametric curves, labeled points, and more — returning PNG images or structured JSON.
Tech stack: TypeScript, Node.js, Playwright, Desmos API v1.11, Zod, MCP SDK.
Features
plot_graph— Render any combination of LaTeX expressions into a Desmos graph (PNG).load_desmos_url— Screenshot an existing shared Desmos calculator URL.get_expressions— Extract LaTeX expressions, colors, and graph settings from a Desmos URL.
Prerequisites
- Node.js >= 18
- npm
Installation
git clone https://github.com/AndresMuelas2004/MCP-Desmos.git
cd MCP-Desmos
npm install
npx playwright install chromium
npm run build
Configuration
Claude Desktop
Add the following to your claude_desktop_config.json:
{
"mcpServers": {
"desmos": {
"command": "node",
"args": ["/absolute/path/to/MCP-Desmos/dist/index.js"]
}
}
}
Claude Code
claude mcp add desmos node /absolute/path/to/MCP-Desmos/dist/index.js
Tools
plot_graph
Generate a Desmos-style 2D graph from mathematical expressions. Returns a PNG image.
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
expressions |
array | yes | — | List of expressions to plot (see below) |
points |
array | no | — | Individual labeled points |
bounds |
object | no | auto-fit | Viewport bounds (left, right, bottom, top) |
xAxisLabel |
string | no | — | Label for the x-axis |
yAxisLabel |
string | no | — | Label for the y-axis |
width |
number | no | 800 | Image width in pixels |
height |
number | no | 800 | Image height in pixels |
showGrid |
boolean | no | true | Show grid lines |
degreeMode |
boolean | no | false | Use degrees instead of radians |
Expression object:
| Field | Type | Required | Description |
|---|---|---|---|
latex |
string | yes | LaTeX expression (e.g. y = x^2) |
color |
string | no | Hex color (e.g. #c74440) |
label |
string | no | Label text |
showLabel |
boolean | no | Whether to show the label |
lineStyle |
"solid" | "dashed" | "dotted" |
no | Line style |
lineWidth |
number | no | Line width (default ~2.5) |
pointStyle |
"POINT" | "OPEN" | "CROSS" |
no | Point rendering style |
hidden |
boolean | no | Hide this expression |
Point object:
| Field | Type | Required | Description |
|---|---|---|---|
latex |
string | yes | Point as LaTeX (e.g. (2, 3)) |
color |
string | no | Hex color |
label |
string | no | Label text |
showLabel |
boolean | no | Whether to show the label |
load_desmos_url
Load an existing Desmos calculator graph from its URL and capture a screenshot.
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
url |
string | yes | — | Desmos calculator URL (e.g. https://www.desmos.com/calculator/4wkcpbapnv) |
width |
number | no | 800 | Screenshot width in pixels |
height |
number | no | 800 | Screenshot height in pixels |
get_expressions
Extract mathematical expressions, settings, and configuration from a Desmos calculator URL. Returns JSON.
| Parameter | Type | Required | Description |
|---|---|---|---|
url |
string | yes | Desmos calculator URL |
Usage Examples
Plot a simple function:
"Plot y = sin(x) and y = cos(x) from -2pi to 2pi"
Visualize data points with a curve fit:
"Plot these sensor readings as points: (0, 1.2), (1, 2.8), (2, 4.1), (3, 8.3) and overlay y = 1.2 * e^(0.6x)"
Extract and re-plot a shared graph:
"Get the expressions from https://www.desmos.com/calculator/4wkcpbapnv and re-plot them with a dark color scheme"
Development
npm run build # Compile TypeScript to dist/
npm run dev # Watch mode (recompile on changes)
npm start # Run the compiled server
Project Structure
MCP-Desmos/
├── src/
│ ├── index.ts # MCP server entry point, tool registration
│ ├── browser.ts # Playwright browser singleton
│ ├── desmos-renderer.ts # Desmos API integration, rendering logic
│ └── tools/
│ ├── plot-graph.ts # plot_graph tool (Zod schema + handler)
│ ├── load-url.ts # load_desmos_url tool
│ └── get-expressions.ts # get_expressions tool
├── templates/
│ └── calculator.html # HTML template with Desmos API script
├── capture-diagrams.mjs # Standalone diagram generator utility
├── package.json
└── tsconfig.json
License
MIT