# 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:
* **MCP Server**: A Model Context Protocol server for deeper integration with MCP-compatible agents
* **Agent Skills**: A lightweight installation that teaches your AI assistant how to generate Eraser diagrams
Both methods call Eraser's API to produce rendered diagram images:
* **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
* **Agent Skills** use `/render/elements` – The agent generates [Eraser syntax](https://docs.eraser.io/docs/diagram-as-code), then renders it
## Quick Install
### Option 1: MCP Server
For MCP-compatible agents, add the following to your `mcp.json` configuration:
```json
{
"mcpServers": {
"eraser": {
"type": "http",
"url": "https://app.eraser.io/api/mcp"
}
}
}
```
View the source on GitHub: [eraserlabs/eraser-io/packages/eraser-mcp](https://github.com/eraserlabs/eraser-io/tree/main/packages/eraser-mcp)
You need to be authorized into Eraser to use the MCP.
### Option 2: Agent Skills
Run this command to install the Eraser skill for your AI coding agent:
```bash
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](https://github.com/eraserlabs/eraser-io/tree/main/skills)
**Note:** The `ERASER_API_TOKEN` is optional but recommended for the skills. See the [API Key](#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:
* **MCP Server**: Can call `/render/elements` (with syntax) or `/render/prompt` (with natural language)
* **Skills**: The agent generates [Eraser syntax](https://docs.eraser.io/docs/diagram-as-code) and calls `/render/elements`
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.
### 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
```json
{
"imageUrl": "https://app.eraser.io/workspace/...",
"editUrl": "https://app.eraser.io/workspace/...",
"code": "User [icon: user]\nAPI Gateway [icon: aws-api-gateway]\n..."
}
```
### 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
## API Key
### Do You Need One?
For Skills: An API key is **optional for basic usage** but **recommended for production use or getting high-quality diagrams**.
For MCP: OAuth is the recommended method.
### 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
API tokens require a paid subscription. You cannot create tokens on the free plan.
1. [Sign up](https://app.eraser.io/auth/sign-up) or log in with Eraser.
2. Upgrade to a paid plan by navigating to **Settings** → **[Plans & Billing](https://app.eraser.io/dashboard/all?settings=plans)** from the dashboard
3. Navigate to **Settings** → **[API Tokens](https://app.eraser.io/dashboard/all?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](https://www.eraser.io/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](https://www.eraser.io/enterprise) for enterprise usage and pricing.