Connect to MCP

Misaki Studio's desktop app ships an MCP server. Point an AI agent at it and the agent can work inside your projects the same way you do — create files, build element trees, style them, wire logic and animation, and export code.

MCP (Model Context Protocol) is the open standard AI tools use to talk to apps, so any MCP client works: Claude Code, Claude Desktop, Cursor, and others.

Before you start

• Install and open the Misaki Studio desktop app. The MCP server is part of the app — it starts when the app starts and stops when you quit.

• Sign in at least once on this machine, so your profile and projects exist locally.

• Leave the app running while your agent works.

Note: There is no setting to switch on. The endpoint is live as soon as the app is running.

The endpoint

The app serves MCP over streamable HTTP at:

http://localhost:16472/mcp

1. Add the server to your client

Claude Code — run this once in your terminal:

claude mcp add --transport http misaki-studio http://localhost:16472/mcp

Claude Desktop, Cursor and other clients — add this to your client's MCP config file:

{
  "mcpServers": {
    "misaki-studio": {
      "type": "http",
      "url": "http://localhost:16472/mcp"
    }
  }
}

Restart the client. misaki-studio should now show up in its list of connected servers, along with the Misaki Studio tools.

2. Pick a project

Every session starts with no project selected. Tell your agent which project to work in — it opens the project itself using two tools:

• list-projects — every project on this machine, with its id.

• select-project — opens one for the rest of the session.

Until a project is selected, the other tools answer: "No project selected. Call list-projects first, then select-project."

Note: The agent's project is chosen per session and is independent of the project you have open on screen. The two do not have to match.

3. Point the agent at an exact file or element

Instead of describing where something lives, copy a direct reference out of the editor:

• Right-click a file in the explorer and choose Copy For MCP.

• Right-click an element on the canvas and choose Path → Copy For MCP.

You get a reference that looks like this:

Project(Website)→File(pages/docs)→Element(...)

Paste it into your prompt. The agent hands it straight to the tool, which resolves it to the right file and element — no guessing, no searching.

What the agent can do

• Create projects, folders and files, and read a file's whole node tree.

• Build and edit designs — elements, text, SVG, paths, images and component instances, with styles and variants.

• Wire behavior — properties, states, events, conditions and logic.

• Animate — timelines and keyframes.

• Manage the design system — colors, fonts, images, sounds, spacing, radius and themes.

• Set up data — CMS models, APIs and storage.

• Work the database — tables, views, write actions and auth.

• Export code, PDF and video, and take preview screenshots to check its own work.

Troubleshooting

Connection refused, "No project selected.", "app websocket not connected", a missing profile, or nothing answering on port 16472 — all covered in Troubleshooting.

A note on security

The endpoint is meant for your own machine and has no authentication — anything that can reach the port can read and change your projects. Keep it local: don't forward, tunnel or publish port 16472, and take care on shared or public networks.