react-flow-mcp

# React Flow MCP Local-first MCP server for the free `@xyflow/react` API surface and official free React Flow docs/examples. It is designed for Cursor or any MCP client that can spawn a local `stdio` server. ## What it gives you - Searchable coverage of the free React Flow API reference: core components, components, hooks, types, and utils. - Curated free examples and setup playbooks for common React Flow tasks. - Code-generation helpers for starter TSX snippets. - Setup validation for common React Flow mistakes such as missing CSS import or missing container height. ## Included MCP surface ### Tools - `search_reactflow_api`: search the catalog by keyword. - `get_reactflow_entry`: inspect one normalized API/docs entry by id. - `list_reactflow_components`: list coverage by category. - `generate_reactflow_snippet`: generate TSX starters for common React Flow tasks. - `recommend_reactflow_apis`: map a goal to relevant APIs/examples. - `check_reactflow_setup`: validate a code snippet for common React Flow setup mistakes. ### Resources - `reactflow://catalog/index` - `reactflow://api/{id}` - `reactflow://examples/{id}` - `reactflow://playbooks/setup` - `reactflow://playbooks/common-patterns` ### Prompts - `reactflow_bootstrap` - `reactflow_custom_node` - `reactflow_custom_edge` - `reactflow_review` ## Local setup ```bash npm install npm run build npm test ``` Run it directly with: ```bash npm run dev ``` For production-style local MCP usage, point your client at the compiled entry: ```bash node /absolute/path/to/react-flow-mcp/dist/index.js ``` ## Cursor configuration Copy the example config and replace the absolute path: ```json { "mcpServers": { "react-flow": { "command": "node", "args": [ "/absolute/path/to/react-flow-mcp/dist/index.js" ] } } } ``` The checked-in example lives at [.cursor/mcp.json.example](/Users/aantonio/Documents/react-flow-mcp/.cursor/mcp.json.example). Agent-facing repo guidance lives at [AGENTS.md](/Users/aantonio/Documents/react-flow-mcp/AGENTS.md). ## Generic MCP client configuration Any client that supports local `stdio` MCP servers can use the same command: ```json { "mcpServers": { "react-flow": { "command": "node", "args": [ "/absolute/path/to/react-flow-mcp/dist/index.js" ] } } } ``` ## Recommended workflow for agents When an agent is working in a React Flow project: 1. Call `search_reactflow_api` with the feature goal first. 2. Call `get_reactflow_entry` on the most relevant ids. 3. Use `generate_reactflow_snippet` only after confirming the right APIs. 4. Run `check_reactflow_setup` on generated or edited code before applying it. This keeps the agent anchored to the actual free `@xyflow/react` API instead of guessing. ## Scope notes - This server intentionally focuses on the free `@xyflow/react` surface and free official docs/examples. - It does not depend on runtime web access; the catalog is versioned in-repo. - React Flow UI installer components and Pro-only features are out of scope for this version. ## Publishing later This repo is not set up for npm publishing yet, but it is close. Before publishing: 1. Change `name` to your publishable package name. 2. Remove `"private": true` from `package.json`. 3. Verify `files`, `main`, and `types` entries still match the build output. 4. Add repository metadata, keywords cleanup, and release automation as needed. 5. Run `npm publish --access public` from a clean tagged release.