Getting Started

This guide will help you set up Wireweave and create your first wireframe.

Installation

Using the Playground

The fastest way to try Wireweave is through the Playground. No installation required - just start writing code!

NPM Package

Install the core library in your project:

npm install @wireweave/core

MCP Server for AI Assistants

To use Wireweave with Claude or other AI assistants:

1. Get an API key from the Dashboard

2. Add to your Claude Desktop config:

{
  "mcpServers": {
    "wireweave": {
      "command": "npx",
      "args": ["@wireweave/mcp-server"],
      "env": {
        "WIREWEAVE_API_KEY": "your-api-key"
      }
    }
  }
}

3. Ask Claude to create wireframes!

Your First Wireframe

Let's create a simple contact form:

page "Contact" {
  navbar {
    logo "Company"
    nav {
      link "Home"
      link "About"
      link "Contact" active
    }
  }

  main {
    heading "Get in Touch"
    text "We'd love to hear from you."

    card {
      form {
        input "Name" text
        input "Email" email
        input "Message" textarea
        button "Send Message" primary
      }
    }
  }

  footer {
    text "2026 Company Inc."
  }
}

Understanding the Syntax

Pages

Every wireframe starts with a page:

page "Page Title" {
  // content goes here
}

Components

Components are nested inside pages:

page {
  card {
    heading "Title"
    text "Description"
    button "Action"
  }
}

Modifiers

Add modifiers to customize components:

button "Click Me" primary    // primary style
button "Cancel" secondary    // secondary style
card center                  // centered layout
input "Email" email          // email input type

Next Steps

• Components Guide - Learn about available components
• Layouts Guide - Master layout options
• MCP Server Guide - Set up AI integration