# tuval-studio [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/ariferol01/tuval-studio-mcp  
**GitHub Stars:** 0  
**npm Downloads (last month):** 1481  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/tuval-studio

## Description
Tuval Studio MCP: Graphic design, AI design & PDF catalog generator for Claude, Cursor & AI agents.

## Tools
Capabilities this server exposes over MCP:

- **studio_check_status** — Checks whether Tuval Studio is open in the browser and connected to the local WebSocket bridge. If not connected, instructs the AI agent to open https://tuval.site/editor in the user's browser.
- **studio_get_view** — Captures the current live canvas graphic and layer hierarchy. Returns an image for visual inspection and critique by vision AI models.
- **design_audit_layout** — Audits the current active canvas for text collisions, layer overlaps, and boundary overflows. Returns actionable recommendations for fixing overlaps and spacing.
- **assets_list_local** — Scans and lists all local images, icons, logos, and graphic assets in the workspace-assets directory ready to be placed onto the canvas.
- **canvas_create_new** — Creates a new blank canvas with specific dimensions and background color.
- **canvas_set_dimensions** — Changes the dimensions or applies a social media preset (1080x1080 Instagram Post, 1080x1920 Story, 1280x720 YouTube Thumbnail, 1200x630 Facebook/Web Banner).
- **canvas_set_background** — Sets the solid background color or enables alpha transparency. NOTE FOR AI DESIGNERS: You are NOT restricted to solid colors! You can search & apply rich background photography, architectural textures, gradients, or pattern grids using "image_add" with { isBackground: true }, or choose from "assets_list_patterns" / "assets_list_stock_pngs" / "assets_list_local".
- **canvas_load_template** — Loads a pre-designed layout template onto the canvas (e.g. "social-launch", "neon-sale-story", "youtube-thumbnail", "minimal-post", "bold-thumbnail").
- **canvas_clear** — Clears all layers and objects from the canvas.
- **history_undo** — Reverts the canvas to the previous undo history state.
- **history_redo** — Redoes the previously undone change.
- **text_add** — Adds a typography text layer to the canvas with styling (fonts: Sora, Inter, Playfair Display, Montserrat, Poppins, Space Grotesk, Roboto, etc.).
- **text_update_style** — Updates typography properties of an existing text layer by its layerId.
- **shape_add** — Adds a geometric shape to the canvas (rect, rrect, circle, triangle, star, heart). Supports fills, strokes, corner radius, and opacity.
- **shape_update_style** — Modifies the fill, stroke, corner radius, or opacity of an existing shape layer.
- **assets_load_from_path** — Reads any local image or graphic file from the user computer (absolute path e.g. "C:/Users/name/Desktop/logo.png" or relative path), encodes it to Base64, and returns the data URL for use in canvas.
- **image_add** — Adds an image layer to the canvas. Source can be ANY local file path on the user computer (e.g. "C:/path/to/img.png" or "workspace-assets/photo.jpg"), an external public URL (e.g. Unsplash), or a Base64 data URL. Set isBackground: true to automatically make it a full-bleed background.
- **image_crop** — Crops an image layer with a given aspect ratio (1:1, 4:5, 16:9, 9:16) or custom pixel coordinates.
- **image_remove_bg_auto** — Applies AI 1-click automatic background removal to an image layer by analyzing edges.
- **image_remove_bg_magic** — Performs Magic Wand background removal on an image layer by sampling color at click coordinates with tolerance and feather smoothing.
- **filter_apply_preset** — Applies an aesthetic color grading preset to an image layer ("Warm Film", "Cyberpunk", "Moody Noir", "Vintage 70s", "Pastel Soft", "Vivid HDR", "Film Grain", "Normal").
- **filter_adjust_values** — Manually adjusts color grading sliders on an image layer (brightness, contrast, saturation, hue, blur, noise, sepia, grayscale).
- **layers_get_all** — Returns the complete hierarchical list of all objects/layers currently on the canvas with their IDs, positions, and styles.
- **layer_reorder** — Reorders a layer in the visual z-index stack ("bring_to_front", "send_to_back", "bring_forward", "send_backward").
- **layer_align** — Aligns an object to the canvas artboard ("center", "left", "right", "top", "bottom", "center_h", "center_v").
- **layer_transform** — Transforms a layer: move X/Y, rotate angle, flip horizontally/vertically, set opacity, or change blend mode.
- **layer_set_state** — Toggles visibility (hide/show), locks/unlocks selection, or renames a layer.
- **layer_duplicate** — Duplicates an existing layer and adds the copy to the canvas.
- **layer_delete** — Deletes a layer from the canvas.
- **studio_batch_actions** — Executes a sequential batch of multiple canvas actions in one round-trip and returns the final visual screenshot and layer state for rapid design creation.
- **studio_export_file** — Exports the current graphic to a local image file on the host machine (PNG, JPG, WebP, SVG) with customizable resolution scaling (1x, 2x Retina, 3x Print 300DPI, 4x Ultra HD).
- **project_set_title** — Renames the active project title displayed in the top navbar and export filename.
- **project_save_local** — Saves the current design project state to the browser local storage / cloud session.
- **project_export_download** — Triggers the browser to download the current design as PNG, JPEG, SVG, or project JSON.
- **canvas_set_gradient** — Applies a modern gradient to the canvas background. You can specify a built-in preset ("cyber", "sunset", "emerald", "space", "gold", "candy", "noir") or custom colors array and angle.
- **layer_set_gradient** — Applies a gradient fill to an existing text or shape layer by layerId.
- **svg_add** — Adds an SVG vector graphic, custom icon, bespoke badge, or decorative illustration to the canvas. You are NOT bound to built-in shapes: pass raw SVG markup in the "svg" parameter (e.g. "<svg ...>...</svg>") to render ANY custom graphic, modern asset, organic shape, or vector element required for your design, or specify a built-in key ("verified-badge", "sale-badge", "star-burst", "sparkle-star", "crown-vip", etc.).
- **sticker_add** — Alias for svg_add. Adds a sticker or badge vector element to the canvas.
- **assets_list_stickers** — Lists all available built-in SVG stickers, badges, and vector elements available for insertion.
- **templates_list** — Lists all pre-designed templates across all professional design styles (Bento Grid, Corporate, Branding, Luxury, Minimalist, AI & Tech, Retro 80s, Y2K Rave, Bauhaus, Neobrutalism, Art Deco, Memphis Pop).
- **assets_list_patterns** — Lists all built-in geometric pattern and texture background presets (Dot Matrix, Technical Blueprint, Carbon Fiber, Diagonal Stripes, 3D Isometric Wireframe, Topography, Circuit Board).
- **canvas_set_pattern** — Applies a patterned or textured geometric background to the canvas artboard.
- **assets_list_stock_pngs** — Lists free transparent 3D cutout assets, holographic spheres, lighting flares, and curated royalty-free photography available for instant placement.
- **elements_search** — Searches through thousands of copyright-free stock photos, transparent PNG cutouts, SVG vector icons, trust badges, and backgrounds by keywords and category filters.
- **element_add_stock** — Adds a free copyright-free stock image or cutout to the canvas directly by search query, image URL, or asset key.
- **layer_set_shadow** — Adds or updates drop shadow on a layer (color, blur radius, horizontal/vertical offsets, or quick preset: "soft", "float", "glow", "none").
- **brush_draw** — Executes freehand brush drawing on the canvas with specific brush style ("pencil", "spray", "circle", "eraser"), color, size, and path coordinates.
- **pages_list** — Returns the full list of pages in the current multi-page document with titles, indices, dimensions, and active status.
- **pages_add** — Adds a new page to the document. Ideal for designing multi-page catalogs, product lookbooks, brochures, magazines, and pitch decks.
- **pages_switch** — Switches the active canvas view to a specific page index or page ID so the AI agent can design on that page.
- **pages_duplicate** — Duplicates an existing page (including all text, shapes, images, and styling) into a new page immediately following it.
- **pages_delete** — Deletes a page from the document by index (the document must always keep at least 1 page).
- **pages_reorder** — Moves or reorders a page from one position to another in the multi-page document filmstrip.
- **pdf_export_catalog** — Compiles all pages (or active page) into a print-ready, high-resolution multi-page PDF document and triggers client-side download.
- **studio_execute_apidl** — Executes an APIDL (Tuval Design Language) script in a closed-loop iterative design convergence pipeline. Executes chained canvas commands, captures a high-resolution screenshot and layer coordinate tree, audits layout collisions, and enforces design quality standards across iterative phases ("draft" -> "refine" -> "final").

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## 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:

```json
{
  "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.

_Full upstream README: https://allmcps.com/mcp/tuval-studio/readme_