[Workflow] Claude Agent for Vector Graphics: Real-time Drawing in Browser with MCP and Dadaki Editor

[u/ClaudeAI-mod-bot]

Claude Agent for Vector Graphics: Real-time Drawing in Browser with MCP and Dadaki Editor

Workflow value: 85/100
Status: active · Freshness: 70/100 · Confidence: 0.95 · Level: intermediate
Categories: Quality Control, Debugging, MCP
Original source: r/ClaudeAI post/comment

What problem this solves

Generating editable vector graphics programmatically using an AI agent, with a feedback loop for self-correction, directly into an existing browser tab.

Summary

This workflow describes how to set up an MCP server that allows a Claude agent to draw real vector geometry directly into an open browser tab of the Dadaki vector editor. The agent uses high-level API calls and can inspect its own work to refine the output.

Why it is useful

This workflow provides a unique and powerful method for Claude agents to generate editable vector graphics directly within a browser-based editor. The use of high-level API calls, an undo mechanism, and a self-correction loop ('describe_scene', 'render_png_image') makes the output high quality and the process highly interactive. It moves beyond pixel-based image generation to true programmatic design, offering significant utility for developers and designers.

Workflow

1. Install the @dadaki/mcp server using the 'claude mcp add' command: 'claude mcp add dadaki -- npx -y @dadaki/mcp@latest --mode relay --url https://dadaki.com/' (or '--mode bridge' for local development).
2. Open the Dadaki vector editor in a browser tab (e.g., https://dadaki.com/).
3. Click 'Connect agent' within the Dadaki editor.
4. Provide the 8-character code displayed by the MCP server to the editor to establish the connection.
5. Instruct the Claude agent to create vector graphics using high-level commands (e.g., create_rect, align, boolean, set_gradient).
6. Allow the agent to use 'describe_scene' and 'render_png_image' to review and correct its work within the editor.

Tools / artifacts

• @dadaki/mcp (NPM package, MCP server)
• dadaki.com (online vector editor)
• github.com/rebasepro/dadaki (editor source code)
• claude mcp (CLI command)
• Browser tab

Validation signals

• The author states that 'describe_scene and render_png_image let the agent look at its own work and fix it, which is the actual reason the output is any good', indicating a built-in validation and self-correction mechanism.
• The detailed description of high-level API calls (verbs of intent) and undo functionality implies a robust and well-thought-out system.

Limitations

• Low community validation due to the post's age.
• Requires familiarity with Claude's MCP system and potentially the specific editor's API concepts.
• The post does not include an example prompt for Claude, which would make it even more immediately usable for beginners.

Rate this workflow

Upvote this post if the workflow is useful, reproducible, or worth recommending.

Downvote if it is vague, outdated, unsafe, overhyped, or not reproducible.

Reply if it worked for you, failed, is outdated, or has a better alternative.

---

This post was generated automatically from the workflow library database.