AI Assistant

This guide explains how to set up to receive AI assistance and how to use AI to create wireframes or perform other productive tasks.

Setup MCP server

To support AI, we are developing and releasing the MCP Server for Frame0. All desktop AI services that support MCP (Claude Desktop, Cursor, etc.) can be used by configuring as shown below. Please refer to the MCP server setup guide for each AI service.

{
  "mcpServers": {
    "frame0-mcp-server": {
      "command": "npx",
      "args": ["-y", "frame0-mcp-server"]
    }
  }
}

If you have changed the port number of the API server for Frame0, you can use a different port number by using the --api-port=<port> argument.

Prompting

The most commonly used prompt will be generating wireframes. Typically, a single screen is created using prompts like the following.

• “Create a login screen for Phone in Frame0”
• “Create a Instagram home screen for Phone in Frame0”
• “Create a Netflix home screen for TV in Frame0”

And you can use prompts to modify the generated screen.

• “Change the color of the Login button”
• “Remove the Twitter social login”
• “Replace the emojis by icons”
• “Set a link from the google login button to the Google website”

You can also generate some codes from the wireframes in Frame0.

• “Generate HTML code from the current page of Frame0”

Since Frame0’s MCP server provides various tools, you will be able to perform desired tasks through various prompts.