Using the AI agent integrations

What is it?

Eraser's Agent Integrations allow AI coding assistants to create architecture diagrams, flowcharts, sequence diagrams, ERDs, and more—all without leaving your IDE.

There are two ways to integrate:

• Agent Skills: A lightweight installation that teaches your AI assistant how to generate Eraser diagrams
• MCP Server: A Model Context Protocol server for deeper integration with MCP-compatible agents

Both methods call Eraser's API to produce rendered diagram images:

• Agent Skills use /render/elements — The agent generates Eraser syntax, then renders it
• MCP Server can use either:
  • /render/elements — Render agent-generated Eraser syntax
  • /render/prompt — Send a natural language prompt directly, and Eraser generates and renders the diagram

Quick Install

Option 1: Agent Skills

Run this command to install the Eraser skill for your AI coding agent:

npx skills install eraserlabs/eraser-io

This works with Claude Code, Cursor, and other agents that support the skills framework.

View the source on GitHub: eraserlabs/eraser-io/skills

Option 2: MCP Server

For MCP-compatible agents, add the following to your mcp.json configuration:

{
  "mcpServers": {
    "eraser": {
      "command": "npx",
      "args": ["@eraserlabs/eraser-mcp"],
      "env": {
        "ERASER_API_TOKEN": "<your-api-token>",
        "ERASER_API_URL": "https://app.eraser.io/api/mcp"
      }
    }
  }
}

View the source on GitHub: eraserlabs/eraser-io/packages/eraser-mcp

Note: The ERASER_API_TOKEN is optional but recommended. See the API Key section for details.

How It Works

When you ask your AI agent to create a diagram, here's what happens:

1. You describe the diagram you want in natural language
2. The AI agent processes your request:
   • Skills: The agent generates Eraser syntax and calls /render/elements
   • MCP Server: Can call /render/elements (with syntax) or /render/prompt (with natural language)
3. Eraser returns a rendered diagram image link

The agent can generate any diagram type supported by Eraser:

• Architecture diagrams - Cloud infrastructure, system design
• Sequence diagrams - API flows, authentication sequences
• Flowcharts - Process flows, decision trees
• Entity relationship diagrams (ERD) - Database schemas
• BPMN diagrams - Business processes, swimlane diagrams

Example Requests

Here are some prompts you can try with your AI coding agent:

"Create an architecture diagram for this codebase"

"Diagram the microservices architecture showing how the auth service, API gateway, and database interact in my codebase"

"Create a sequence diagram for the checkout process"

"Diagram the API request lifecycle from client to database here"

"Diagram the CI/CD pipeline for this project"

"Generate a decision tree for the error handling logic"

"Create an ERD for the database schema in this project"

"Diagram the relationships between User, Order, and Product tables"

Example Responses

When your AI agent generates a diagram, you'll receive a structured response. The format varies slightly between Skills and MCP Server.

Skills Response

The Skills response includes:

1. Diagram Image URL - The rendered diagram image displayed inline
2. Editor Link - A direct link to open and edit the diagram in the Eraser editor
3. Sources - A list of files or resources that were analyzed (if applicable)
4. Diagram Code - The Eraser DSL syntax in a code block for reference
5. Learn More - A link to Eraser documentation

MCP Server Response

The MCP Server returns a structured response with:

1. Image URL - Direct link to the rendered diagram image
2. Editor URL - Link to edit the diagram in Eraser
3. Diagram Code - The generated Eraser DSL syntax

{
  "imageUrl": "https://app.eraser.io/workspace/...",
  "editUrl": "https://app.eraser.io/workspace/...",
  "code": "User [icon: user]\nAPI Gateway [icon: aws-api-gateway]\n..."
}

API Key

Do You Need One?

An API key is optional for basic usage but recommended for production use or getting high-quality diagrams.

Without an API Key

• Diagrams include a small Eraser watermark
• Lower resolution output

With an API Key

• No watermarks - Clean, professional diagrams
• Higher resolution - Crisp images for presentations and documentation
• Usage tracking - Monitor your team's diagram generation

Getting an API Key

Note: API tokens require a paid subscription. You cannot create tokens on the free plan.

1. Sign up or log in with Eraser.
2. Upgrade to a paid plan by navigating to Settings → Plans & Billing from the dashboard
3. Navigate to Settings → API Tokens from the dashboard.
4. Click Generate new token to create an API key
5. Copy the token and add it to your configuration:
   • MCP Server: Add to your mcp.json configuration as ERASER_API_TOKEN
   • Skills: Set as an environment variable ERASER_API_KEY or add to a .env file in your project root

API usage and pricing details are included in Eraser's usage-based pricing.

Editing a Diagram

Each generated diagram includes a link to open it in the Eraser editor. From there, you can edit the diagram by:

• Modifying the DSL code directly or
• Making AI requests to update it or
• Making drag-and-drop edits

The free plan is limited to 3 files. Get access to unlimited files and more with a paid subscription.

Contact us for enterprise usage and pricing.