Introduction

Gigma is a cloud-hosted design tool controlled by AI agents through the Model Context Protocol (MCP). It provides 19 tools that let AI manage projects, create, manipulate, and export canvas designs.

How It Works

You sign in with Google and get a personal MCP URL
Add the URL to your AI agent's MCP configuration
The AI agent calls MCP tools to add shapes, text, images to the canvas
You see changes in real-time in the browser editor
The AI can export the design as PNG to cloud storage

Supported Element Types

Type	Description
`rect`	Rectangle with optional corner radius
`circle`	Ellipse / circle
`text`	Text with font weight, size, alignment
`image`	Image from URL with optional clip mask
`line`	Line between two points

Element Properties

Every element supports:

Position: x, y
Size: width, height
Style: fillColor, strokeColor, strokeWidth, opacity
Transform: rotation (degrees)
Corner: cornerRadius (for rect)
Mask: maskShape (none, circle, ellipse, roundedRect)
State: isVisible, isLocked
Identity: id (UUID), name, type

Text elements additionally support: text, fontSize, fontWeight, textAlignment

Line elements additionally support: x2, y2

Architecture

Gigma consists of two services:

Cloud Function (Web + API)

Landing page, Google OAuth login, project management
Browser-based Fabric.js canvas editor
REST API for project CRUD

Cloud Run (MCP Server)

19 MCP tools via Streamable HTTP transport
Token-based authentication (no OAuth needed for MCP)
Server-side canvas rendering with @napi-rs/canvas
Export to Google Cloud Storage

Database

MongoDB (gigma database) — users, projects, exports
GCS — exported PNG images with signed URLs