Build these apps with your AI agent

The designs on this site come with an MCP server. Connect it to Claude Code, Cursor or any MCP client and the agent can read every screen, its tokens and generated code, or clone a whole project into an Expo app with HeroUI Native and Uniwind.

1. Download the server

One file, no dependencies. It needs Node 20 or later.

curl -O ORIGIN/showcase-mcp.mjs

2. Add it to your agent

Claude Code:

claude mcp add showcase -e SHOWCASE_URL=ORIGIN -- node $PWD/showcase-mcp.mjs

Other clients (Cursor, Windsurf, Claude Desktop), in the MCP config file:

{
  "mcpServers": {
    "showcase": {
      "command": "node",
      "args": ["/absolute/path/to/showcase-mcp.mjs"],
      "env": { "SHOWCASE_URL": "ORIGIN" }
    }
  }
}

3. Ask for what you need

• “Clone uber into ./uber-app with HeroUI Native and Uniwind.”
• “Build the first screen of uber and compare it with the screenshot.”
• “Give me the colour tokens of uber as a Uniwind global.css.”

Tools

list_projects

The apps on this site.

get_project

A project's screens, palette, fonts and screen-to-screen navigation.

get_design_context

The layer tree of a screen: sizes, auto layout, colours with token names, type, text, notes.

get_screenshot

The screen as an image, to compare a build against.

get_tokens

Colours and text styles as JSON, a Uniwind global.css or a tokens.ts.

get_code

A screen or layer as HeroUI Native + Uniwind, or React Native StyleSheet.

get_svg

Icons and vectors as SVG markup.

clone_project

Writes the whole app as an Expo scaffold: theme, tokens, one file per screen, screenshots, navigation.