Export & Screenshot Tools

Tools for rendering the canvas and exporting to images.

get_screenshot

Get a screenshot of the current canvas as a base64 PNG image. This is useful for the AI to see what it has designed and make adjustments.

Parameters: None

Returns: Base64 PNG image (rendered at 1x scale)

The response contains an image content type that AI agents can view directly:

{
  "content": [{
    "type": "image",
    "data": "iVBORw0KGgo...",
    "mimeType": "image/png"
  }]
}

Example prompt: "Show me what the canvas looks like right now"

Tip: Call get_screenshot after adding elements so the AI can verify the design looks correct before exporting.

export_canvas

Export the canvas to PNG and upload to Google Cloud Storage. Returns a signed URL valid for 7 days.

Parameters:

Returns: JSON with signed URL and file info

{
  "success": true,
  "signedUrl": "https://storage.googleapis.com/...",
  "gcsPath": "gigma-exports/userId/projectId/timestamp.png",
  "fileSize": 123456
}

Scale Factor

Example prompt: "Export the design as a high-res PNG"

capture_webpage

Note: This tool is not supported in the web version. Use add_element with type: "image" and an imageUrl parameter instead.

In the desktop version, this tool captures a webpage screenshot and adds it to the canvas. In the web version, it returns a helpful message suggesting the alternative approach.

Server-Side Rendering

The MCP server uses @napi-rs/canvas (Node.js Canvas 2D API) for server-side rendering. This means:

• Text rendering uses Noto Sans fonts with CJK (Chinese/Japanese/Korean) support
• Images are downloaded from URLs and drawn onto the canvas
• All element properties are respected: rotation, opacity, masks, corner radius
• Export quality is controlled by the scale factor

Rendering Order

1. Canvas background (backgroundColor)
2. Elements drawn bottom-to-top (array order)
3. For each element: opacity, rotation, mask clip, shape/text/image, mask border

Supported Features