---
name: canvas
description: >-
  Use when the user wants to interact with the designer canvas, inspect the
  current design or project, open an existing design, create a new design or
  screen, inspect frames/screens/pages/artboards or nodes/elements/layers,
  edit the layout, styles, content, theme, components, or reusable design
  system, export implementation guidance for a screen, duplicate or reorder
  screens, insert new elements, delete elements, search for visible text, or
  capture screenshots of the canvas.
  Triggers on: /canvas, "show me the canvas", "what's on the canvas",
  "select the frame", "edit this screen", "change this element",
  "find the button text", "take a screenshot", "open this project",
  "implement this screen", "build this page", "recreate this UI",
  "change the theme", "duplicate this screen", "make this reusable",
  "insert a button below this", "clean up duplicate components".
mcpServers:
  - flutterflow-designer:
      type: stdio
      command: /Users/alainbagmi/.designer/bin/designer_mcp
---

Use the FlutterFlow Designer MCP tools to interact with the running designer app canvas.

Start by calling `create_session` on `flutterflow-designer` with a short task-relevant `agent_name` and set `integration_host` to `claudeCode`.
Read `toolGuideMarkdown` from that response before your first `call_design_script`.
Reuse the returned `session_id` on later `call_design_script` requests.
If the designer app or MCP server is unavailable, say so clearly.

If the FlutterFlow Designer app is not running, let the user know they need to open it first.