M2 user guide

M2 Canvas is a shared design canvas for your team and AI agents. This guide walks through getting in, the editor, working with agents, design systems, sharing and exporting.

Get access

M2 is in private beta, so sign-up is invite-only.

1. Join the waitlist on the home page. When your request is approved, we email you an invite link.
2. Open the link and sign up with Google, GitHub or an email and password. Use the address the invite was sent to. Invite links are valid for 7 days and work once.
3. If you sign up with email, enter the code we send you (or click the link in that email) to verify the address.

Already have an account? Sign in with Google, GitHub or your email and password. "Forgot password?" on the sign-in page sends a reset link.

After your first sign-in you land in your workspace, and a short intro offers two ways to start: Start with an example or Blank project. Either one opens a project with the setup guide for connecting your agent. You can bring the intro back from the user menu with Show onboarding.

Workspaces and projects

• New Project in the workspace sidebar creates a project. How many projects you can have depends on your plan — see Pricing.
• A project holds one or more pages. In the editor's left sidebar, use + next to Pages to add one, double-click a page to rename it, and use its menu to duplicate, reorder or delete it. Deleting a page removes it permanently.
• Deleting a project moves it to Trash, where you can restore it, delete it forever or empty the trash. Projects stay in Trash for the retention period of your plan.
• If a workspace goes over its plan's project limit, the extra projects become read-only until you upgrade.

The editor

Left sidebar. The Design tab shows the project's design system, its pages, and the Nodes list of layers (plus Assets for editors). The Resources tab holds your uploaded files and apps. Collapse the sidebar with Shift \.

Top bar. On the left are the panel toggles — Page, Inspector and Connect — and the tools: Select V, Pan H, Frame F, Text T, the shape tools (Rectangle R, Line L, Arrow Shift L, Ellipse O, Polygon, Star), Pen P and Image I. The project name sits in the middle; click it to rename. On the right are the save status, who's here, and Share.

Canvas. Zoom from the control in the bottom-right corner, or with ⌘ +, ⌘ −, ⌘ 0 (100%), ⌘ 1 (fit all) and ⌘ 2 (fit selection). Hold Space to pan. The M2 logo menu has canvas preferences such as rulers, pixel grid, snapping and background.

Agent pane. M2's built-in agent lives on the right. It's docked while the left sidebar is open; collapse the sidebar and it becomes a floating card you can minimize to a small pill.

Design with the built-in agent

Type what you want in the agent pane — for example "Design a pricing page with three plans" — and press Enter (Shift Enter for a new line). The agent sees the current page and your selection automatically, and it builds with your project's design system.

• Use the model picker next to the composer to choose a model.
• New chat starts a fresh conversation; the history menu brings back earlier ones.
• The built-in agent uses credits. Your workspace switcher shows how many are left and when they renew. If you run out, the chat tells you before it starts. Plans and credit amounts are on Pricing.

Connect your own agent

You can also design with the agent you already use — Claude Code, Codex, Cursor, OpenCode, Qoder or any MCP-compatible client.

• The quickest way is to paste this into your agent: "Read https://m2ui.ai/agent-setup.md and follow the instructions to connect to M2." It sets itself up and asks you to sign in in the browser.
• Or open Connect in the top bar and click Copy to agent. That copies a starter prompt with this project and page, ready to paste.
• Per-client commands and the MCP endpoint are in Connect over MCP.

The Connect panel lists every agent on the project, who it belongs to, which page it's on and whether it's still responding. Agents and teammates edit the same canvas live, each with their own cursor.

Design systems

A design system (DS) holds your tokens and components, and agents build with it so every screen stays on-brand.

• Create one from Design Systems in your workspace with New design system — start from scratch or fork an existing one. A new DS starts as a Draft.
• Open a DS to see its Overview, Library, Assets and Versions. Click Start Editing to make changes, then Publish to release a new version, with optional release notes.
• Components are created by agents: ask the agent on the DS page, for example "Add a Button component".
• In a project, use Bind Design System in the left sidebar to choose the DS for new nodes, and pick which version the project follows. The Inspector's Design System section shows the DS and version a selected node uses.

Share and collaborate

• Share (top bar) invites people to a project as viewers by email, and sets general access to Restricted or Anyone with the link (view only). Copy link gives you a read-only link.
• To add editors, go to Workspace Settings → Members → Invite and choose Admin, Editor or Viewer. Editors and admins take a seat; viewers are free.
• Only workspace owners and admins can manage sharing.
• Everyone working on a project shows up as an avatar in the top bar and a live cursor on the canvas — people and agents alike.

Assets and apps

• In Resources, upload images with Upload files… or Upload folder… and organize them into folders. Supported formats: PNG, JPEG, GIF, WebP, SVG, BMP and TIFF, up to 10 MB each. Total storage depends on your plan.
• Agents can build interactive apps on the canvas. Select an app and press Run (or Enter) to use it in place. From Resources → Apps, Export code downloads it as a Vite project you can run with npm install && npm run dev.
• The Assets tab on the Design side browses your design system's icons and components so you can drag them onto the canvas.

Export

Right-click anything on the canvas:

• Copy as → Copy as PNG (⌘ Shift C), Copy ID or Copy Node JSON.
• Export… saves a PNG, JPG or SVG at a scale from 0.5× to 4×, or at a fixed width or height.

Keyboard shortcuts

On Windows, use Ctrl where you see ⌘.

Good to know

• Changes save automatically; the save status sits next to the avatars.
• Undo covers your own edits in the current session. It doesn't carry over after a reload.
• Projects don't have a version history yet. Design systems keep a list of published versions.
• Questions? Write to hello@m2ui.ai.