Monet
Getting Started

Two Ways to Build

Choose your workflow: manually browse and copy components, or let AI handle everything through MCP integration. Both paths lead to beautiful interfaces.

Copy & PasteAI with MCP
Method 1

Copy & Paste

The traditional approach: browse our collection, preview components in action, and copy the code directly into your project. Simple, fast, and gives you full control.

1

Browse

Explore our collection at /c. Filter by category, style, or industry. Use search to find exactly what you need.

2

Preview

See every component in action with our live preview. Check responsive behavior across different screen sizes.

3

Copy

Click the code tab to reveal the source. One click copies everything you need to your clipboard.

4

Customize

Paste into your project and make it yours. Adjust colors, spacing, and content with Tailwind classes.

Browse Components
Method 2

AI with MCP

Let AI do the heavy lifting. Connect Monet to your coding agent via MCP (Model Context Protocol), describe what you need, and watch as the right components are discovered and integrated automatically.

Step 1: Get Your API Key

Sign in to Monet and visit the MCP page to generate your personal API key. This key authenticates your AI agent with our component registry.

Get API Key

Step 2: Configure Your Agent

Add the Monet MCP server to your AI coding environment. Choose the setup that matches your workflow:

Claude DesktopAdd to your config file

{
  "mcpServers": {
    "monet": {
      "command": "npx",
      "args": ["-y", "@anthropic/monet-mcp"],
      "env": {
        "MONET_API_KEY": "your-api-key"
      }
    }
  }
}

Config location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS)

Claude CodeRun in terminal

claude mcp add monet -- npx -y @anthropic/monet-mcp

Set the MONET_API_KEY environment variable before running Claude Code.

Step 3: Start Building

Just describe what you need in natural language. The AI will search our registry, find matching components, and integrate them into your project.

Example prompts

Find a hero section with gradient background and floating elements

I need a pricing table component for a SaaS product

Show me testimonial sections with carousel animation

Add a modern footer with newsletter signup

Set Up MCP

Which Method is Right for You?

Copy & Paste

Best when you want direct control over the process.

  • You know exactly which component you need
  • Quick grab of a single component
  • Want to review code before adding
  • Learning how components are built

AI with MCP

Best when you want AI to handle discovery and integration.

  • Not sure which component fits your needs
  • Building multiple sections at once
  • Want AI to adapt components to your style
  • Prefer conversational development flow
Ready to Start?

Build something
beautiful today

Whether you copy code or let AI do the work,
every component is designed to impress.

Browse ComponentsSet Up MCP