AI supported development with yFiles AI Tools

Enhance your yFiles development experience with AI assistance powered by specialized Model Context Protocol (MCP) tools and skills. The yFiles AI tools enable AI coding agents to provide intelligent support for yFiles-specific tasks, helping you create graph and diagram applications more efficiently.

With these AI tools, your AI assistant has deep knowledge of yFiles concepts, patterns, and common development scenarios, making it an invaluable companion for both beginners and experienced developers.

yFiles AI tools help AI agents with:

AI agents verified to work with yFiles AI Tools

The yFiles AI tools have been successfully tested and verified to work with the following AI agents. Due to the MCP standard specification and Agent skills, they should work with any agent that supports MCP servers and skills.

Because the yFiles AI tools implement the open Model Context Protocol (MCP) and skills standards, they should work with any agent, IDE, CLI, or harness that supports MCP servers and skills (including tools like Qwen Code, Open WebUI, and Claude Desktop).

Setting up the MCP server and skills

The yFiles AI tools are included in the yfiles-dev-suite CLI (see also yFiles Dev Suite). It acts as a local hub for installing skills and serving as an MCP server over standard input/output (stdio).

To quickly guide an AI agent through installing the skills and MCP server automatically, you can run or paste the following quick prompt into your agent:

Fetch https://yfiles.com/agent-start.md and follow its instructions.

Manual configuration

To manually install the yFiles skills, run

npx yfiles-dev-suite install-skills

To manually configure the MCP server for your environment please consult the documentation of your AI agent, IDE, or development harness.

A common JSON configuration for manually setting up the MCP server looks like this (the exact JSON configuration format may vary):

{
  "mcpServers": {
    "yfiles-api": {
      "command": "npx",
      "args": [
        "-y",
        "yfiles-dev-suite@latest",
        "mcp"
      ],
      "type": "stdio"
    }
  }
}

Many AI agents also provide instructions to install MCP servers directly. For Claude Code, the command would look like this:

claude mcp add --transport stdio yfiles-api -- npx -y yfiles-dev-suite@latest --mcp

Scaffolding new yFiles applications with AI assistance

For new yFiles projects, the AI tools enable agents to scaffold full applications from scratch or initialized structured data (e.g. JSON, CSV, etc.) into an interactive graph application to visualize the data.

The AI tools automatically help:

Example prompts for scaffolding:

Create a vanilla TypeScript project with yFiles and Vite.

Create a React project with a basic yFiles component and editing capabilities.

This workspace contains graph data for a factory supply chain. Create a yFiles project with Vite that visualizes this data as a graph.

Using yFiles AI tools in existing projects

Once your environment is set up, you can start leveraging the yFiles AI tools directly in existing projects to extend features, customize styles, refine layouts, and answer API questions.

Before starting, ensure that both the dev suite and your AI harness are configured correctly:

With everything configured and running, you don’t need complex setup routines—simply describe what you want to achieve using natural language in your AI agent prompt, and the agent will inspect your code, look up relevant yFiles APIs, and inject working code directly into your project.

If you ever want to give your agent extra context or reinforce yFiles-specific best practices, you can ask it to retrieve guidelines or use the tools explicitly:

Please add a filtering feature to my graph and use the yFiles AI tools to ensure best practices.

Leveraging AI assistance and use cases

When you have configured the AI tools in your agent, you can start leveraging AI assistance for a broad range of tasks:

Example prompts for existing projects:

This application shows organization structure in table form, fetched from a database. Inspect the code to find the data, and add a graph visualization for the organization chart. Use a custom style for the nodes to show the relevant information associated with the employees. Add an overview and a highlight and search feature, as well as a detail view and rich tooltips.

Create a custom node style to show all relevant information in my nodes' data tags.

Add a heatmap to the graph visualization, using the "load" value of the nodes' data tags.

Please group my graph items by their category property and make it such that I can collapse/expand these groups interactively.

When a node is hovered over, that node, all directly connected nodes, and the connecting edges should be highlighted.

Troubleshooting

Q: The agent cannot use the mcp-tool even though the agent reports them as available?
A: Some agents have issues with tool availability reporting. Try restarting the agent session.

Q: The agent calls the tools, but they do not return information about the yFiles API?
A: Ensure you are logged in to the yWorks Customer/Evaluation Center via npx yfiles-dev-suite info with an account that has a valid yFiles for HTML package.

Q: The agent uses the tool, but the code generated does not run as expected?
A: Make sure the agent has generated the guidelines using the yfiles-generate-guidelines tool and that a fresh session was started afterward.

Privacy Notice

When using the yFiles AI tools, credentials are sent to yWorks to authenticate the user with the yWorks Customer/Evaluation Center. Additionally, the tools communicate with yWorks services to retrieve API, documentation, and demo information, as well as send usage statistics and error reports to maintain service quality.

Note that when using an AI agent, the respective provider’s privacy policies also apply.