AI supported development with the yFiles mcp-server

Enhance your yFiles development experience with AI assistance powered by a specialized MCP (Model Context Protocol) server. This MCP server enables AI agents to provide intelligent support for yFiles-specific tasks, helping you create graph applications more efficiently.

With the MCP server the 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 mcp-server helps AI agents with:

AI agents verified to work with the yFiles mcp-server

The yFiles mcp-server has been successfully tested and verified to work with the following AI agents. Due to the MCP standard specification, it should work with any agent that supports MCP servers.

Setting up the MCP server

To make an AI agent aware of the yFiles mcp-server, you need to configure the server in your AI agent’s configuration.

The yFiles mcp-server can be started through the yfiles-dev-suite CLI (see also yFiles Dev Suite):

npx -y yfiles-dev-suite@latest --mcp

So a common JSON configuration for an agent would look like this:

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

This configuration enables your AI agent to communicate with yfiles-mcp, providing access to specialized tools and knowledge for yFiles development.

Let the agent install the MCP server

Some AI agents (e.g. Cline) can install an MCP server through a prompt. So you can also try this prompt to install the MCP server:

I want you to add a new mcp server - it is launched like this: npx -y yfiles-dev-suite@latest --mcp

Creating new projects with AI assistance

For new yFiles projects, the MCP server provides the yfiles-setup-project tool that can initialize a complete yFiles project from scratch. This also enables AI agents to use existing structured data (e.g. JSON, CSV, etc.) and create an interactive graph application to visualize the data, making it perfect for quickly prototyping graph-based applications.

The setup tool automatically:

Example prompts to create new projects:

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 graph.

Using the yFiles mcp-server in existing projects

The MCP server works best with specific AI agent instructions. In general, these instructions are considered by the agents to solve the prompts. Depending on the agent, these instructions must be provided in different forms.

To add agent instructions, yFiles-mcp provides a yfiles-generate-guidelines tool that can be triggered explicitly. For example:

Can you generate yFiles specific code guidelines for me?

Alternatively, you can explicitly require the agent to use the guidelines provided by the yFiles-mcp-server which typically triggers the server-mentioned tool to generate the guidelines. For example:

Highlight the hovered node. Please use the guidelines provided by the yFiles-mcp server.

Once the guidelines are added to the project, the agent automatically uses yFiles-mcp if necessary.

Leveraging AI assistance

When you have configured the MCP server in your AI agent and created the agent’s guidelines, you can start leveraging AI assistance for many tasks. For example:

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

Example prompts leveraging the AI assistance:

Add a filtering feature to my graph, where I can input a text and only graph items
with this label are visible afterward.

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 Center with 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 mcp-server, the server sends credentials to yWorks to authenticate the user with the yWorks Customer Center. Additionally, the MCP server communicates with yWorks services to retrieve API and documentation information. The server also sends usage statistics and error reports to yWorks to maintain the service’s quality.

Also note, when using an AI agent, their respective privacy policies apply.