Tuval Studio

What tuval-studio does

tuval-studio exposes Tuval Studio as an MCP toolset for AI-driven visual design. It works with an interactive browser canvas and supports both single-artboard graphics and multi-page documents. Agents can create layouts, add text and vector shapes, place images, apply backgrounds and effects, inspect layer state, and export finished work.

The server is suited to workflows such as product catalogs, brochures, magazines, pitch decks, social banners, Instagram stories, YouTube thumbnails, and other branded graphics. Multi-page documents can be assembled, reordered, duplicated, edited, and exported as a high-resolution PDF catalog.

How it works

Start Tuval Studio at https://tuval.site/editor in a browser tab, then configure an MCP client to launch the package with npx. When an agent calls a design tool, the server communicates with the active canvas through a local WebSocket connection at ws://127.0.0.1:8765.

Visual feedback is part of the workflow. studio_get_view returns a high-resolution Base64 PNG snapshot and layer tree, while design_audit_layout checks text and image layers for collisions and overflow. The APIDL execution tool can run batch design scripts through draft, refine, and final stages, returning visual state and collision-audit information during iteration. studio_batch_actions groups sequential operations into one atomic call.

Setup and configuration

Install through an MCP client's standard command configuration:

{
  "mcpServers": {
    "tuval-studio": {
      "command": "npx",
      "args": ["-y", "@ariferol01/tuval-studio-mcp@latest"]
    }
  }
}

The same stdio configuration is shown for Claude Desktop, Cursor, Codex, Antigravity, Windsurf, Cline, and Roo-Code. After adding it, open the Tuval Studio editor so the agent can reach the active canvas. Node.js 18 or newer is required.

Tools and capabilities

• Create canvases with custom dimensions, background colors, gradients, patterns, and templates.
• Set common social dimensions, including 1080×1080, 1080×1920, 1280×720, and 1200×630.
• Add and style text using listed Google Fonts such as Sora, Inter, Playfair Display, Bebas Neue, Cinzel, and Syne.
• Insert geometric shapes, SVG badges, callouts, images, local assets, and background images.
• Crop images, remove backgrounds automatically or with a magic-wand tolerance, and apply color-grade presets.
• Align, transform, reorder, duplicate, and delete layers.
• Manage pages by listing, adding, switching, duplicating, deleting, and reordering them.
• Export graphics as PNG, JPG, WebP, or SVG, or compile all document pages into a PDF.
• Rename projects and run layout audits before download.

Limitations and notes

The agent must have Tuval Studio open in a browser tab for canvas commands to connect. The design bridge is local and uses 127.0.0.1:8765; the workflow is intended to operate without account or server-side storage. Local images and logos can be loaded from the computer through the asset tools. The available design presets, fonts, gradients, patterns, and export formats are limited to the options exposed by the tool catalog.