JoliUI

Setup JoliUI

Connect JoliUI to your favorite AI coding assistant in minutes. Generate pixel-perfect UI mockups directly from your IDE.

Before you start

You need a JoliUI account and API key. Sign up for free, then generate an API key from your dashboard.

Paste your API key here to auto-fill the configuration below

Choose your client

Setup for Claude Code

1

Run this command in your terminal

This adds JoliUI as a user-scoped MCP server available across all projects.

claude mcp add joliui -s user -e JOLIUI_API_KEY=YOUR_API_KEY -- npx -y joliui
2

Restart Claude Code

Close and reopen Claude Code for the MCP server to load.

3

Verify installation

Check that JoliUI is connected:

claude mcp list

Using JoliUI

Once connected, you have access to three powerful tools:

get_component_context

Analyzes a React component and generates a Functional Design Schema with UI/UX recommendations.

generate_visual_mockup

Creates a pixel-perfect visual mockup from the schema. Costs $0.50 per generation.

edit_visual_mockup

Iterates on an existing mockup using natural language instructions. Costs $0.30 per edit.

Example Workflow

Simply ask your AI assistant to analyze and generate a mockup:

"Analyze my Dashboard component at src/app/dashboard/page.tsx and generate a visual mockup with improved UI"

JoliUI will scan your component, generate a design schema, and create a high-fidelity mockup you can iterate on.

Need help?

Check our documentation or reach out if you have questions.

GitHubGo to Dashboard