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.

Frame0 provides two ways to get AI support. The first is to use the Frame0 AI Agent directly, and the second is to use the Frame0 MCP server together with other AI services.

Frame0 AI Agent (experimental)

You can use the AI Agent directly implemented in the Frame0 application.

Setup AI Agent

To use it, you must enter at least one or more LLM provider’s API keys in the Settings. You can get your API keys from the below sites:

Chat with Agent

To chat with the AI Agent, you must select Agent from the Navbar. This will bring up the Agent View.

Prompt Input: In the area below, you can enter your prompt and select your desired LLM Model.
Add Context: Typically, the current page is automatically added to the context. If you don’t want this, you can delete it. You can also use the Add Context button to re-add the current page or to add an image to the context. Adding an image is useful if you already have an image of the screen you want to create. When you attach an image and press the Send button, a wireframe corresponding to the attached image is automatically generated.
Prompt Hints: If you’re not sure how to phrase your prompt or want to know what kind of prompts are possible, you can press the Prompt Hints button and choose one of the examples.
New Chat: You can start a new chat by clicking the New Chat button at the top of the sidebar. Continuing a single chat session for too long can increase the context length, which may slow down the response or incur higher costs. It’s best to start a new chat when you want to enter a prompt unrelated to the previous conversation.
Chat History: You can view your chat history here. A maximum of the last 10 chats are saved.

Prompt Hints

The most commonly used prompt will be generating wireframes. You can generate wireframes for all the screens of an application at once, or you can generate a wireframe for a specific single screen. You can also attach an image corresponding to the wireframe you want to draw.

“Create all screens for instagram clone app”
“Create a login screen for phone”

And you can use prompts to modify the generated screen.

“Add social login buttons”
“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.

“Generate HTML with Tailwind CSS from the current page”

Frame0 MCP server

We recommend using the Frame0 AI Agent, but we also offer the Frame0 MCP Server. for those who find it difficult to use. All desktop AI services that support MCP (Claude Desktop, Cursor, etc.) can be used with the Frame0 MCP server.

Setup MCP server

Typically MCP server can be configured as shown below. Please refer to the MCP server setup guide for each AI service such as Claude Desktop, Cursor, etc.

{
  "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.