# Moda Documentation > Moda is a 2D vector canvas tool for designing social media posts, slide decks, and visual content. These docs cover the MCP server for AI code editors and the REST API for programmatic access. --- ## Authentication URL: https://docs.moda.app/api/authentication The Moda REST API uses API keys for authentication. Include your key as a Bearer token in the `Authorization` header of every request. ## Creating an API key 1. Open the Moda app and go to **Settings > Developer** 2. Under **REST API**, click **Create Key** 3. Give the key a name (e.g., "CI Pipeline" or "Internal Dashboard") 4. Select the scopes the key needs (see [Scopes](#scopes) below) 5. Click **Create** 6. Copy the key immediately -- it is only shown once API keys use the format `moda_live_`. ## Using your key Include the key in the `Authorization` header: ```bash curl https://api.moda.app/v1/canvases \ -H "Authorization: Bearer moda_live_abc123def456..." ``` Every request without a valid key returns `401 Unauthorized` with `WWW-Authenticate: Bearer`. ## Scopes Each API key is granted one or more scopes that control what it can access. Choose the minimum scopes your integration needs. | Scope | Grants access to | | -------------------- | --------------------------------------- | | `canvases:read` | List and search canvases | | `canvases:write` | Create and modify canvases | | `designs:read` | Fetch design pseudo-HTML, tokens, pages | | `designs:write` | Reserved for future design write access | | `jobs:read` | Get job status and list jobs | | `jobs:write` | Start design tasks | | `organizations:read` | List organizations and teams | | `brand_kits:read` | List brand kits | | `brand_kits:write` | Create and update brand kits | | `exports:read` | Export and download files | | `uploads:write` | Upload files and import from URLs | For example, a read-only dashboard integration would need `canvases:read` and `designs:read`. An automation that generates designs would also need `jobs:write` and `canvases:write`. ## Security best practices - **Do not commit keys to source control.** Use environment variables or a secrets manager. - **Use the narrowest scopes possible.** A key that only reads canvases should not have write scopes. - **Rotate keys periodically.** Delete keys you no longer use from **Settings > Developer**. - **Use separate keys per integration.** This lets you revoke access to one system without affecting others. - **Keep keys server-side.** Never expose API keys in frontend code, mobile apps, or client-side bundles. ## Revoking a key Go to **Settings > Developer > REST API**, find the key, and click **Delete**. The key stops working immediately. Any requests using the deleted key return `401 Unauthorized`. --- ## Getting Started URL: https://docs.moda.app/api The Moda REST API provides direct HTTP access to your canvases, designs, brand kits, and AI design capabilities. Use it to build integrations, automate workflows, or embed Moda functionality in your own applications. ## Base URL All API requests use the following base URL: ``` https://api.moda.app/v1 ``` ## Authentication Authenticate by including an API key as a Bearer token in the `Authorization` header. Generate API keys from **Settings > Developer > REST API** in the Moda app. ``` Authorization: Bearer moda_live_abc123... ``` See [Authentication](/api/authentication) for details on creating keys, available scopes, and security best practices. ## Quick example List your canvases with a single curl command: ```bash curl https://api.moda.app/v1/canvases \ -H "Authorization: Bearer moda_live_abc123..." ``` Response: ```json { "canvases": [ { "id": "550e8400-e29b-41d4-a716-446655440000", "name": "Marketing Website", "url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "updated_at": "2025-03-15T10:30:00Z" } ], "total": 42, "limit": 20, "offset": 0 } ``` ## What you can do | Area | Capabilities | | ----------------- | ------------------------------------------------------------------------------------------- | | **Canvases** | List and search your canvases | | **Designs** | Extract semantic pseudo-HTML, design tokens, page metadata, and export as PNG/JPEG/PDF/PPTX | | **Jobs** | Start AI design tasks, poll for progress, list recent jobs | | **Organizations** | List your organizations and teams | | **Brand Kits** | List, create, and update brand kits | | **Uploads** | Upload files for use as attachments in design tasks | | **Remix** | Duplicate a canvas and optionally apply AI edits | ## Rate limiting The API allows **120 requests per minute** per API key. If you exceed this limit, requests return `429 Too Many Requests` with a `Retry-After` header indicating how many seconds to wait. ## Error format Every error response carries a single structured envelope nested under an `error` key: ```json { "error": { "type": "not_found", "code": "file_not_found", "message": "Canvas cvs_abc123 not found", "doc_url": "https://docs.moda.app/errors/file_not_found", "request_id": "019d8996-16b3-73ee-841a-5bc5038eb972" } } ``` ### Fields | Field | Type | Notes | | ---------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `type` | `string` | Stable high-level category. One of `invalid_request`, `authentication`, `permission`, `not_found`, `conflict`, `rate_limited`, `idempotency_conflict`, `unprocessable`, `upstream_error`, `internal_error`. Branch your retry logic on this. | | `code` | `string` | Narrow machine-readable identifier for the specific failure. Stable once published; each code maps to a `doc_url`. | | `message` | `string` | Human-readable message for developers. Not localized, not user-facing. | | `doc_url` | `string` | Permalink to the documentation page for this `code`. | | `request_id` | `string` | Correlator echoed from the `X-Request-ID` response header. Include it when contacting support -- it's how we find your request in our logs. | | `causes` | `array?` | Optional. A list of nested error envelopes for aggregated failures (e.g. a multi-page export where individual pages failed). Each entry is itself a full `error` object. | | `details` | `object?` | Optional. Code-specific structured detail. For validation errors (`code: "validation_failed"`), contains `{"fields": [{"field": "body.canvas_id", "code": "string_too_short"}, ...]}`. | | `retry_after_ms` | `number?` | Optional. Hint in milliseconds for transient and rate-limited errors. | ### Status codes | Status | Type | Typical causes | | ----------------- | ----------------------------------- | --------------------------------------------------------------------- | | `400` | `invalid_request` | Bad parameters, malformed JSON, unknown canvas format | | `401` | `authentication` | Missing or invalid API key | | `403` | `permission` | Key lacks the required scope, or resource belongs to a different team | | `404` | `not_found` | Resource does not exist or is not visible to the key | | `409` | `conflict` / `idempotency_conflict` | Name collision, or an idempotency key reused with a different body | | `422` | `unprocessable` | Request is well-formed but fails validation | | `429` | `rate_limited` | Per-key or per-org rate / concurrency limit exceeded | | `502`/`503`/`504` | `upstream_error` | A third-party service (e.g. web scrape, model provider) failed | | `500` | `internal_error` | Unexpected server error -- include `request_id` if reporting | ### Client guidance - **Branch on `type`, not status code alone.** Status codes collapse distinct failure modes together; `type` separates `rate_limited` from `idempotency_conflict` even though both are `409`-adjacent. - **Log `request_id` on every error.** It is present on every response (success and failure) both in the body and in the `X-Request-ID` header. Pass it to support if you need help diagnosing a specific call. - **Retry on `upstream_error` and `rate_limited`.** Everything else is either permanent or requires you to fix the request. - **Do not parse `message`.** It can change without notice. Use `type` and `code` for branching, `message` only for display. ## Use Moda docs in your AI editor Give your AI agent direct access to these docs while building with the API. Using [mcpdoc](https://github.com/langchain-ai/mcpdoc) by LangChain, your agent can search and read Moda documentation without you having to copy-paste. ```bash claude mcp add mcpdoc -- uvx mcpdoc --urls "https://docs.moda.app/llms.txt" ``` Go to **Settings > Extensions** and add a new MCP server with these settings: ```json { "mcpServers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } ``` Open **Cursor Settings > MCP** and add a new server, or add to `~/.cursor/mcp.json`: ```json { "mcpServers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } ``` Add to your VS Code settings (`settings.json`): ```json { "mcp": { "servers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } } ``` You can also access the docs as plain text for any LLM: - **Index:** [docs.moda.app/llms.txt](https://docs.moda.app/llms.txt) - **Full docs:** [docs.moda.app/llms-full.txt](https://docs.moda.app/llms-full.txt) ## Next steps - [Authentication](/api/authentication) -- Create and manage API keys - [Webhooks](/api/webhooks) -- Receive notifications when jobs complete --- ## Webhooks URL: https://docs.moda.app/api/webhooks When you start a design job via `POST /jobs` or `POST /remix`, you can provide a `callback_url` to receive an HTTP notification when the job finishes. This lets you avoid polling `GET /jobs/{job_id}` and instead react to completion events asynchronously. ## Setting up a webhook Include a `callback_url` when starting a job: ```bash curl -X POST https://api.moda.app/v1/jobs \ -H "Authorization: Bearer moda_live_abc123..." \ -H "Content-Type: application/json" \ -d '{ "prompt": "Create a modern SaaS landing page", "callback_url": "https://your-server.com/webhooks/moda" }' ``` When the job reaches a terminal state (`completed`, `failed`, or `cancelled`), Moda sends a `POST` request to your `callback_url`. ## Webhook payload The payload is a JSON object with the following fields: ```json { "event": "job.completed", "job_id": "990e8400-e29b-41d4-a716-446655440000", "canvas_id": "550e8400-e29b-41d4-a716-446655440000", "status": "completed", "task": "Create a modern SaaS landing page", "ops_count": 42, "timestamp": "2025-03-15T10:32:15Z", "attempt_count": 1, "error": null } ``` | Field | Type | Description | | --------------- | ---------------- | ------------------------------------------------------------- | | `event` | `string` | Event type: `job.completed`, `job.failed`, or `job.cancelled` | | `job_id` | `string` | Job UUID | | `canvas_id` | `string` | Canvas that was created or edited | | `status` | `string` | Terminal status: `completed`, `failed`, or `cancelled` | | `task` | `string` | The original prompt | | `ops_count` | `integer` | Total canvas operations applied | | `timestamp` | `string` | Event timestamp (ISO 8601) | | `attempt_count` | `integer` | Number of job execution attempts | | `error` | `string \| null` | Error message if the job failed, otherwise `null` | ## Verifying webhook signatures Every webhook request includes two headers for signature verification: | Header | Description | | --------------------- | -------------------------------------------------- | | `X-Webhook-Signature` | HMAC-SHA256 signature in the format `v1=` | | `X-Webhook-Timestamp` | Unix timestamp (seconds) when the webhook was sent | Each API key has its own unique webhook signing secret, shown once when the key is created. You can find it in the credentials banner alongside your API key in **Settings > Developer > REST API**. Store it securely -- it cannot be retrieved later. The signature is computed over the string `{timestamp}.{request_body}` using HMAC-SHA256. To verify: 1. Extract the timestamp from the `X-Webhook-Timestamp` header 2. Concatenate: `{timestamp}.{raw_request_body}` 3. Compute `HMAC-SHA256(signing_secret, concatenated_string)` 4. Compare the result with the signature value after the `v1=` prefix ### Verification example (Node.js) ```javascript import crypto from 'node:crypto'; function verifyWebhook(signingSecret, requestBody, signatureHeader, timestampHeader) { const message = `${timestampHeader}.${requestBody}`; const expected = crypto.createHmac('sha256', signingSecret).update(message).digest('hex'); const received = signatureHeader.replace('v1=', ''); return crypto.timingSafeEqual(Buffer.from(expected), Buffer.from(received)); } ``` ### Verification example (Python) ```python import hashlib import hmac def verify_webhook( signing_secret: str, request_body: bytes, signature_header: str, timestamp_header: str, ) -> bool: message = f"{timestamp_header}.{request_body.decode()}" expected = hmac.new( signing_secret.encode(), message.encode(), hashlib.sha256 ).hexdigest() received = signature_header.removeprefix("v1=") return hmac.compare_digest(expected, received) ``` ## Retry behavior If your endpoint returns a non-2xx status code or does not respond within 30 seconds, Moda retries the webhook up to 3 times with exponential backoff: | Attempt | Delay | | --------- | ---------- | | 1st retry | 1 second | | 2nd retry | 5 seconds | | 3rd retry | 30 seconds | After all retries are exhausted, the webhook is dropped. You can still retrieve the job status via `GET /jobs/{job_id}`. ## Best practices - **Return 200 quickly.** Process the webhook payload asynchronously to avoid timeouts. Acknowledge receipt first, then handle the event. - **Verify signatures.** Always validate the `X-Webhook-Signature` header before trusting the payload. - **Check timestamps.** Reject webhooks with timestamps more than 5 minutes old to prevent replay attacks. - **Handle duplicates.** In rare cases, the same event may be delivered more than once. Use `job_id` as an idempotency key. - **Use HTTPS.** Your `callback_url` must use HTTPS to protect the payload in transit. --- ## FAQ URL: https://docs.moda.app/help/faq ## What can I create with Moda? Moda is built for static and presentation-based visual content: slide decks, social media graphics, marketing collateral, documents, UI mockups, and diagrams. It is not designed for website development, video editing, 3D design, or photo editing. See [What is Moda?](/help) for a full overview. ## How do credits work? AI credits measure your usage of AI-powered features. Every AI action — generating a design, creating an image, asking the agent to edit — consumes credits. Different actions cost different amounts depending on complexity and the AI model used (Lite at 0.5x, Standard at 1x, Pro at 1.5x). Credits reset monthly and do not roll over. See [How Credits Work](/help/billing/credits) for details. ## What's included in the free plan vs Pro? The Free plan includes Standard and Lite design models, community support, and a monthly credit allowance. Pro adds the Pro design model, email support, pooled team credits, and a larger credit allowance. Ultra adds unlimited brand kits, SSO/SAML, shared team workspaces, and priority support. All plans include unlimited projects and real-time collaboration. See the [Pricing page](https://moda.app/pricing) for the full comparison. ## I upgraded but my account still shows the free plan - Refresh the page — plan changes may take a moment to propagate - Check your email for a payment confirmation from Stripe - Go to **Settings → Billing** to verify your plan status - If the issue persists, contact support ## How do I get Moda to use my brand kit? Make sure your brand kit is **selected** in the prompt bar before creating a design. The AI agent will automatically use your brand colors, fonts, logo, and visual style. You can also mention specific brand elements in your prompt for more control. See [Using Your Brand Kit](/help/brand-kit/using-your-brand) for tips. ## Why is my design taking so long to generate? Design generation typically takes 1–5 minutes for a multi-page slide deck, and less for simpler designs. Complex prompts with web research, image generation, or many pages take longer. If a design has been generating for more than 10 minutes, try refreshing the page. Your work is auto-saved. ## My design is stuck on "Building" — what should I do? - Check the chat panel to see if the agent is still actively working - Wait up to 5–7 minutes for complex designs - Refresh the page — your work is auto-saved, so you won't lose progress - Try starting a new design with a clearer, more specific prompt See [AI Agent Troubleshooting](/help/ai-agent/troubleshooting) for more details. ## How do I export to PowerPoint? Click the **Download** button in the toolbar and select **PowerPoint** as the format. Slide-type canvases default to PPTX export. Note that some complex elements may be rasterized in the export, and animations do not transfer. See [Export Formats](/help/export/formats) for details on what transfers. ## Why does my export look different from the web? PowerPoint and Google Slides exports are best-effort conversions. Complex vector elements, blending modes, SVG-backed assets, and advanced styling may be rasterized or simplified. Google Slides also has extra limitations around editable text alpha and some image treatments, so translucent text or masked images may look different after export. Fonts may also render differently if the recipient doesn't have the same fonts installed. For the most faithful reproduction, use PDF export. See [Export Troubleshooting](/help/export/troubleshooting). ## Can I insert video into my slides? Moda does not support embedding video playback within designs. However, you can **export** designs with animations as MP4 video or GIF. See [Export Formats](/help/export/formats) for details. ## Does Moda support languages other than English? ## What browsers does Moda work on? Moda requires **WebGPU** support. It works best on **Chrome** and **Edge**. Firefox and Safari are supported but may require enabling WebGPU in browser settings. See [System Requirements](/help/getting-started/system-requirements) for the overview, or [WebGPU Troubleshooting](/help/getting-started/webgpu-troubleshooting) for browser-specific steps. ## How do I enable WebGPU? Each browser has a different process, and on Chrome or Edge the first step is usually checking graphics acceleration and `://gpu`, not enabling random flags. See [WebGPU Troubleshooting](/help/getting-started/webgpu-troubleshooting) for step-by-step browser-specific instructions. ## Does Moda work on mobile? Moda works on mobile devices with limitations. The canvas is viewable and basic interactions work, but full design editing is best done on desktop. Presenting slideshows works on mobile. iOS in-app browsers may have issues — open in Safari or your default browser instead. ## Are my designs private? Can I use them commercially? Your designs are **private by default**. No one can see them unless you share a link. Designs are only accessible to you and anyone you explicitly share them with. See [Trust & Security](/help/trust-security) for more details. --- ## What is Moda? URL: https://docs.moda.app/help Moda is an AI-powered design tool that creates slide decks, social media posts, marketing collateral, and other visual content. You describe what you want, and an AI agent builds the design for you on a 2D vector canvas. ## What can I create? Moda is built for **static and presentation-based visual content**: - **Slide decks**: pitch decks, quarterly reviews, all-hands presentations, team updates - **Social media graphics**: Instagram posts, LinkedIn banners, YouTube thumbnails, stories and reels - **Marketing collateral**: one-pagers, case studies, event invitations, sales materials - **Documents**: PDFs, reports, branded documents - **UI mockups**: landing pages, dashboards, pricing pages - **Diagrams and charts**: data visualizations, workflows ## Quickstart Getting from zero to your first design takes about 3 minutes: 1. **Create your account** at [moda.app](https://moda.app) 2. **Set up a brand kit**: import your brand from a website URL, or add your logo, colors, and fonts manually. This is highly recommended: designs created with a brand kit are significantly better and more consistent. 3. **Start your first design**: type a prompt describing what you want, or upload a file (PDF, PPTX, or images) to start from The AI agent will build your design on the canvas. From there you can edit, refine, and export. ## Next steps - [Your Account](/help/getting-started/account): plans, billing, and team setup - [Your First Design](/help/getting-started/first-design): different ways to start a design - [Brand Kit](/help/brand-kit/setup): set up your brand identity - [The AI Agent](/help/ai-agent/how-it-works): how the AI designs for you - [The Canvas](/help/canvas): editing, tools, shortcuts, and version history - [Export & Sharing](/help/export/formats): get your designs out of Moda --- ## Authentication URL: https://docs.moda.app/mcp/authentication The hosted MCP server at `mcp.moda.app` uses OAuth 2.1 to authenticate users. Your editor handles the OAuth flow automatically — you just sign in through your browser when prompted. ## When is authentication required? | Action | Auth required | | -------------------------------------------------- | ------------- | | Fetch a **public** share link (`moda.app/s/...`) | No | | Fetch a **private** canvas (`moda.app/canvas/...`) | Yes | | List your canvases | Yes | | Search your canvases | Yes | Public share links work without authentication in both local and remote server modes. Private canvases and canvas listing/searching require the remote server with OAuth. ## How the OAuth flow works When you first use the MCP server, your editor initiates the OAuth flow: 1. Your editor sends a request to the MCP server 2. The server responds with `401 Unauthorized` 3. Your editor discovers the OAuth endpoints automatically 4. A browser window opens for you to sign in via Moda (powered by Clerk) 5. After sign-in, tokens are exchanged and stored by your editor 6. All subsequent requests are authenticated automatically If you're already signed in to [moda.app](https://moda.app) in your browser, the sign-in step is instant — your existing session is detected automatically. ## Token lifecycle | Token | Lifetime | Notes | | ------------- | -------- | -------------------------------------- | | Access token | 1 hour | Refreshed automatically by your editor | | Refresh token | 30 days | Rotated on each use for security | Your editor manages token refresh transparently. You should rarely need to re-authenticate unless you revoke access or your refresh token expires. ## Local server authentication The local `stdio` server does not use authentication. It can only access **public** share links. To access private canvases, use the remote server at `mcp.moda.app`. ## Revoking access To disconnect the MCP server from your Moda account: - **Claude Desktop / claude.ai**: Go to **Settings > Connectors** and disconnect or remove the Moda connector - **Claude Mobile**: Disconnect the Moda connector from [claude.ai/settings](https://claude.ai/settings), then restart the mobile app if needed - **Claude Code**: Run `claude mcp remove moda` - **Cursor**: Remove the MCP server from Cursor Settings > MCP - **VS Code**: Remove the Moda server entry from your MCP configuration in `settings.json` This removes the stored tokens or connector authorization for that host app. You'll need to re-authenticate if you add the server again. ## Security - OAuth 2.1 with PKCE (Proof Key for Code Exchange) prevents authorization code interception - Access tokens are short-lived JWTs (1 hour) - Refresh tokens are rotated on each use - All communication with `mcp.moda.app` uses TLS - The MCP server never stores your Moda password — authentication is delegated to Clerk --- ## Creating Designs with Claude URL: https://docs.moda.app/mcp/create-designs The most popular way to use Moda's MCP server is to **create designs by chatting with Claude**. Instead of opening a design tool and building layouts by hand, you describe what you want and Claude creates it for you in Moda. This works from any Claude environment — the desktop app, the browser at claude.ai, Claude Code in your terminal, or even Claude on mobile. Claude is the primary workflow covered here because it's the most common for Moda design creation. The same MCP tools can also be used from Cursor and other MCP-capable clients, but the exact UX depends on the host app. ## How it works 1. You ask Claude to create a design (a slide deck, social post, ad, report, etc.) 2. Claude calls the `start_design_task` tool on the Moda MCP server 3. Moda's AI design agent starts building the canvas 4. Claude polls `get_job_status(job_id)` until the job is complete 5. Claude gives you a link to your finished design in Moda 6. You can open it, edit it, export it, or ask Claude to revise it Every design Claude creates is fully editable in Moda — you're never locked into what the AI produces. ## Quick setup If you haven't connected Moda yet, it takes about 30 seconds. Follow the [setup guide](/mcp/setup) for your environment (Claude Desktop, claude.ai, Claude Code, Claude mobile, Cursor, or VS Code). Before your first prompt: 1. In Claude, click the **+** button in the chat box. 2. Open **Connectors**. 3. Enable **Moda** for the current conversation. If you belong to multiple Moda organizations or teams, ask Claude to switch to the right workspace first: ``` What Moda organization and team am I currently using? ``` ``` Switch Moda to the "Acme Corp" organization and the "Marketing" team. ``` ## Example prompts Here are real prompts you can copy and paste into Claude right now. Be explicit about the output type in every prompt, especially for non-slide work. Phrases like `PDF report`, `Instagram post`, `diagram`, `flowchart`, or `presentation slides` help Moda choose the right format. ### Slide decks and presentations ``` Create a 10-slide pitch deck for a B2B SaaS startup called "Relay" that does automated customer onboarding. Include a title slide, problem, solution, how it works, market size, business model, traction, team, and a closing CTA. ``` ``` Turn these meeting notes into a clean presentation: [paste your notes here] ``` ``` Create a quarterly business review deck with sections for revenue, customer growth, product updates, and next quarter goals. Use a professional dark theme. ``` ### Social media posts ``` Create 5 Instagram carousel slides announcing our new product feature. The feature is [describe feature]. Use bold typography and a modern layout. ``` ``` Design a LinkedIn post image announcing that we just raised a Series A. Keep it clean and professional. ``` ``` Create a set of 4 social media ads for a summer sale — 20% off everything. Make versions for Instagram (1080x1080) and Instagram Stories (1080x1920). ``` ### Marketing and ads ``` Create a one-page product flyer for our new wireless headphones. Key features: 40hr battery, active noise cancellation, $149 price point. Use a clean white background with product-focused layout. ``` ``` Design a banner ad (1200x628) for a webinar called "The Future of AI in Design" happening on May 15th. Include a register CTA. ``` ### Reports and documents ``` Create a project status report as a PDF. The project is "Website Redesign", it's 65% complete, on track for the June deadline. Include sections for accomplishments, risks, and next steps. ``` ``` Create a one-page PDF resume for a senior product designer with 8 years of experience. Use a modern, minimal layout. ``` ### Diagrams and visuals ``` Create a flowchart showing our user onboarding process: Sign up → Verify email → Choose plan → Connect integrations → Dashboard ``` ``` Create an organizational chart diagram for a 20-person startup with Engineering, Design, Product, and Operations teams. ``` ## Using your brand If your team has a default brand kit in Moda, Claude applies it to designs automatically. Your brand colors, fonts, logos, and style guidelines are used without you having to mention them. To set up a brand kit from Claude: ``` Create a brand kit from our website: https://yourcompany.com ``` Moda will scrape your site and extract colors, fonts, logos, and brand guidelines. The first brand kit created for a team becomes the default automatically. If your team already has a default brand kit, you can ask Claude to use the new one explicitly: ``` Create a slide deck using the "Acme Corp" brand kit. ``` You can also ask Claude to check what brand assets are available: ``` What brand kits do we have set up? Show me the colors and fonts. ``` ## Iterating on designs Claude remembers the context of your conversation, so you can refine designs with follow-up messages: ``` Make the headline bigger and change the background to dark blue. ``` ``` Add a third slide with customer testimonials. ``` ``` Swap the layout to put the image on the left and text on the right. ``` Each follow-up modifies the same canvas — Claude tracks the conversation automatically. You don't need to start over. ## Attaching references You can give Claude reference images, PDFs, or existing Moda designs to work from: ``` Here's a screenshot of a landing page I like: [paste image] Create something similar but with our branding. ``` ``` Use this PDF as the content source and turn it into a slide deck: [paste or upload PDF] ``` ``` Look at my existing canvas "Q1 Marketing Deck" and create a Q2 version with updated numbers. ``` ## Specifying format and dimensions For best results, tell Claude what kind of design you want: | What you're making | Suggested prompt addition | | ------------------------- | ------------------------------------------------ | | Slide deck / presentation | "Create slides" or "Create a presentation" | | Social media post | "Create an Instagram post" (or specify platform) | | PDF / report / document | "Create a PDF report" or "Create a one-pager" | | Diagram / flowchart | "Create a diagram" or "Create a flowchart" | | UI mockup | "Create a UI mockup" or "Design a screen" | You can also specify exact dimensions: ``` Create a social media post at 1080x1080 pixels. ``` ``` Create presentation slides at 1920x1080. ``` ## Exporting your designs Once Claude creates a design, you can export it directly from the conversation. Under the hood, the MCP flow is: 1. `start_design_task(...)` 2. `get_job_status(job_id)` until `can_export == true` or the job reaches a terminal failure state 3. `export_design(canvas_id=..., format=...)` If export is attempted too early, Moda MCP returns a structured `not_ready` response with a retry interval instead of a tool error. Then Claude can export from the conversation: ``` Export that as a PDF. ``` ``` Export the slide deck as a PowerPoint file. ``` ``` Export page 1 as a PNG. ``` Supported formats: PNG, JPEG, PDF, and PPTX. ## Tips for great results - **Be specific about content.** The more detail you give Claude about text, structure, and layout, the better the output. Vague prompts produce generic designs. - **Mention the format.** Saying "create a slide deck" vs. "create a social post" helps Moda choose the right canvas dimensions and layout style. - **Provide real content.** Instead of "add some text about our product," paste the actual copy you want on the design. - **Iterate in conversation.** Don't try to get everything perfect in one prompt. Start with the structure, then refine colors, layout, and content in follow-ups. - **Use brand kits.** Setting up a brand kit once means every design automatically uses your colors, fonts, and logos. - **Attach references.** If you have a design you like, share it as a reference image. Claude can match the style while using your content. ## What's next - [Setup Guide](/mcp/setup) — Detailed setup for all editors - [Tools Reference](/mcp/tools) — Full reference for `start_design_task`, `remix_design`, and all other tools - [Design-to-Code Guide](/mcp/design-to-code) — The reverse workflow: turning Moda designs into code --- ## Design-to-Code Workflow URL: https://docs.moda.app/mcp/design-to-code This guide covers the recommended workflow for converting Moda designs to production code using the MCP server and an AI coding agent. ## The basic workflow 1. **Design in Moda** — Create your UI design on the Moda canvas 2. **Share** — Generate a public share link (or use the private canvas URL with auth) 3. **Prompt** — Paste the link in your editor and tell the agent what to build 4. **Review** — Check the generated code and iterate ## Writing effective prompts The quality of generated code depends heavily on your prompt. Be specific about: ### Framework and language ``` Build this as a React component using TypeScript and Tailwind CSS: https://moda.app/s/abc123 ``` ### Component structure ``` Implement this as three separate components: - LoginForm (the card with inputs) - SocialLoginButtons (the OAuth buttons) - LoginPage (the full page layout) Design: https://moda.app/s/abc123 ``` ### Responsive behavior ``` Build this hero section as a responsive React component. Stack vertically on mobile, side-by-side on desktop. https://moda.app/s/abc123 ``` ## Multi-page designs For slide decks or multi-page canvases, the agent can work through pages sequentially: ``` This is a 4-page marketing site design. Implement each page as a separate Next.js route. Use shared components where the design repeats elements across pages. https://moda.app/s/abc123 ``` The agent will call `list_moda_pages` to discover the pages, then fetch each one with `get_moda_design`. ## Generating theme files If you already have a component library and just need design tokens: ``` Extract the design tokens from this canvas and create a Tailwind theme configuration file: https://moda.app/s/abc123 ``` The agent will use `get_moda_design_tokens` to extract colors, fonts, and spacing. ## Tips for better results ### Name your layers The MCP server's transformer uses layer names to determine semantic meaning. A layer named `cta-button` produces a `Button` tag; an unnamed rectangle might be interpreted as a `Box`. See [Naming Layers](/mcp/naming-layers) for the full keyword reference. ### Use design variables Colors and values defined as Moda variables appear in the design tokens output with their names, making it easier for the agent to create meaningful CSS custom properties or theme tokens. ### Keep designs clean - Remove hidden layers you don't need — they won't appear in the output, but keeping your canvas tidy helps - Use Moda's auto-layout (flex) features for consistent spacing — the transformer detects flex layouts and outputs them as `display: flex` with `gap` - Group related elements — groups become semantic containers in the output ### Use exports for complex layouts When the pseudo-HTML alone doesn't capture the visual intent, the agent can export a visual reference with `export_design` (use `png` format for design-to-code). This is especially useful for: - Overlapping elements - Complex gradients - Precise visual spacing that the structured data doesn't capture ## Common patterns ### Design system from canvas ``` Create a design system (colors, typography, spacing) from this Moda canvas. Output as CSS custom properties. https://moda.app/s/abc123 ``` ### Pixel-perfect implementation ``` Implement this design pixel-perfect as a React component. Use exact colors, fonts, and spacing from the design. https://moda.app/s/abc123 ``` ### Component library ``` This canvas contains a component library. Generate a Storybook story for each component on the page. https://moda.app/s/abc123 ``` --- ## Getting Started with Moda MCP URL: https://docs.moda.app/mcp/getting-started Moda is a 2D vector canvas tool for creating slide decks, social media posts, ads, and other visual content. The Moda MCP server connects Moda to Claude and other AI agents through the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/). Once connected, you can **create designs just by chatting** — describe what you want and Claude builds it for you in Moda. This works from anywhere you use Claude: the desktop app, claude.ai in your browser, Claude Code in the terminal, Claude on mobile, Cursor, VS Code, and other MCP-compatible environments. This guide uses Claude examples because it's the most common setup for Moda. Cursor and other MCP-capable clients can call the same Moda tools too, and OpenAI also supports MCP through its app and API surfaces. For example: - Ask Claude to **create a pitch deck** from your meeting notes. - Generate **dozens of social media ads** for a campaign in one conversation. - Turn a product brief into a **branded one-pager** without opening a design tool. - Have Claude **implement a Moda design as code** in React, Vue, or HTML/CSS. Once connected, Claude can treat Moda as both **a creative output surface and a design system**. ## What you can do - **Create designs from a conversation** — Ask Claude to generate slide decks, social posts, ads, reports, and more. Claude creates a fully editable Moda canvas and gives you a link. See the [Creating Designs guide](/mcp/create-designs) for prompts and examples. - **Iterate with follow-ups** — Refine any design by continuing the conversation. "Make the headline bigger," "add a testimonial slide," "switch to dark mode" — Claude modifies the same canvas. - **Use your brand automatically** — Set up a brand kit once (Claude can do this from your website URL) and every design uses your colors, fonts, and logos. - **Design to code** — Paste a Moda share link and Claude generates framework-specific code (React, Vue, HTML/CSS, and more). See the [Design-to-Code guide](/mcp/design-to-code). - **Extract design tokens** — Pull colors, fonts, spacing, and corner radii from any canvas to build consistent theme files. - **Browse and search** — List your canvases or search by name directly from your conversation without switching to the browser. ## How it works Moda uses the [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) — a standard for connecting AI agents to external tools and data sources. When you connect Claude to Moda's MCP server, Claude gains the ability to create, read, and manage designs on your behalf. The most common flow looks like this: ``` You describe what you want → Claude creates a Moda canvas → You get a link to your design ``` Claude can also work in the other direction: ``` You share a Moda design link → Claude reads the design → Claude generates code ``` Because MCP is a standard protocol, Claude can combine Moda with other tools in the same conversation — pull content from a knowledge base, look up data from an API, and create a design that uses all of it. ## Two common workflows ### 1. Create designs from a conversation The most popular workflow. Ask Claude to create visual content and it builds a Moda canvas for you. - Generate a pitch deck from a product brief - Create dozens of social ads for a campaign - Turn meeting notes into presentation slides - Produce branded marketing visuals from structured data - Design reports, one-pagers, resumes, and flyers Because Claude can access other tools in the same conversation (knowledge bases, APIs, docs, etc.), it can combine those inputs with Moda to generate **brand-aligned visuals automatically**. Every canvas Claude creates is fully editable in Moda. See the [Creating Designs guide](/mcp/create-designs) for detailed prompts and tips. ### 2. Turn designs into production code Start with a design in Moda and ask Claude to implement it in your preferred framework. - Convert a login page design into a React component - Generate HTML/CSS from a marketing page layout - Extract design details (colors, fonts, spacing) into a theme file - Build a full component library from existing designs Because Moda provides structured design data instead of screenshots, Claude can generate much more accurate UI code. See the [Design-to-Code guide](/mcp/design-to-code) for best practices. ## Quickstart ### Prerequisites - A [Moda](https://moda.app) account (free to start) - A supported MCP-capable host app: [Claude Desktop](https://claude.ai/download), [claude.ai](https://claude.ai), [Claude Code](https://claude.ai/code), [Claude mobile](https://claude.ai/download), [Cursor](https://cursor.com), or [VS Code](https://code.visualstudio.com/) with Copilot ### Connect to the remote server The hosted MCP server at `mcp.moda.app` requires no local installation. Authentication is handled via OAuth — you sign in through your browser on first use. Go to **Settings > Connectors** and add Moda as a custom connector with the URL `https://mcp.moda.app`. You'll be prompted to sign in on first use. Go to **Settings > Connectors** on [claude.ai](https://claude.ai) and add Moda as a custom connector with the URL `https://mcp.moda.app`. You'll authorize via OAuth on first use. **Team and Enterprise plans:** An admin must first add the Moda connector in **Admin Settings > Connectors**. After that, individual members can connect from their personal **Settings > Connectors**. Run in your terminal: ```bash claude mcp add --transport http moda https://mcp.moda.app ``` Then type `/mcp` to see your connected servers. Click **Authenticate** next to the Moda server to sign in via your browser. Connectors set up on claude.ai sync to the Claude mobile app automatically. Add the Moda connector on [claude.ai/settings](https://claude.ai/settings) and it will be available on your phone. This lets you create and iterate on designs from your phone. Open **Cursor Settings > MCP** and add a new server, or add to `~/.cursor/mcp.json`: ```json { "mcpServers": { "moda": { "type": "streamable-http", "url": "https://mcp.moda.app" } } } ``` After adding the server, go to **Cursor Settings > MCP** and click the **Authenticate** button next to the Moda server. This opens a browser window where you sign in to your Moda account. Add to your `settings.json`: ```json { "mcp": { "servers": { "moda": { "type": "streamable-http", "url": "https://mcp.moda.app" } } } } ``` VS Code will prompt you to authenticate when you first use an MCP tool. Click the sign-in link to authorize in your browser. ### Enable Moda in Claude chats This step only applies to Claude's chat apps (`Claude Desktop`, `claude.ai`, and `Claude Mobile`). If you're using `Claude Code`, `Cursor`, or `VS Code`, you can skip this section and go straight to trying prompts. After you add and authenticate the connector, turn it on for the chat where you want to use it. 1. Click the **+** button in the chat box. 2. Open **Connectors**. 3. Enable **Moda** for that conversation. If the connector is added in settings but not enabled in the current chat, Claude won't be able to call Moda's tools. ### Choose the right workspace If you belong to multiple Moda organizations or teams, Moda uses your default workspace unless you switch it first. Ask your AI assistant: ``` What Moda organization and team am I currently using? ``` ``` Switch Moda to the "Acme Corp" organization and the "Marketing" team. ``` This helps make sure new designs, exports, and brand kits are created in the correct workspace. ### Try it out Ask Claude to create your first design: ``` Create a 5-slide pitch deck for a mobile app called "FocusTime" that helps people reduce screen time. Include a title slide, the problem, the solution, key features, and a call to action. ``` Claude will create a new Moda canvas and give you a link to view and edit it. You can also work with existing designs. Open a Moda canvas, click **Share** to get a link, and paste it into your conversation: ``` Build this login page as a React component: https://moda.app/s/your-share-token ``` Claude will fetch the design as structured data and generate production-ready code. ## Give your AI agent access to Moda docs If you're building with the Moda REST API, you can give your AI agent direct access to these docs using the [mcpdoc](https://github.com/langchain-ai/mcpdoc) MCP server by LangChain. This lets the agent search and read Moda documentation without you having to copy-paste. The mcpdoc server runs locally, so it's available in editors that support local MCP servers (not claude.ai or Claude mobile). **Prerequisite:** mcpdoc runs via `uvx`, which ships with [uv](https://docs.astral.sh/uv/). Install it first if you don't have it: ```bash curl -LsSf https://astral.sh/uv/install.sh | sh ``` On macOS you can also run `brew install uv`. See the [uv installation docs](https://docs.astral.sh/uv/getting-started/installation/) for other platforms. Go to **Settings > Extensions** and add a new MCP server with these settings: ```json { "mcpServers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } ``` Run in your terminal: ```bash claude mcp add mcpdoc -- uvx mcpdoc --urls "https://docs.moda.app/llms.txt" ``` Open **Cursor Settings > MCP** and add a new server, or add to `~/.cursor/mcp.json`: ```json { "mcpServers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } ``` Add to your VS Code settings (`settings.json`): ```json { "mcp": { "servers": { "moda-docs": { "command": "uvx", "args": ["mcpdoc", "--urls", "https://docs.moda.app/llms.txt"] } } } } ``` Your agent can then look up API endpoints, authentication details, webhook formats, and more — directly from Moda's docs. You can also access the docs as plain text for any LLM: - **Index:** https://docs.moda.app/llms.txt - **Full docs:** https://docs.moda.app/llms-full.txt ## Example prompts Once connected, you can start chatting right away. Here are a few prompts to try. Be explicit about the output type in your prompt, especially for non-slide work. Phrases like `PDF report`, `Instagram carousel`, `diagram`, or `presentation slides` help Moda choose the right format. ### Create a slide deck ``` Create a 10-slide pitch deck for a developer tools startup. Include problem, solution, market, product, traction, team, and ask slides. ``` ### Create social media posts ``` Create 5 Instagram carousel slides announcing our new AI feature. Use bold typography and a modern, clean layout. ``` ### Create a report ``` Create a one-page project status report as a PDF. The project is 70% complete and on track. Include sections for progress, risks, and next steps. ``` ### Set up your brand ``` Create a brand kit from our website: https://yourcompany.com ``` ### Implement a design as code ``` Build this landing page layout as a React component: https://moda.app/s/your-share-token ``` ### Extract design details ``` Read this Moda design and create a theme file with colors, fonts, and spacing tokens. ``` ### Browse your canvases ``` Search my Moda canvases for anything related to "product launch" and summarize what's there. ``` For many more examples, see the [Creating Designs guide](/mcp/create-designs). ## What's next - [Creating Designs Guide](/mcp/create-designs) — Detailed prompts and tips for creating designs with Claude - [MCP Server Overview](/mcp) — Architecture, transport modes, and what the agent sees - [Setup Details](/mcp/setup) — Full setup instructions including local server and troubleshooting - [Tools Reference](/mcp/tools) — Detailed reference for all MCP tools - [Design-to-Code Guide](/mcp/design-to-code) — Best practices for turning designs into code --- ## Help & Support URL: https://docs.moda.app/mcp/help ## Contact us Have a question or need help? Reach out to our team at **support@moda.app**. --- ## Overview URL: https://docs.moda.app/mcp The Moda MCP server connects Claude and other AI agents to Moda through the [Model Context Protocol](https://modelcontextprotocol.io/). It works with Claude Desktop, claude.ai, Claude Code, Claude mobile, Cursor, VS Code, and other MCP-compatible environments. Claude is the most common way people use Moda today, so the guides in this section use Claude examples first. But MCP is not Claude-specific: Cursor and other MCP-capable clients can use the same Moda tools, and OpenAI also supports MCP through its app and API surfaces. ## How it works The MCP server supports two main workflows. **Design creation**: ask Claude to create or edit designs directly — it generates canvases from prompts, applies your brand kit, and can remix existing designs. **Design to code**: paste a Moda share link and Claude fetches the design as semantic pseudo-HTML with CSS properties, then translates it to any frontend framework. B[Claude calls Moda MCP tools] B --> C[Moda's AI agent builds the canvas] C --> D[You get a link to your design] D --> E[Edit in Moda, export, or ask Claude to revise]`} /> The diagram above shows the design-creation flow. The MCP server also supports the reverse — [turning existing Moda designs into code](/mcp/design-to-code). ## What the agent sees The `get_moda_design` tool returns output like this: ```html ## Page: Login Screen (1440x900) [page 1]
Welcome back Sign in to your account
## Design Tokens - Colors: #111827, #2563eb, #6b7280, #d1d5db, #f3f4f6, #ffffff - Font Inter: weights [400, 700] roles [body, heading] - Corner radii: 8px, 16px ``` The semantic tag names (`Card`, `Button`, `TextInput`, `Heading`) tell the agent **what** each element is, not just what it looks like. This produces better code than raw coordinates or screenshots alone. ## Transport modes The MCP server supports two transport modes: | Transport | Auth | Use case | | ----------------- | --------- | -------------------------------------------- | | `stdio` | None | Local IDE integrations (Cursor, Claude Code) | | `streamable-http` | OAuth 2.1 | Hosted endpoint at `mcp.moda.app` | The hosted server at `mcp.moda.app` is the easiest way to get started. See [Setup](/mcp/setup) for configuration details. ## Available tools ### Design creation | Tool | Description | Auth required | | --------------------------------------------------- | ------------------------------------- | ------------- | | [`start_design_task`](/mcp/tools#start_design_task) | Create or edit a design from a prompt | Yes | | [`get_job_status`](/mcp/tools#get_job_status) | Check progress of a design task | Yes | | [`list_jobs`](/mcp/tools#list_jobs) | List recent design jobs | Yes | | [`remix_design`](/mcp/tools#remix_design) | Duplicate canvas + optional AI edits | Yes | ### Brand kits | Tool | Description | Auth required | | ------------------------------------------------- | ------------------------------------ | ------------- | | [`list_brand_kits`](/mcp/tools#list_brand_kits) | List brand kits for a team | Yes | | [`create_brand_kit`](/mcp/tools#create_brand_kit) | Create brand kit from website URL | Yes | | [`update_brand_kit`](/mcp/tools#update_brand_kit) | Update brand kit colors, fonts, etc. | Yes | ### Canvas management | Tool | Description | Auth required | | ----------------------------------------------------- | ------------------------ | ------------- | | [`list_my_canvases`](/mcp/tools#list_my_canvases) | Browse your canvases | Yes | | [`search_canvases`](/mcp/tools#search_canvases) | Search canvases by name | Yes | | [`list_organizations`](/mcp/tools#list_organizations) | List your orgs and teams | Yes | ### Design to code | Tool | Description | Auth required | | ------------------------------------------------------------- | ------------------------------------------------- | ------------------------------ | | [`get_moda_design`](/mcp/tools#get_moda_design) | Fetch semantic pseudo-HTML and design tokens | Public links: No, Private: Yes | | [`get_moda_design_tokens`](/mcp/tools#get_moda_design_tokens) | Extract design tokens only (colors, fonts, radii) | Public links: No, Private: Yes | | [`list_moda_pages`](/mcp/tools#list_moda_pages) | List pages with dimensions and node counts | Public links: No, Private: Yes | | [`export_design`](/mcp/tools#export_design) | Export as PNG, JPEG, PDF, or PPTX | Public links: No, Private: Yes | The tables above highlight the most-used tools. The MCP server also provides `set_context` and `get_context` for session management, and `upload_file` for attaching files to design tasks. See the [full tools reference](/mcp/tools) for all 17 tools. ## Next steps - [Setup](/mcp/setup) — Install and configure the MCP server - [Creating Designs](/mcp/create-designs) — Prompts and tips for creating designs with Claude - [Authentication](/mcp/authentication) — Understand the OAuth flow for the remote server - [Tools Reference](/mcp/tools) — Detailed reference for each tool - [Design-to-Code](/mcp/design-to-code) — Best practices for turning designs into code --- ## Naming Layers URL: https://docs.moda.app/mcp/naming-layers The Moda MCP server's transformer uses layer names to determine what each element represents. Well-named layers produce better semantic tags, which leads to better generated code. ## How it works When a layer has a descriptive name, the transformer matches it against a keyword list and assigns the appropriate semantic tag. Layer names take priority over visual heuristics. For example: - A rectangle named `cta-button` becomes ` ## Design Tokens - Colors: #111827, #2563eb, #6b7280, #d1d5db, #f3f4f6, #ffffff - Font Inter: weights [400, 700] roles [body, heading] - Corner radii: 8px, 16px ``` ### Semantic tags The transformer assigns semantic tag names based on visual properties and layer names: | Tag | When used | | ----------------------- | ---------------------------------------------------------- | | `Heading` | Text with font-size >= 24px or font-weight >= 600 | | `Text` | Default text elements | | `Button` | Rectangle with text, dark fill, and button-like dimensions | | `TextInput` | Rectangle with light fill, thin border, no text | | `Image` | Element with an image fill | | `Avatar` | Small circular element with an image fill | | `Card` | Group with a background rectangle and content | | `Row` | Container with `flex-direction: row` | | `Column` | Container with `flex-direction: column` | | `Divider` | Line element | | `Nav`, `Hero`, `Footer` | Matched from layer names | Layer names in Moda take priority over visual heuristics. See [Naming Layers](/mcp/naming-layers) for best practices. ### Example usage ``` # Fetch all pages get_moda_design(url="https://moda.app/s/abc123") # Fetch a specific page get_moda_design(url="https://moda.app/s/abc123", page_number=2) # Fetch a private canvas (requires authentication) get_moda_design(url="https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000") ``` ### Notes - The output is intentionally HTML-like so agents can map it directly to React, Vue, or HTML components - Design tokens are appended as a summary at the end of the output - For multi-page canvases, omitting `page_number` returns all pages in a single response - Hidden layers are excluded from the output - Rich text extracts the first style span's properties; mixed-style paragraphs use the first style encountered --- ## get_moda_design_tokens Returns only the design tokens from a canvas — colors, fonts, variables, and corner radii — as structured JSON. Use this when you need to generate theme configuration files without the full semantic layout. ### Parameters | Parameter | Type | Required | Description | | ------------- | ----------------- | -------- | ------------------------------------------------------ | | `url` | `string` | Yes | Moda share URL, private canvas URL, or raw share token | | `page_number` | `integer \| null` | No | 1-indexed page number. Omit for all pages. | ### Returns ```json { "variables": { "primary": "#2563eb", "secondary": "#6b7280", "background": "#f3f4f6" }, "colors": ["#111827", "#2563eb", "#6b7280", "#d1d5db", "#f3f4f6", "#ffffff"], "fonts": [ { "family": "Inter", "weights": [400, 700], "roles": ["body", "heading"] } ], "radii": ["8px", "16px"], "dimensions": { "width": 1440, "height": 900 } } ``` | Field | Type | Description | | ------------ | ---------- | ----------------------------------------------------------------------- | | `variables` | `object` | Named design variables defined in the canvas (colors, numbers, strings) | | `colors` | `string[]` | All unique colors used in the canvas | | `fonts` | `object[]` | Font families with weights and inferred roles | | `radii` | `string[]` | All unique corner radii used | | `dimensions` | `object` | Canvas page dimensions (width and height) | ### Example usage ``` # Extract tokens for theme generation get_moda_design_tokens(url="https://moda.app/s/abc123") # Extract tokens from a specific page get_moda_design_tokens(url="https://moda.app/s/abc123", page_number=1) ``` ### Notes - Variables defined in the Moda canvas (via the variables panel) appear in the `variables` field with their default values - Colors are deduplicated and sorted - Font roles (`body`, `heading`) are inferred from usage context (font size and weight) --- ## list_moda_pages Returns metadata about each page in a canvas, including page names, dimensions, and the number of design elements. Use this to understand the structure of multi-page canvases before fetching specific pages. ### Parameters | Parameter | Type | Required | Description | | --------- | -------- | -------- | ------------------------------------------------------ | | `url` | `string` | Yes | Moda share URL, private canvas URL, or raw share token | ### Returns ```json { "canvas_name": "Marketing Website", "total_pages": 3, "pages": [ { "page_number": 1, "name": "Hero Section", "width": 1440, "height": 900, "node_count": 12 }, { "page_number": 2, "name": "Features", "width": 1440, "height": 1200, "node_count": 24 } ] } ``` | Field | Type | Description | | --------------------- | --------- | ------------------------------------- | | `canvas_name` | `string` | Name of the canvas | | `total_pages` | `integer` | Total number of pages | | `pages[].page_number` | `integer` | 1-indexed page number | | `pages[].name` | `string` | Page name as set in Moda | | `pages[].width` | `number` | Page width in pixels | | `pages[].height` | `number` | Page height in pixels | | `pages[].node_count` | `integer` | Number of design elements on the page | ### Notes - Page numbers are 1-indexed - The `node_count` includes all visible elements on the page (shapes, text, images, groups) - Hidden elements are excluded from the count --- ## export_design Export a Moda canvas as an image or document file. Pass exactly one of `canvas_id` or `url`. ### Parameters | Parameter | Type | Required | Default | Description | | ------------- | ----------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------ | | `canvas_id` | `string` | No | — | Canvas UUID to export directly. Preferred after `start_design_task` returns a new canvas. | | `url` | `string` | No | — | Moda share URL, private canvas URL, or raw share token. Use this for share-link or design-to-code workflows. | | `format` | `string` | No | `"png"` | Export format: `png`, `jpeg`, `pdf`, or `pptx` | | `page_number` | `integer \| null` | No | `null` | 1-indexed page number. For image formats, defaults to page 1. For documents, exports all pages. | ### Format guide | Format | Best for | | ------ | --------------------------------------------------------------------- | | `png` | Design-to-code workflows — lossless image, ideal for visual reference | | `jpeg` | Smaller file size when lossless quality isn't needed | | `pdf` | Multi-page documents, printing, sharing | | `pptx` | PowerPoint presentations, slide decks | ### Returns On success: ```json { "status": "completed", "url": "https://storage.googleapis.com/bucket/exports/abc123.png", "format": "png" } ``` If a design job is still active for the target canvas: ```json { "status": "not_ready", "reason": "active_design_job", "retry_after_seconds": 3, "canvas_id": "550e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "job_id": "990e8400-e29b-41d4-a716-446655440000" } ``` `canvas_id`, `canvas_url`, and `job_id` are only included for authenticated private-canvas exports (i.e., when using `canvas_id` or a private URL). Share-link exports omit these fields to avoid leaking internal identifiers. | Field | Type | Description | | --------------------- | --------- | --------------------------------------------------------------------------- | | `status` | `string` | `"completed"` on success, or `"not_ready"` for retryable export attempts | | `url` | `string` | Signed URL to the exported file (success only) | | `format` | `string` | The format that was used for the export (success only) | | `reason` | `string` | Retryable not-ready reason: `active_design_job` or `job_status_unavailable` | | `retry_after_seconds` | `integer` | Suggested delay before retrying when `status` is `"not_ready"` | | `canvas_id` | `string` | Canvas UUID for the export target (private exports only) | | `canvas_url` | `string` | Direct Moda link to the canvas (private exports only) | | `job_id` | `string` | Active design job ID (private exports only) | ### Example usage Provide exactly one of `canvas_id` or `url` per call: ``` # Export as PNG for design-to-code (default) export_design(url="https://moda.app/s/abc123") # Export directly from a canvas_id returned by start_design_task export_design(canvas_id="550e8400-e29b-41d4-a716-446655440000", format="pdf") # Export a specific page as JPEG export_design(url="https://moda.app/s/abc123", format="jpeg", page_number=2) # Export all pages as a PDF export_design(url="https://moda.app/s/abc123", format="pdf") # Export as a PowerPoint file export_design(url="https://moda.app/s/abc123", format="pptx") ``` ### Notes - Pass exactly one of `canvas_id` or `url` - For design-generation workflows, prefer `canvas_id` from `start_design_task` / `get_job_status` - Export-before-ready and temporary readiness-check failures are normal retryable MCP states, not tool failures - The signed URL expires after 7 days - For image formats (`png`, `jpeg`), only a single page is exported (defaults to page 1) - For document formats (`pdf`, `pptx`), all pages are included by default unless `page_number` is specified - Screenshots are rendered server-side using a headless browser --- ## list_my_canvases Returns a paginated list of canvases accessible to the authenticated user. Use this to browse available canvases when you don't have a specific URL. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Default | Description | | --------- | --------- | -------- | ------- | ----------------------------------------- | | `limit` | `integer` | No | `20` | Number of canvases to return (max 100) | | `offset` | `integer` | No | `0` | Number of canvases to skip for pagination | ### Returns ```json { "canvases": [ { "id": "550e8400-e29b-41d4-a716-446655440000", "name": "Marketing Website", "url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "updated_at": "2025-03-15T10:30:00Z" } ], "total": 42, "limit": 20, "offset": 0 } ``` | Field | Type | Description | | ----------------------- | --------- | -------------------------------- | | `canvases[].id` | `string` | Canvas UUID | | `canvases[].name` | `string` | Canvas name | | `canvases[].url` | `string` | Direct canvas URL | | `canvases[].updated_at` | `string` | Last update timestamp (ISO 8601) | | `total` | `integer` | Total number of canvases | | `limit` | `integer` | Page size | | `offset` | `integer` | Current offset | ### Notes - Canvases are returned in order of most recently updated - The `url` field can be passed directly to other tools like `get_moda_design` - The maximum `limit` is 100 per request --- ## search_canvases Searches your canvases by name or content and returns matching results. Use this when you know what you're looking for but don't have the exact URL. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Default | Description | | --------- | --------- | -------- | ------- | ------------------------------------------------------ | | `query` | `string` | Yes | — | Search query to match against canvas names and content | | `limit` | `integer` | No | `20` | Maximum number of results to return (max 100) | ### Returns ```json [ { "id": "550e8400-e29b-41d4-a716-446655440000", "name": "Marketing Website v2", "url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000" } ] ``` | Field | Type | Description | | --------- | -------- | ----------------- | | `[].id` | `string` | Canvas UUID | | `[].name` | `string` | Canvas name | | `[].url` | `string` | Direct canvas URL | ### Notes - The search matches against canvas names and content - Results are ranked by relevance - The returned `url` can be passed directly to other tools like `get_moda_design` - The maximum `limit` is 100 per request --- ## list_organizations Returns a list of organizations and teams you belong to. Use this to discover available workspaces, then call `set_context` to choose which one to use. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters This tool takes no parameters. ### Returns ```json [ { "id": "550e8400-e29b-41d4-a716-446655440000", "name": "Acme Corp", "role": "admin", "teams": [ { "id": "660e8400-e29b-41d4-a716-446655440000", "name": "Design Team", "is_default": true }, { "id": "770e8400-e29b-41d4-a716-446655440000", "name": "Marketing", "is_default": false } ] } ] ``` | Field | Type | Description | | ----------------------- | --------- | ----------------------------------------------- | | `[].id` | `string` | Organization UUID | | `[].name` | `string` | Organization name | | `[].role` | `string` | Your role in the organization (admin or member) | | `[].teams` | `array` | Teams you have access to within this org | | `[].teams[].id` | `string` | Team UUID | | `[].teams[].name` | `string` | Team name | | `[].teams[].is_default` | `boolean` | Whether this is the org's default team | ### Notes - Use org and team names with `set_context` to choose your active workspace - IDs are included but typically don't need to be shown to users — use names in conversation instead - Organizations are sorted alphabetically by name - Only teams you have access to are included --- ## list_brand_kits Returns brand kits for a team. Brand kits contain colors, fonts, logos, and brand guidelines that were extracted from company websites. Uses your session context (set via `set_context`) or defaults to your primary workspace. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Description | | --------- | -------- | -------- | ----------------------------------------------------------- | | `org_id` | `string` | No | Organization UUID. Overrides session context for this call. | | `team_id` | `string` | No | Team UUID. Overrides session context for this call. | If neither is provided, uses your [session context](#session-context) or defaults to your primary workspace. ### Returns ```json { "brand_kits": [ { "id": "880e8400-e29b-41d4-a716-446655440000", "title": "Acme Corp", "is_default": true, "created_at": "2025-03-15T10:30:00", "updated_at": "2025-03-16T14:20:00", "company_name": "Acme Corp", "company_url": "https://acme.com", "company_description": "Modern design tools for teams", "tagline": "Design at scale", "brand_values": ["innovation", "simplicity"], "brand_aesthetic": ["modern", "minimal"], "brand_tone_of_voice": ["professional", "friendly"], "colors": [ { "color": "#2563eb", "label": "Primary" }, { "color": "#111827", "label": "Text" } ], "fonts": [{ "family": "Inter", "label": "Body", "weight": 400, "supported": true }], "logos": [ { "group_name": "Primary Logo", "images": [{ "name": "logo-dark.svg", "url": "https://..." }] } ] } ], "team_id": "660e8400-e29b-41d4-a716-446655440000" } ``` ### Notes - Uses your session context to determine the workspace. Call `set_context` to switch organizations or teams. - Brand kits are sorted by creation date (most recent first) - The `is_default` brand kit is automatically used by `start_design_task` when no `brand_kit_id` is specified --- ## create_brand_kit Creates a brand kit by extracting brand information from a company website. Provide a URL or domain and Moda will extract colors, fonts, logos, and brand guidelines automatically. Uses your session context (set via `set_context`) or defaults to your primary workspace. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Description | | --------- | -------- | -------- | ------------------------------------------------------------------ | | `url` | `string` | Yes | Website URL or domain (e.g., `stripe.com` or `https://stripe.com`) | | `org_id` | `string` | No | Organization UUID. Overrides session context for this call. | | `team_id` | `string` | No | Team UUID. Overrides session context for this call. | ### Returns Returns the created brand kit in the same format as `list_brand_kits` entries. ```json { "id": "880e8400-e29b-41d4-a716-446655440000", "title": "Stripe", "is_default": false, "company_name": "Stripe", "company_url": "https://stripe.com", "company_description": "Financial infrastructure for the internet", "colors": [ { "color": "#635bff", "label": "Primary" }, { "color": "#0a2540", "label": "Dark" } ], "fonts": [{ "family": "Inter", "label": "Body", "weight": 400, "supported": true }], "logos": [] } ``` ### Notes - Extraction typically takes 10–30 seconds depending on the website - Uses Firecrawl to scrape the website and extract brand data - If the brand has been extracted before, a cached result is used for faster response - The first brand kit created for a team is automatically set as the default --- ## update_brand_kit Updates an existing brand kit. Pass only the fields you want to change — all other fields remain unchanged. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Description | | --------------------- | ---------- | -------- | --------------------------------------------------------- | | `brand_kit_id` | `string` | Yes | ID of the brand kit to update | | `title` | `string` | No | Display title for the brand kit | | `colors` | `array` | No | Array of `{ color, label }` objects (replaces all colors) | | `fonts` | `array` | No | Array of `{ family, label, weight }` objects | | `company_name` | `string` | No | Company name | | `company_description` | `string` | No | Company description | | `tagline` | `string` | No | Brand tagline | | `brand_values` | `string[]` | No | List of brand values | | `brand_aesthetic` | `string[]` | No | List of aesthetic descriptors | | `brand_tone_of_voice` | `string[]` | No | List of tone descriptors | ### Returns Returns the updated brand kit in the same format as `list_brand_kits` entries. ### Notes - Pass only the fields you want to change — omitted fields are not modified - When updating `colors` or `fonts`, the entire array is replaced (not merged) - You must have access to the team that owns the brand kit --- ## upload_file Uploads a file from a URL to Moda's storage. Returns a stable proxy URL that can be used as an attachment in `start_design_task`. Supports images, PDFs, and PPTX files. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Description | | ------------ | -------- | -------- | ----------------------------------------------------------- | | `source_url` | `string` | Yes | Public URL of the file to download and store | | `filename` | `string` | No | Filename to use. Inferred from URL if omitted. | | `org_id` | `string` | No | Organization UUID. Overrides session context for this call. | | `team_id` | `string` | No | Team UUID. Overrides session context for this call. | ### Returns ```json { "id": "550e8400-e29b-41d4-a716-446655440000", "url": "https://api.moda.app/api/v2/images/ref/550e8400-e29b-41d4-a716-446655440000?h=abc123", "filename": "design-reference.png", "mime_type": "image/png", "size_bytes": 245760, "was_duplicate": false, "message": "File uploaded successfully. Use the 'url' field as an attachment URL in start_design_task." } ``` | Field | Type | Description | | --------------- | --------- | ----------------------------------------- | | `id` | `string` | Unique file identifier (UUID) | | `url` | `string` | Stable proxy URL for the uploaded file | | `filename` | `string` | Filename of the uploaded file | | `mime_type` | `string` | MIME type of the file | | `size_bytes` | `integer` | File size in bytes | | `was_duplicate` | `boolean` | True if an identical file already existed | | `message` | `string` | Human-readable confirmation message | ### Example usage ``` # Upload an image for use as a design reference upload_file(source_url="https://example.com/mockup.png") # Upload with a custom filename upload_file(source_url="https://example.com/file.pdf", filename="brand-guidelines.pdf") ``` ### Notes - The returned `url` can be passed directly as an attachment URL in `start_design_task` - Files are deduplicated by content hash — uploading the same file twice returns the existing record - Supported types include images (PNG, JPEG, WebP, etc.), PDFs, and PPTX files --- ## start_design_task Starts an AI design task using Moda's design agent. The agent creates or edits a canvas based on your prompt. Provide a `canvas_id` to edit an existing canvas, or omit it to create a new one. In MCP this tool is always asynchronous: it returns quickly with a job handle, then you poll `get_job_status`. Uses your session context (set via `set_context`) or defaults to your primary workspace. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Default | Description | | ---------------------- | ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `prompt` | `string` | Yes | — | Design instructions for the AI agent | | `canvas_id` | `string` | No | — | Canvas to edit. Omit to create a new canvas. Ignored when resuming a conversation. | | `canvas_name` | `string` | No | — | Name for the new canvas (only used when `canvas_id` is omitted) | | `brand_kit_id` | `string` | No | — | Brand kit to apply. Defaults to the team's default brand kit. | | `org_id` | `string` | No | — | Organization UUID. Overrides session context for this call. | | `team_id` | `string` | No | — | Team UUID. Overrides session context for this call. | | `conversation_id` | `string` | No | — | UUID of a previous conversation to resume. The agent will have full context of all prior interactions. Returned in every response — pass it back to continue. | | `attachments` | `array` | No | — | List of reference files. Each item is an object with `url` (required), `name` (optional), and `type` (`"image"`, `"pdf"`, `"pptx"`, or `"url"`). | | `reference_canvas_ids` | `string[]` | No | — | List of canvas UUIDs to use as design inspiration. The agent can see these designs and reference their style, layout, or content. | | `format_category` | `string` | No | — | Format category — **recommended** for new designs. `"slides"` for presentations, `"pdf"` for documents/reports, `"social"` for social media posts, `"diagram"` for flowcharts/diagrams, `"ui"` for UI mockups, or `"other"`. Without this, the agent may default to an incorrect format. | | `format_width` | `integer` | No | — | Canvas width in pixels. Common: 1920x1080 (slides), 1080x1080 (social square), 1080x1920 (social story). | | `format_height` | `integer` | No | — | Canvas height in pixels. | | `model_tier` | `string` | No | — | AI model tier: `"pro_max"` (most capable), `"pro"`, `"standard"`, or `"lite"` (fastest). Defaults to automatic selection. | ### Returns ```json { "job_id": "990e8400-e29b-41d4-a716-446655440000", "canvas_id": "550e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "conversation_id": "bb0e8400-e29b-41d4-a716-446655440000", "status": "queued", "message": "Design task started. Use get_job_status to check progress.", "retry_after_seconds": 3 } ``` ### Example usage ``` # Create a new design (returns a conversation_id) start_design_task(prompt="Create a modern SaaS landing page with a hero section, features grid, and pricing table") # Resume the conversation to make changes (agent remembers previous context) start_design_task(prompt="Change the color scheme to use blues and grays", conversation_id="bb0e8400...") # Edit an existing canvas start_design_task(prompt="Add a footer section", canvas_id="550e8400...") # Create slides with specific dimensions start_design_task(prompt="Create a pitch deck", format_category="slides", format_width=1920, format_height=1080) # Create a PDF document (report, resume, etc.) start_design_task(prompt="Create a project report", format_category="pdf") # Provide reference images as attachments start_design_task( prompt="Recreate this design in our brand style", attachments=[{"url": "https://example.com/reference.png", "type": "image"}], brand_kit_id="880e8400..." ) # Use existing canvases as design inspiration start_design_task( prompt="Create a similar landing page", reference_canvas_ids=["550e8400...", "660e8400..."] ) # Canonical MCP flow: start -> poll -> export job = start_design_task(prompt="Create a sales deck", format_category="slides") status = get_job_status(job_id=job["job_id"]) while not status["can_export"] and not status["is_terminal"]: # Wait status["retry_after_seconds"] seconds, then poll again. status = get_job_status(job_id=job["job_id"]) if status["can_export"]: export_design(canvas_id=job["canvas_id"], format="pptx") ``` ### Notes - This tool is always async in MCP. It returns a job handle immediately. - Use `retry_after_seconds` as the default delay before the first `get_job_status(job_id)` call - Keep polling until `can_export == true` or `is_terminal == true` - `can_export` becomes `true` only after successful completion with exportable canvas data - If no `brand_kit_id` is provided, the team's default brand kit is used automatically - If no `canvas_id` is provided, a new canvas is created with the name from `canvas_name` or "Untitled" - Every response includes a `conversation_id`. Pass it back in subsequent calls so the agent has context of all previous interactions. - When resuming a conversation, the `canvas_id` parameter is ignored — the agent automatically operates on the conversation's canvas - Use `upload_file` to upload local files first, then pass the returned URL in the `attachments` array - Reference canvas IDs let the agent see and draw inspiration from existing designs without modifying them - Always pass `format_category` when creating new designs — without it, the agent may default to slides regardless of what the user asked for --- ## get_job_status Returns the status and progress of a specific design job. Use this to check on jobs started with `start_design_task` or `remix_design`. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Description | | --------- | -------- | -------- | ---------------------- | | `job_id` | `string` | Yes | ID of the job to check | ### Returns ```json { "job_id": "990e8400-e29b-41d4-a716-446655440000", "canvas_id": "550e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "conversation_id": "bb0e8400-e29b-41d4-a716-446655440000", "status": "running", "task": "Create a modern SaaS landing page...", "progress_percent": 45, "current_step": "Generating hero section", "is_terminal": false, "can_export": false, "retry_after_seconds": 3, "operations_streamed": 12, "created_at": "2025-03-15T10:30:00", "started_at": "2025-03-15T10:30:02", "completed_at": null, "error": null } ``` | Field | Type | Description | | --------------------- | --------- | ---------------------------------------------------------------------------- | | `job_id` | `string` | Job UUID | | `canvas_id` | `string` | Canvas being edited | | `canvas_url` | `string` | Direct link to the canvas | | `conversation_id` | `string` | Conversation UUID. Pass to `start_design_task` to resume the conversation. | | `status` | `string` | `queued`, `running`, `completed`, `failed`, or `cancelled` | | `task` | `string` | The original prompt (truncated to 200 characters) | | `progress_percent` | `integer` | Estimated progress (0-100), if available | | `current_step` | `string` | Description of what the agent is currently doing | | `is_terminal` | `boolean` | `true` when the job is finished and polling can stop | | `can_export` | `boolean` | `true` when the job completed successfully and `export_design` can be called | | `retry_after_seconds` | `integer` | Suggested delay before polling again when the job is still in progress | | `operations_streamed` | `integer` | Number of canvas operations applied so far | | `created_at` | `string` | Job creation timestamp (ISO 8601) | | `started_at` | `string` | When the agent started working (ISO 8601) | | `completed_at` | `string` | When the job finished (ISO 8601), or `null` | | `error` | `string` | Error message if the job failed, or `null` | ### Notes - Use this after `start_design_task` to poll for progress - Poll again after `retry_after_seconds` while `is_terminal == false` - Call `export_design(canvas_id=..., format=...)` once `can_export == true` - Failed or cancelled jobs are terminal, but they do not set `can_export` - The `task` field is truncated to 200 characters for readability --- ## list_jobs Returns a list of recent design jobs. Use this to see what design tasks have been run recently, optionally filtered by canvas or status. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Default | Description | | ----------- | --------- | -------- | ------- | ------------------------------------------------------------- | | `canvas_id` | `string` | No | — | Filter jobs to a specific canvas | | `status` | `string` | No | — | Filter by status (`queued`, `running`, `completed`, `failed`) | | `limit` | `integer` | No | `10` | Number of jobs to return (max 50) | ### Returns ```json { "jobs": [ { "job_id": "990e8400-e29b-41d4-a716-446655440000", "canvas_id": "550e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/550e8400-e29b-41d4-a716-446655440000", "conversation_id": "bb0e8400-e29b-41d4-a716-446655440000", "status": "completed", "task": "Create a modern SaaS landing page...", "progress_percent": 100, "current_step": null, "operations_streamed": 42, "created_at": "2025-03-15T10:30:00", "started_at": "2025-03-15T10:30:02", "completed_at": "2025-03-15T10:32:15", "error": null } ] } ``` ### Notes - Jobs are returned in order of most recently created - The maximum `limit` is 50 per request - Only jobs for canvases you have access to are returned --- ## remix_design Duplicates an existing canvas and optionally starts a design task on the copy. Use this to create variations of existing designs without modifying the original. When a prompt is provided, the tool returns a job handle immediately — poll `get_job_status` the same way as `start_design_task`. Uses your session context (set via `set_context`) or defaults to your primary workspace. This tool requires [authentication](/mcp/authentication) via the remote MCP server at `mcp.moda.app`. It is not available when using the local `stdio` server. ### Parameters | Parameter | Type | Required | Default | Description | | -------------- | -------- | -------- | ------- | --------------------------------------------------------------------- | | `canvas_id` | `string` | Yes | — | Canvas to duplicate | | `prompt` | `string` | No | — | Design instructions to apply to the copy. Omit for a plain duplicate. | | `new_name` | `string` | No | — | Name for the new canvas. Defaults to `" (Remix)"`. | | `brand_kit_id` | `string` | No | — | Brand kit to apply (only used when `prompt` is provided) | | `org_id` | `string` | No | — | Organization UUID. Overrides session context for this call. | | `team_id` | `string` | No | — | Team UUID. Overrides session context for this call. | ### Returns Without a prompt (plain duplicate): ```json { "canvas_id": "aa0e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/aa0e8400-e29b-41d4-a716-446655440000", "canvas_name": "Marketing Website (Remix)", "source_canvas_id": "550e8400-e29b-41d4-a716-446655440000", "message": "Canvas duplicated successfully." } ``` With a prompt (duplicate + design task): ```json { "canvas_id": "aa0e8400-e29b-41d4-a716-446655440000", "canvas_url": "https://moda.app/canvas/aa0e8400-e29b-41d4-a716-446655440000", "canvas_name": "Marketing Website (Remix)", "source_canvas_id": "550e8400-e29b-41d4-a716-446655440000", "job_id": "990e8400-e29b-41d4-a716-446655440000", "job_status": "queued", "message": "Design task started. Use get_job_status to check progress.", "retry_after_seconds": 3 } ``` ### Example usage ``` # Plain duplicate remix_design(canvas_id="550e8400...") # Duplicate and restyle remix_design(canvas_id="550e8400...", prompt="Change the color scheme to dark mode") # Duplicate with new branding remix_design(canvas_id="550e8400...", prompt="Apply our new brand", brand_kit_id="880e8400...") ``` ### Notes - The original canvas is never modified — all changes are applied to the copy - When a `prompt` is provided, a design task is started on the duplicate and the tool returns immediately with a job handle - Poll `get_job_status(job_id)` until `can_export == true` or the job reaches a terminal failure state, same as `start_design_task` --- ## Create brand kit URL: https://docs.moda.app/api/brand-kits/createBrandKit Creates a brand kit by extracting brand information from a company website. Extraction typically takes 10-30 seconds. --- ## List brand kits URL: https://docs.moda.app/api/brand-kits/listBrandKits Returns brand kits for the team associated with your API key. --- ## Update brand kit URL: https://docs.moda.app/api/brand-kits/updateBrandKit Updates an existing brand kit. Pass only the fields you want to change. When updating `colors` or `fonts`, the entire array is replaced (not merged). --- ## Get job status URL: https://docs.moda.app/api/jobs/getJob Returns the current status and progress of a design job. --- ## List jobs URL: https://docs.moda.app/api/jobs/listJobs Returns recent design jobs, sorted by creation date (most recent first). --- ## Start a design task URL: https://docs.moda.app/api/jobs/startJob Starts an AI design task. The agent creates or edits a canvas based on your prompt. By default, returns immediately with a job ID. Set `wait: true` to block until completion. --- ## List organizations URL: https://docs.moda.app/api/organizations/listOrganizations Returns organizations and teams accessible to the API key owner. --- ## List canvases URL: https://docs.moda.app/api/canvases/listCanvases Returns a paginated list of canvases accessible to the authenticated user. --- ## Make a canvas public URL: https://docs.moda.app/api/canvases/makeCanvasPublic Create a public share link for a canvas. Anyone with the link can view the canvas. By default, the request blocks until a thumbnail has been generated so the share URL will unfurl properly when shared on social media or messaging platforms. Set `wait_for_thumbnail: false` to return immediately. --- ## Search canvases URL: https://docs.moda.app/api/canvases/searchCanvases Searches canvases by name and returns matching results ranked by relevance. --- ## Get credit balance URL: https://docs.moda.app/api/credits/getCredits Returns the current credit balance and plan information for your account. If billing is not enabled, returns plan "unlimited" with null balance. --- ## Remix a canvas URL: https://docs.moda.app/api/remix/remixDesign Duplicates an existing canvas and optionally starts an AI design task on the copy. The original canvas is never modified. --- ## Export design URL: https://docs.moda.app/api/designs/exportDesign Exports a canvas as an image or document file. Returns a signed URL to download the exported file. The signed URL expires after 7 days. --- ## Get design URL: https://docs.moda.app/api/designs/getDesign Returns the design as semantic pseudo-HTML with CSS properties and design tokens. This is the same structured output used by the MCP server's `get_moda_design` tool. --- ## Get design tokens URL: https://docs.moda.app/api/designs/getDesignTokens Returns only the design tokens (colors, fonts, variables, corner radii) as structured JSON. --- ## List pages URL: https://docs.moda.app/api/designs/listPages Returns metadata about each page in a canvas, including names, dimensions, and element counts. --- ## Billing & Payments URL: https://docs.moda.app/help/billing/billing ## How to upgrade to Pro or Ultra 1. Click your workspace name in the sidebar 2. Go to **Settings → Billing** 3. Select the plan you want 4. Complete checkout through Stripe See the [Pricing page](https://moda.app/pricing) for current plan rates. Your new credit allocation takes effect immediately after upgrading. ## I paid but my plan didn't upgrade If your payment went through but your account still shows the Free plan: - **Refresh the page**: plan changes may take a moment to propagate - **Check your email** for a payment confirmation from Stripe - **Go to Settings → Billing** and check your current plan status - If the issue persists, contact support ## Managing payment methods To update your payment method: 1. Go to **Settings → Billing** 2. Click **Manage subscription** to open the Stripe billing portal 3. Update your payment method from there ## Getting a receipt or invoice Invoices and receipts are available through the Stripe billing portal: 1. Go to **Settings → Billing** 2. Click **Manage subscription** 3. View and download past invoices ## Refund policy ## How team billing works On paid plans, billing is **per seat**: - Each team member counts as one seat - The total monthly cost is: (number of seats) × (per-seat price) - When you add a new team member, a seat is added and billing is adjusted - When you remove a team member, the change takes effect at the end of the billing period - Each seat adds credits to the team's shared pool Internal users and specifically excluded user IDs do not count toward the billable seat count. ## Can I upgrade or downgrade at any time? Yes. You can upgrade at any time and your new credit allocation takes effect immediately. If you downgrade, the change takes effect at the end of your current billing period — you keep your current benefits until then. --- ## How Credits Work URL: https://docs.moda.app/help/billing/credits ## What are credits? AI credits are the units that measure your usage of AI-powered features in Moda. Every time you use an AI feature — like generating a design, creating an image, removing a background, or asking the AI agent to edit your layout — it consumes credits. Different actions cost different amounts of credits depending on how computationally intensive they are. More complex requests use more credits. ## How many credits do different actions cost? Credit costs vary based on the complexity of the task and the AI model used. Here are rough estimates: | Action | Lite model (0.5x) | Standard model (1x) | Pro model (1.5x) | | ---------------------- | ----------------- | ------------------- | ---------------- | | Social post | ~60 credits | ~120 credits | ~180 credits | | Document | ~100 credits | ~200 credits | ~300 credits | | Slide deck (5 slides) | ~150 credits | ~300 credits | ~450 credits | | Slide deck (10 slides) | ~225 credits | ~450 credits | ~675 credits | These are estimates — actual usage can vary widely depending on the complexity of your design task. Actions like image generation, web research, and background removal each consume additional credits. ## Credit allowances by plan Each plan includes a monthly credit allowance. On paid plans (Pro and Ultra), credits are **pooled** at the organization level: all team members share from the same credit balance, and each seat adds to the pool. On the Free plan, credits are allocated **per user**. See the [Pricing page](https://moda.app/pricing) for current credit allowances per plan. ## Do credits reset? Yes. Credits reset at the start of each billing cycle. **Unused credits do not roll over**: your balance resets to your plan's allocation each month. ## What happens when I run out? - **Free plan**: AI features are paused until your credits refresh at the start of the next billing cycle. You can still use all non-AI canvas tools, export your work, and collaborate normally. - **Paid plans (Pro and Ultra)**: You won't be interrupted. Once you exceed your included credits, additional usage is automatically billed at a metered rate. You can set a maximum overage budget in your settings. ## Referral credits When you refer someone to Moda, both you and the person you referred receive **300 bonus credits**. To find your referral link, click the **gift icon** in the left sidebar of the app. --- ## Setting Up Your Brand Kit URL: https://docs.moda.app/help/brand-kit/setup A brand kit tells the AI agent about your brand identity — your logo, colors, fonts, and visual style. When you create a design with a brand kit selected, the agent uses these assets to produce on-brand results. ## Creating a brand kit There are several ways to create a brand kit: ### Import from a website URL The fastest way to set up a brand kit is to provide your website URL. Moda will crawl the site and extract: - Logo - Brand colors - Typography - Visual style cues The import uses Firecrawl and Brandfetch to analyze your website. Some domains are blocked from import (email providers, major social media platforms, and similar consumer services). ### Upload brand guidelines You can upload brand guideline files (PDF or images) for the AI to analyze and extract brand elements from. ### Add assets manually You can also build your brand kit manually by uploading: - **Logo**: Your primary logo file - **Colors**: Your brand color palette - **Fonts**: Your brand typefaces - **Imagery**: Reference images that represent your visual style ## How many brand kits can I create? - **Free and Pro plans**: You can create brand kits on all plans - **Ultra plan**: Advertised as "Unlimited brand kits" ## Editing your brand kit You can update your brand kit at any time. Changes will apply to new designs going forward — existing designs are not automatically updated. To edit a brand kit: 1. Open your workspace settings 2. Navigate to your brand kits 3. Update any assets (logo, colors, fonts, imagery) The brand kit system uses a conversational AI agent, so you can also describe changes you want to make in natural language. --- ## Brand Kit Troubleshooting URL: https://docs.moda.app/help/brand-kit/troubleshooting ## Logo won't upload - Check that your file is a supported image format (JPEG, PNG, GIF, SVG) - The maximum file upload size is 250 MB - Try a different file format — SVG or PNG with transparency work best for logos ## Website crawl not pulling the right assets The website import uses automated tools to extract brand elements, and it may not always get everything right: - **Colors are wrong**: The crawler extracts colors from your site's CSS and visible elements. If your website uses different colors than your brand guidelines, the extracted palette may not match. Edit the brand kit manually to correct colors. - **Logo not found**: Some websites serve logos in ways that are difficult to extract automatically. Upload your logo manually. - **Fonts not detected**: Web fonts may not always be identified correctly. Add your brand fonts manually. Some domains are blocked from crawling, including email providers and major social media platforms. ## Designs aren't using my brand colors or fonts - **Check that a brand kit is selected**: Make sure you've chosen your brand kit in the prompt bar before creating the design - **Be explicit in your prompt**: If the agent isn't using your brand consistently, try mentioning specific colors or styles in your prompt (e.g., "Use our primary blue for headings") - **Review your brand kit**: Make sure the colors and fonts in your brand kit are correct and complete - **Update the brand kit**: If you've recently changed your brand assets, make sure the brand kit reflects the latest versions --- ## Using Your Brand Kit URL: https://docs.moda.app/help/brand-kit/using-your-brand ## How Moda applies your brand kit When you select a brand kit before creating a design, the AI agent has access to your brand assets and uses them throughout the design process: - Your **logo** is placed appropriately in the design - Your **brand colors** are used for backgrounds, text, accents, and other elements - Your **fonts** are applied to headings and body text - Your **visual style** influences layout and imagery choices The brand kit is stored as structured data that the AI agent references during design generation. ## Tips for consistent brand results - **Provide clear, high-quality assets**: A clean logo file (SVG or PNG with transparency) and well-defined color palette give the agent the best starting point - **Include multiple brand colors**: Give the agent a primary color, secondary colors, and accent colors so it has options for different design elements - **Add reference images**: Upload examples of designs you like to help the agent understand your visual style - **Be specific in your prompts**: If you want a particular color treatment or layout style, mention it in your prompt alongside selecting the brand kit ## Switching between brand kits If you have multiple brand kits, you can select which one to use when creating a new design. The brand kit selector is available on the homepage prompt bar. --- ## Overview URL: https://docs.moda.app/help/canvas The canvas is where you view and edit your designs. It's a 2D vector canvas where you can select, move, resize, and modify design elements. ## Navigation - **Pan**: hold **Space** and drag, or use a trackpad/mouse scroll - **Zoom**: pinch on trackpad, or use the zoom controls in the bottom bar - **Select**: click an element to select it, or click and drag on empty space to create a selection box ## Editing Once an element is selected, you can: - **Move it** by dragging - **Resize it** by dragging the corner handles (hold Shift to maintain aspect ratio) - **Edit text** by double-clicking a text element - **Delete it** with the Delete or Backspace key The properties panel on the right side of the canvas lets you adjust colors, fonts, alignment, and other properties of the selected element. ## Tools The toolbar provides tools for creating new elements: rectangles, ellipses, lines, text, pen paths, and more. You can also use the hand tool for panning and the comment tool for leaving feedback. ## Keyboard shortcuts Moda has keyboard shortcuts for most common actions. To see the full list, open **File** in the top menu bar and click **Keyboard shortcuts**. ## Working with slides For multi-page designs (like slide decks), you can add, reorder, duplicate, and delete pages using the page controls at the bottom of the canvas. ## Media and images - Upload your own images by dragging them onto the canvas or using **File → Upload image** - The AI agent can generate images as part of the design process, or on request - Supported image formats: JPEG, PNG, GIF, SVG (max 250 MB per file) ## Auto-save Moda auto-saves your work continuously. Changes are saved automatically after about 1 second of inactivity, with a safety net save every 20 seconds. You don't need to manually save. If your canvas won't load, try refreshing the page or clearing your browser cache. Your last auto-saved state will be restored. ## Version history Moda keeps a history of your canvas versions. To view or restore a previous version: 1. Open **File** in the top menu bar 2. Click **Version history** 3. Browse previous versions and restore if needed This is useful if you want to undo a large set of changes or recover a previous state of your design. --- ## How the AI Agent Works URL: https://docs.moda.app/help/ai-agent/how-it-works When you create a design in Moda, an AI agent handles the entire design process. Here's how it works. ## The design process The agent follows a multi-stage process: 1. **Research**: If needed, the agent searches the web, analyzes uploaded files (PPTX, PDF, DOCX, XLSX/CSV, images), reads your brand kit, or scrapes a website URL for content and style reference. 2. **Planning**: The agent outlines the structure of the design — what slides or sections to create, what content goes where. 3. **Building**: The agent creates elements on the canvas: text, shapes, images, layouts, charts, and more. 4. **Refinement**: The agent reviews and adjusts the design, fixing alignment, styling, and visual consistency. You can watch this happen in real time. The agent's thinking and progress are shown in the chat panel alongside the canvas. ## What the agent can do The agent has access to a wide range of tools: - **Create and edit design elements**: Text, shapes, images, icons, charts, tables, and more - **Generate images**: Create AI-generated images and backgrounds using FAL AI - **Search the web**: Research topics, find reference material, and gather content - **Scrape websites**: Extract content and visual style from URLs - **Read uploaded files**: Process PPTX, PDF, DOCX, XLSX/CSV, text files, and Google Slides - **Apply brand kits**: Use your brand colors, fonts, logo, and visual style - **Search for icons**: Find and insert icons that match your design - **Generate QR codes**: Create QR codes for URLs - **Fetch company logos**: Look up and insert logos for named companies ## Execution modes Moda's agent can run in two modes: - **Interactive (WebSocket)**: The default mode when you're working in the browser. The agent runs tools in your browser session, so you see changes in real time. - **Headless (Job system)**: Used for API-triggered designs and background tasks. The agent runs on the server with a headless browser for operations like export. ## Iterating on designs After the initial generation, you can continue chatting with the agent to refine the design: - Ask it to change colors, fonts, or layout - Request additional slides or sections - Ask it to swap images or update text - Give it feedback on what to improve The agent maintains context from the conversation, so it understands what you've already discussed. --- ## Prompting Guide URL: https://docs.moda.app/help/ai-agent/prompting The quality of your prompt directly affects the quality of your design. Here are tips and examples for getting the best results. ## General tips - **Be specific about content**: Don't just say "make a pitch deck." Describe what the deck is about, who the audience is, and what key points to cover. - **Mention structure**: If you want a specific number of slides or sections, say so. - **Describe the tone**: Words like "professional," "playful," "minimal," "bold," or "corporate" help the agent make style decisions. - **Include real data**: If you have specific metrics, quotes, or text, include them in your prompt rather than expecting the agent to make them up. - **Reference your brand kit**: If you have a brand kit selected, the agent will use it automatically. You can also call out specific brand elements in your prompt. ## How to get less "AI-looking" designs - Provide **specific content** rather than generic placeholders - Reference a **website or existing design** as style inspiration - Ask for **minimal, clean layouts** rather than overly decorated ones - Upload **reference images** showing the style you want - Use the **Pro model** for more sophisticated design decisions (Pro and Ultra plans) ## Using reference images and files You can attach files to your prompt to give the agent more context: - **Images**: Style references, mood boards, screenshots of designs you like - **PPTX files**: Existing presentations to redesign or update - **PDFs**: Documents to convert into designed layouts - **DOCX/XLSX/CSV**: Content to incorporate into designs - **URLs**: Websites to scrape for content or style reference ## Prompts for specific use cases ### Pitch decks ``` Create a 5-slide investor pitch deck for [company name]. Cover: problem, solution, market size ($X TAM), traction (Y users, Z% MoM growth), team backgrounds, and a $Xm Series A ask. Tone: confident, data-forward, clean modern layouts. ``` ### Social media posts ``` Create an Instagram carousel (5 slides) announcing our new product launch. Product: [description]. Key features: [list]. Style: bold typography, vibrant colors, clear call to action on the last slide. Format: square post (1080x1080). ``` ### Marketing one-pagers ``` Design a one-page sales sheet for [product/service]. Include: problem/solution, 3 key benefits with icons, a customer quote, and contact information. Professional and information-dense. ``` ### Diagrams and workflows ``` Create a diagram showing our customer onboarding flow: Sign up → Email verification → Profile setup → First project → Success. Use clean icons and connecting arrows. Keep it simple and easy to follow. ``` ## Iterating on designs After the initial generation, you can refine with follow-up prompts: - "Make the headings larger and bolder" - "Change the background color to our brand blue" - "Add a slide about our team between slides 3 and 4" - "Replace the stock image on slide 2 with something more professional" - "Make this look less corporate and more startup-friendly" The agent remembers the full conversation context, so you can build on previous instructions. --- ## AI Agent Troubleshooting URL: https://docs.moda.app/help/ai-agent/troubleshooting ## Design stuck on "Building — please wait" If your design has been generating for a long time: - **Wait up to 5–7 minutes** for complex multi-page designs — this is normal, especially for slide decks with research or image generation - **Check the chat panel**: the agent's progress and thinking are shown there. If it's still actively working, give it more time - **Refresh the page**: your work is auto-saved, so refreshing won't lose progress. The agent may resume or you can start a new generation - **Try a simpler prompt**: very complex or vague prompts can cause the agent to take longer. Be more specific about what you want ## Agent seems stuck in a loop or not responding - **Refresh the page** and check if the design was partially completed - **Start a new chat**: sometimes starting fresh with a clearer prompt works better than continuing a stuck conversation - **Check your internet connection**: the agent communicates via WebSocket, so an unstable connection can cause issues ## Output doesn't match my prompt - **Be more specific**: vague prompts give the agent more room for interpretation. Include specific content, structure, and style details - **Use reference images or URLs**: visual references help the agent understand what you're looking for - **Iterate**: use follow-up messages to guide the agent toward what you want. "Make the layout more like [description]" or "Change the color scheme to [specifics]" - **Try a different model**: the Pro model (available on Pro and Ultra plans) handles complex design requests better than Lite or Standard ## "Connection to server lost" errors This typically means the WebSocket connection between your browser and the server was interrupted: - **Check your internet connection** - **Refresh the page**: the connection will be re-established - **Try a different network**: some corporate firewalls or VPNs may interfere with WebSocket connections - Your work is auto-saved, so you won't lose progress when reconnecting --- ## Export Formats URL: https://docs.moda.app/help/export/formats Moda supports several export formats. The default format depends on your canvas type: slide decks default to PPTX, PDF-type canvases default to PDF, and other canvases default to PNG. ## Available formats | Format | Description | Best for | | --------------------- | --------------------------- | ----------------------------------- | | **PNG** | Lossless raster image | Complex images, illustrations | | **JPG** | Compressed raster image | Sharing, social media | | **PDF** | Document format | Documents, emailing, printing | | **PowerPoint (PPTX)** | Microsoft PowerPoint | Presentations, editable slides | | **MP4 Video** | Video of a single page | Animated single-page designs | | **GIF** | Animated image | Short clips, no sound | | **MP4 (Full Video)** | All pages as a single video | Full presentations with transitions | ## Exporting as PDF PDF export creates a hybrid PDF with: - **Selectable text**: Text elements are rendered as real text in the PDF, not rasterized - **Vector elements** where possible - **Hyperlinks** preserved from the design There is also a **Flatten PDF** option that rasterizes everything, which can be useful if the hybrid PDF has rendering differences. ## Exporting as PowerPoint (PPTX) PowerPoint export converts your design to a native `.pptx` file: - **Supported elements** are converted to native PowerPoint objects (text, shapes, images) - **Backgrounds** are detected and placed as slide masters (non-editable background layer) - **Unsupported shapes** are rasterized — complex vector elements that don't have a PowerPoint equivalent are rendered as images ### What transfers and what doesn't - Text, basic shapes, and images transfer as editable PowerPoint objects - Complex vector paths, blending modes, and advanced styling may be rasterized - Animations do not transfer to PowerPoint - The exported file is a best-effort conversion — some visual differences are expected ## Exporting as PNG / JPG Raster image export renders your design as a pixel image: - You can choose the **export scale** (1x, 2x, 3x, etc.) for higher resolution - You can export **individual pages** or **all pages** - Very large exports (dimensions over 8,192px or area over 50 million pixels) use tiled rendering to work within GPU limits - If rendering fails at high scale, Moda automatically retries at 1x scale ## Exporting as video Video export is available for designs with animations: - **MP4 (single page)**: Exports one page's animation as an H.264 video at 30 FPS - **GIF (single page)**: Exports one page's animation as a GIF at 12 FPS - **MP4 Full Video (all pages)**: Exports all pages as a single video with transitions between slides Video encoding first tries **WebCodecs** (in-browser encoding). If that fails or the export is too large (over ~9.4 megapixels), it falls back to **server-side FFmpeg encoding**, which may take longer. For mixed page sizes in full video export, Moda adds letterboxing to maintain consistent dimensions. ## Exporting for Google Slides Google Slides export is available for **slide-type canvases only**: 1. Connect your Google account from the export menu 2. Click **Export to Google Slides** 3. The exported presentation opens in a new tab in Google Slides ### What transfers and what doesn't - Text, basic shapes, and many images transfer as editable Google Slides content - Complex vector artwork, blends, SVG-backed assets, and advanced image treatments may be rasterized for fidelity - Semi-transparent text may appear more opaque after export because Slides does not preserve editable text alpha reliably - Custom letter-spacing does not transfer - Animations do not transfer - Portrait and custom page sizes may still open as standard 16:9 Slides presentations Google Slides export is a best-effort conversion. Moda keeps content editable where the Slides API supports it and uses raster fallbacks where fidelity matters more than editability. ## Downloading individual slides vs. full deck When exporting, you can choose to export: - **All pages**: The entire design as a single file - **Current page**: Just the currently selected page - **Selected pages**: A subset of pages --- ## Sharing & Presenting URL: https://docs.moda.app/help/export/sharing ## Sharing a link You can share your designs with others through the **Share** button in the toolbar. ### Team sharing - Copy a link that **team members can use to edit** the design - Invite specific people by email ### Public links You can create public links with different permission levels: - **View only**: Anyone with the link can view the design but not edit it - **View & remix**: Anyone with the link can view the design and create their own copy to edit ## Presenting directly from Moda For slide-type canvases, you can present directly from Moda: 1. Click the **Slideshow** button in the toolbar (available when your canvas is in pages/slides layout mode) 2. The presentation enters fullscreen mode 3. Navigate between slides using arrow keys or clicking Presenting works on both desktop and mobile, though on touch devices the fullscreen behavior may differ slightly between browsers. ## Embedding Moda designs --- ## Export Troubleshooting URL: https://docs.moda.app/help/export/troubleshooting ## Download fails or page crashes on export Large or complex exports can strain your browser's GPU and memory: - **Reduce the export scale**: Try exporting at 1x instead of 2x or 3x - **Export fewer pages**: Export individual pages instead of the full deck - **Refresh and retry**: Free up browser memory by refreshing the page first - **Try a different browser**: Chrome and Edge tend to handle large exports best Moda automatically uses tiled rendering for very large exports (over 8,192px in any dimension or over 50 million total pixels) to work within GPU limits. If rendering still fails at high scale, it retries at 1x scale automatically. ## Video export is truncated or incomplete - Video export encodes on the server for large clips, which can take longer than expected - Make sure you don't close the browser tab while export is in progress - GIF exports are limited to 12 FPS; MP4 exports run at 30 FPS - If the export fails, try exporting a shorter animation or fewer pages ## PowerPoint export looks different from the web version This is expected to some degree. PowerPoint export is a best-effort conversion: - **Complex vector elements** are rasterized (converted to images) because PowerPoint doesn't support all the same shape types - **Backgrounds** are placed as slide masters, which are non-editable in PowerPoint - **Fonts** may render differently if the recipient doesn't have the same fonts installed - **Blending modes and advanced effects** may not have PowerPoint equivalents - **Animations** from Moda do not transfer to PowerPoint For the most faithful reproduction, use **PDF export** instead. ## Google Slides export looks different from the web version Google Slides export is also a best-effort conversion: - **Complex vector elements and SVG-backed assets** may be rasterized because Slides does not accept raw SVG images - **Semi-transparent text** may appear more opaque because editable Slides text does not preserve Moda text alpha exactly - **Advanced image treatments** such as masked pattern fills or partial-opacity images may be flattened into PNGs - **Fonts** may render differently if Google Slides substitutes a different font - **Animations** do not transfer to Google Slides If exact visual fidelity matters more than editability, use **PDF export** instead. ## Animations behavior in exported files - **PDF**: Animations are not included; the design is exported as static pages - **PowerPoint**: Animations are not included - **PNG/JPG**: Static snapshot of the current frame - **MP4/GIF**: Animations are rendered as video. Single-page export captures that page's animation; full video export includes transitions between pages - **Google Slides**: Animations are not included --- ## Your Account URL: https://docs.moda.app/help/getting-started/account ## Creating your account Sign up at [moda.app](https://moda.app) with your email or a social login (Google, etc.). Authentication is handled through Clerk. ## Plans Moda offers Free, Pro, and Ultra plans. For current pricing, credit allowances, and feature comparisons, see the [Pricing page](https://moda.app/pricing). ### Design models Moda offers three AI design models that differ in capability and credit cost: - **Lite** (0.5x credit cost): best for simple designs and most edits. Good for quick social posts, basic layouts, and straightforward tweaks. - **Standard** (1x credit cost): recommended for most designs. Handles complex layouts, multi-page documents, and sophisticated requests. - **Pro** (1.5x credit cost, paid plans only): for the most complex and demanding designs. Credit costs can add up quickly, so monitor usage. ## Upgrading You can upgrade at any time from your workspace settings: 1. Click your workspace name in the sidebar 2. Go to **Settings → Billing** 3. Choose your plan Your new credit allocation takes effect immediately. If you downgrade, the change takes effect at the end of your current billing period. ## Managing your subscription To manage your subscription (update payment method, view invoices, cancel): 1. Go to **Settings → Billing** in your workspace 2. Click **Manage subscription** to open the billing portal ## Teams On paid plans, each team member is a **seat**. Each seat adds credits to your team's shared pool. See [Pricing](https://moda.app/pricing) for per-seat rates. ### Adding and removing members Team members can be invited by email from your workspace settings. When you add a seat, billing is adjusted automatically. When you remove a seat, the change takes effect at the end of the billing period. There is no limit on the number of team members you can add. --- ## Your First Design URL: https://docs.moda.app/help/getting-started/first-design There are several ways to start a new design in Moda. ## Starting from a prompt The most common way to start is by typing a description of what you want. From the Moda homepage: 1. Select a format category (Slides, PDF, Social, UI, or Research) 2. Optionally select a brand kit to apply your brand identity 3. Type your prompt: describe the content, style, and purpose of your design 4. Click **Create** The AI agent will research, plan, and build your design. This typically takes **1–5 minutes** for a multi-page slide deck, and less for simpler designs like a single social post. ### Tips for good prompts **Do:** - Be specific about the content, not just the style - Include real information: company name, metrics, product details, audience - Mention the number of slides or pages you want - Describe the purpose and audience: "for a board meeting" or "for Instagram" **Don't:** - Write one-word prompts like "pitch deck" with no context - Leave out the subject matter: "make a nice presentation" gives the agent nothing to work with - Over-specify visual details before the first draft: let the agent make layout decisions, then refine **Good examples:** - "Create a 5-slide pitch deck for a Series A fintech startup. Cover the problem (SMBs can't access credit), our solution (AI underwriting), market size, traction (10K users, 40% MoM growth), and the ask ($5M raise)." - "Design an Instagram carousel (5 slides) announcing a new coffee blend. Include the blend name, tasting notes (chocolate, cherry, citrus), price, and a CTA to order online." - "Make a one-page case study about how a logistics company reduced delivery times by 30% using our route optimization software. Include a customer quote and key metrics." **Weak examples (and how to improve them):** - "Make a pitch deck" → Add what the company does, who the audience is, and what slides you want - "Design something for social media" → Specify the platform, topic, and format (square post, story, carousel) - "Create a beautiful presentation" → Describe the content and purpose; the agent handles the design See the [Prompting Guide](/help/ai-agent/prompting) for more examples by use case. ## Starting from a file You can upload files to use as a starting point: - **PPTX**: import an existing PowerPoint presentation - **PDF**: import a PDF document - **Images** (JPEG, PNG, GIF, SVG): use images as reference or content The maximum file upload size is **250 MB**. To start from a file, click the attachment button on the homepage prompt bar and upload your file along with a prompt describing what you want. ## Starting from a website You can provide a URL and Moda will crawl the website to extract design elements, content, and style direction. This is useful for: - Replicating the look and feel of an existing page - Extracting content from a website into a presentation - Using a website as style reference for your design ## What happens during generation When you submit a prompt, the AI agent goes through several stages: 1. **Research**: the agent may search the web, analyze uploaded files, or review your brand kit 2. **Planning**: the agent outlines the structure and content of the design 3. **Building**: the agent creates elements on the canvas (shapes, text, images, layouts) 4. **Refinement**: the agent may iterate on the design, adjusting styling and layout You can watch this process happen in real time on the canvas. The agent's progress and thinking are shown in the chat panel. ### Expected generation times - **Single social post or graphic**: 30 seconds – 2 minutes - **Multi-page slide deck (5–10 slides)**: 2–5 minutes - **Complex documents or research-heavy designs**: 3–7 minutes If a design seems stuck for more than 10 minutes, try refreshing the page. Your work is auto-saved, so you won't lose progress. ## After generation Once the agent finishes, your design is fully editable on the canvas. You can: - **Ask the agent to refine**: type follow-up instructions in the chat panel - **Edit manually**: select and modify any element directly on the canvas - **Export**: download as PDF, PowerPoint, PNG, or other formats See [The Canvas](/help/canvas) for a guide to editing your designs. --- ## System Requirements URL: https://docs.moda.app/help/getting-started/system-requirements Moda uses **WebGPU** for rendering, which means you need a browser that supports it. ## Supported browsers | Browser | Support notes | | ------------------ | --------------------------------------------------------- | | **Google Chrome** | Best supported on desktop | | **Microsoft Edge** | Best supported on desktop | | **Firefox** | Best-effort support; may require manual setup | | **Safari (macOS)** | Supported on newer Safari releases; older setups may vary | | **Safari (iOS)** | Varies by iOS version and browser engine limitations | For the best experience, we recommend **Chrome or Edge** on a desktop or laptop computer. ## If Moda says WebGPU is unavailable Start with the browser-specific troubleshooting guide: - [WebGPU Troubleshooting](/help/getting-started/webgpu-troubleshooting) That guide covers: - Chrome and Edge checks like `://settings/system` and `://gpu` - Which flags matter, if any - Safari feature-flag guidance - Best-effort Firefox steps - Common causes like GPU blocklists, remote desktop, and outdated drivers ## Quick guidance - **Chrome / Edge desktop**: usually the best place to start - **Firefox**: may work, but setup can vary more by machine - **Safari**: newer releases are better than older ones, but support still depends on the exact version and device - **Mobile**: usable for viewing and some interactions, but full editing is still best on desktop ## Mobile support Moda works on mobile devices with some limitations: - The canvas is viewable and basic interactions work - Full design editing is best done on desktop - iOS in-app browsers (e.g., opening Moda from a link in another app) may have issues — open in Safari or your default browser instead - Presenting slideshows works on mobile, though the fullscreen API may behave differently on touch devices ## Recommended hardware Moda runs in the browser and doesn't require installation. For the best experience: - A computer with a **dedicated or recent integrated GPU** - At least **4 GB of RAM** available to the browser - A stable internet connection (Moda auto-saves to the cloud) --- ## WebGPU Troubleshooting URL: https://docs.moda.app/help/getting-started/webgpu-troubleshooting Moda uses **WebGPU** for canvas rendering. If Moda says WebGPU is unavailable, the problem is usually not your account. It is usually one of these: - Your browser can see `navigator.gpu`, but cannot get a working GPU adapter on this computer - Graphics acceleration is turned off in the browser - The GPU is blocklisted by the browser - The machine is using remote desktop, a VM, or an older graphics setup that does not expose WebGPU reliably ## Start here Before trying browser-specific steps: 1. Fully close the browser and open it again 2. Make sure your browser is updated 3. If you are on a work laptop, VM, or remote desktop session, try a normal local desktop session instead ## Chrome Chrome should support WebGPU by default on supported desktop systems. ### If Moda says WebGPU is unavailable in Chrome 1. Open `chrome://settings/system` 2. Make sure **Use graphics acceleration when available** is turned on 3. Click **Relaunch** 4. Open `chrome://gpu` 5. Find the line labeled **WebGPU** If `chrome://gpu` says **WebGPU: Hardware accelerated**, reload Moda. If `chrome://gpu` says WebGPU is **disabled** or **blocklisted**: 1. Open `chrome://flags/#enable-unsafe-webgpu` 2. Set it to **Enabled** 3. Open `chrome://flags/#ignore-gpu-blocklist` 4. Set it to **Enabled** 5. Relaunch Chrome On Linux, Chrome's official troubleshooting guide also says you may need: 1. Open `chrome://flags/#enable-vulkan` 2. Set it to **Enabled** 3. Relaunch Chrome Do **not** turn on lots of unrelated experimental flags. Those are usually not needed. ## Edge Edge follows the Chromium WebGPU stack closely, so the Chrome-style troubleshooting steps are usually the right place to start. ### If Moda says WebGPU is unavailable in Edge 1. Open `edge://settings/system` 2. Make sure **Use graphics acceleration when available** is turned on 3. Click **Restart** 4. Open `edge://gpu` 5. Find the line labeled **WebGPU** If WebGPU is disabled or blocklisted: 1. Open `edge://flags/#enable-unsafe-webgpu` 2. Set it to **Enabled** 3. Open `edge://flags/#ignore-gpu-blocklist` 4. Set it to **Enabled** 5. Restart Edge On Linux, also try: 1. Open `edge://flags/#enable-vulkan` 2. Set it to **Enabled** 3. Restart Edge ## Safari on macOS Safari 26 and later ship WebGPU. Older Safari versions may still require enabling a feature flag. ### If WebGPU is unavailable in Safari 1. Update macOS and Safari if updates are available 2. Open **Safari -> Settings -> Advanced** 3. Turn on **Show features for web developers** 4. Open **Safari -> Settings -> Feature Flags** 5. If **WebGPU** appears there, turn it on 6. Fully quit and reopen Safari ## Safari, Chrome, or Edge on iPhone and iPad On iPhone and iPad, browser behavior is more complicated because Chrome and Edge do not use the same browser engine they use on desktop. If WebGPU is unavailable: 1. Open the **Settings** app 2. Go to **Apps -> Safari -> Advanced -> Feature Flags** 3. On some iOS versions, Safari may appear directly in Settings instead of under Apps 4. If **WebGPU** appears there, turn it on 5. Fully quit and reopen the browser If your browser or iOS version still does not expose WebGPU, try Moda on a desktop browser instead. ## Firefox Firefox support is less predictable across devices, OS versions, and GPU drivers. ### Best-effort Firefox steps 1. Open `about:config` 2. Accept the warning if prompted 3. Search for `dom.webgpu.enabled` 4. Set it to `true` 5. Restart Firefox If WebGPU is still unavailable: 1. Open `about:config` 2. Search for `gfx.webgpu.ignore-blocklist` 3. Set it to `true` 4. Restart Firefox ## If it still does not work Try these next: - Update your graphics driver, especially on Windows or Linux - Try a different supported desktop browser - Try the same browser outside remote desktop or virtualization - If this is a locked-down work machine, browser or GPU policy may be preventing WebGPU ## Why this happens Moda checks more than "are you using Chrome?" The browser also has to provide a working WebGPU adapter on your current machine. That is why WebGPU can work on one computer and fail on another, even in the same browser. ## Sources These steps are based on browser vendor documentation where available: - [Chrome for Developers: WebGPU troubleshooting tips and fixes](https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips) - [Chrome for Developers: What's New in WebGPU (Chrome 146)](https://developer.chrome.com/blog/new-in-webgpu-146) - [WebKit: WebKit Features in Safari 26.0](https://webkit.org/blog/17333/webkit-features-in-safari-26-0) - [WebKit: WebGPU now available for testing in Safari Technology Preview](https://webkit.org/blog/14879/webgpu-now-available-for-testing-in-safari-technology-preview) - [Chrome for Developers: Chromium Chronicle #28 - Getting started with Chrome on iOS](https://developer.chrome.com/blog/chromium-chronicle-28) For Firefox, Mozilla does not currently provide an equivalent end-user troubleshooting page that matches Chrome's level of detail, so the Firefox section above is best-effort guidance. --- ## Overview URL: https://docs.moda.app/help/trust-security ## Are my designs private? Your designs are private by default. Other users cannot see your canvases unless you explicitly share them via: - A **team sharing link** (editable by team members) - A **public link** (view-only or view-and-remix, accessible to anyone with the link) If you are part of an organizational or enterprise account, the organization's administrator may be able to access, manage, or remove content associated with your account. ## Commercial usage rights You own the content you create in Moda. From the [Terms of Service](https://moda.app/terms): - **Your content**: you own all right, title, and interest in your User Content (anything you upload or provide to Moda). - **Generated content**: you own all rights to content generated through the Services (presentations, slides, social media content, etc.). You may use generated content for **personal and commercial purposes**, subject to the Terms of Service. - **Moda templates**: to the extent Moda templates are incorporated into your generated content, Moda grants you a worldwide, sublicensable, transferable, royalty-free license to use those templates as part of your generated content for personal and commercial purposes. - **License to Moda**: you grant Moda a non-exclusive, worldwide, royalty-free license to host, store, and use your content and generated content solely to operate, provide, maintain, and improve the Services. Note that generated content is produced by automated systems and may not be unique. Similar or identical content may be generated for other users. You are responsible for reviewing generated content and ensuring your use complies with applicable laws. For the full terms, see the [Terms of Service](https://moda.app/terms). ## Data handling & privacy Moda collects personal data necessary to provide the service. From the [Privacy Policy](https://moda.app/privacy): - **What is collected**: name, email address, contact information, usage data (device, browser, IP address, how you interact with the service), and cookies - **How it's used**: to provide and operate the service, improve and personalize it, communicate with you, process transactions, and comply with legal obligations - **Moda does not sell** your personal information - **Data sharing**: your information is shared only with your consent, to comply with legal obligations, to protect Moda's rights, or with service providers who assist in operating the service ### Your rights Depending on your location, you may have rights regarding your personal information, including access, correction, deletion, data portability, and objection to certain processing. ### Usage data and model training Moda may use usage data and, where permitted, user content in aggregated or de-identified form to improve the Services, including machine learning models. You may opt out of the use of your content for model training as described in the [Privacy Policy](https://moda.app/privacy). For the full policy, see the [Privacy Policy](https://moda.app/privacy). ## Where is my data stored? ## Security practices Moda implements several security measures: - **Authentication** is handled through Clerk, supporting email/password and social login - **SSO / SAML** authentication is available on the Ultra plan - **Payments** are processed through Stripe; Moda does not store your credit card information directly - **SSRF protection**: server-side URL fetches (for web scraping, image loading, etc.) are validated against SSRF attacks, blocking private IP ranges and metadata endpoints - **URL validation**: brand kit imports and web scraping validate URLs to prevent abuse ## Refunds From the [Terms of Service](https://moda.app/terms): all fees are non-refundable except as required by law. Moda may, in its sole discretion, provide refunds or credits in specific circumstances. ## Age requirement You must be 18 years of age or older to use Moda. ## Contact For privacy-related questions, contact [privacy@moda.app](mailto:privacy@moda.app). ## Accessibility --- ## Overview URL: https://docs.moda.app/help/integrations ## MCP (Model Context Protocol) Moda exposes your designs and canvas tools through the Model Context Protocol (MCP), allowing AI coding agents to read and create designs programmatically. - [Getting Started with MCP](/mcp/getting-started): connect your AI editor to Moda - [MCP Server Overview](/mcp): architecture and transport modes - [Setup Details](/mcp/setup): full setup instructions and troubleshooting - [Tools Reference](/mcp/tools): all available MCP tools - [Design-to-Code Guide](/mcp/design-to-code): turn Moda designs into production code ## REST API Moda provides a REST API for programmatic access to canvases, designs, brand kits, exports, and more. - [API Overview](/api): getting started with the REST API - [Authentication](/api/authentication): API key setup - [Webhooks](/api/webhooks): real-time event notifications ## Other integrations ### Slack Moda has a Slack integration that allows interaction with the AI agent from Slack. ### Google Slides Moda can export slide-type canvases directly to Google Slides. See [Export Formats](/help/export/formats) for details. ### Using your own API keys Moda currently does not support bringing your own API keys for AI providers. All AI operations use Moda's managed infrastructure and are metered through the credit system. ### CLI / Programmatic access For programmatic access, use the [REST API](/api) or [MCP server](/mcp). There is no standalone CLI tool at this time. --- ## Upload a file URL: https://docs.moda.app/api/uploads/uploadFile Upload a file and receive a stable proxy URL. The returned URL can be passed as an attachment URL in the `start_design_task` endpoint. Supports images, PDFs, and PPTX files. --- ## Upload a file from URL URL: https://docs.moda.app/api/uploads/uploadFromUrl Download a file from a public URL and store it. Returns a stable proxy URL that can be used as an attachment in `start_design_task`.