A language for AI to speak UI

Wireweave is an open-source DSL for describing wireframes. Your AI assistant (Claude, GPT) can use our MCP server to generate and render wireframes instantly.

Get Started View on GitHub Documentation

page "Login" centered {
  card p=6 w=320 {
    col gap=4 {
      title "Sign In" level=2
      input "Email" type=email
      input "Password" type=password
      button "Sign In" primary w=full
    }
  }
}

Try it yourself

Write Wireweave DSL code and see the result instantly

wireframe.wf

Loading editor...

Enter wireframe code to see preview

Open Full Editor

Two Ways to Use Wireweave

Choose the approach that fits your workflow

Free Forever

Self-Hosted

Use the open-source core library locally

npm install @wireweave/core

Unlimited local usage, completely free
VSCode extension for instant preview
Integrate directly into your tools (MIT License)
Full control over your workflow

View on GitHub

Recommended

Pay as you go

MCP / API

Connect your AI assistant to Wireweave

Claude / GPT + MCP

Connect MCP to your AI assistant
Claude, GPT can call Wireweave tools
Cloud storage, versioning, sharing
1,000 credits/month free

Get Started

Everything you need for rapid prototyping

Wireweave combines the simplicity of a DSL with the power of AI to make wireframing effortless.

Open Source (MIT License)

Simple DSL Syntax

Human-readable syntax that AI assistants can generate naturally.

HTML Rendering

Export to HTML with CSS. Use the AST for custom integrations.

VSCode / Cursor Extension

Live preview as you type. Syntax highlighting and auto-completion.

Markdown Integration

Embed wireframes in your documentation with code blocks.

Light & Dark Themes

Light and dark themes out of the box for different viewing preferences.

Core API Tools5 tools

Parse

Parse Wireweave DSL source code into an AST (Abstract Syntax Tree)

1 credit

Validate

Validate Wireweave DSL syntax without generating output. Use strict mode to also check for unknown attributes.

1 credit

Grammar

Get the Wireweave DSL grammar documentation and syntax reference

0 credits

Guide

Get the comprehensive LLM guide for Wireweave DSL. This is the PRIMARY resource for learning the language - includes syntax, components, patterns, and best practices. Call this FIRST before generating wireframes.

0 credits

Patterns

Get common layout patterns for wireframes including headers, sidebars, forms, cards, and more. Use these as building blocks.

0 credits

Cloud Storage5 tools

Cloud List Projects

List all your Wireweave projects. Projects help organize your wireframes. WORKFLOW: Call this first before saving wireframes. If the list is empty, ask the user whether to create a new project (call wireweave_cloud_create_project) or use the default project.

0 credits

Cloud Create Project

Create a new project to organize wireframes. Use this when the user wants to organize their wireframes into a specific project. The project can have a custom name, description, and color.

0 credits

Cloud Update Project

Update an existing project

0 credits

Cloud List Wireframes

List your saved wireframes. Optionally filter by project or tags.

0 credits

Cloud Get Wireframe

Get a specific wireframe by ID, including its code and metadata

0 credits

Account & Billing4 tools

Account Balance

Check your current credit balance and subscription status

0 credits

Account Subscription

Get detailed subscription information including plan features

0 credits

Account Transactions

View your credit transaction history

0 credits

Pricing

Get current pricing information for plans, credit packs, and feature costs

0 credits

35 MCP tools available

Works in Your Favorite Tools

Preview wireframes directly in VSCode, Cursor, and Markdown documents

VSCode / Cursor Extension

Live preview as you type

Markdown Support

Embed in documentation

How it works

From code to wireframe in three simple steps.

Write DSL Code

Use simple, readable syntax to describe your wireframe structure.

dashboard.wf

page "Dashboard" {
  header h=56 {
    row justify=between align=center px=4 {
      text "Dashboard" bold
      avatar "User" size=sm
    }
  }
  main p=6 {
    row gap=4 {
      card p=4 { text "Revenue" muted }
      card p=4 { text "Users" muted }
    }
  }
}

AI Generates

Claude or other AI assistants can write Wireweave DSL naturally.

Create a settings page with profile section

Claude

Here's a settings wireframe:

page "Settings" {
  card { avatar ... }
}

wireweave_render_html

Instant Preview

Get HTML output ready for review and iteration.

Preview

HTML

Frequently asked questions

Everything you need to know about Wireweave.

Is Wireweave free?

The DSL core library (@wireweave/core) is completely free and open-source (MIT). The MCP/API service includes a free tier with 1,000 credits per month.

What is the MCP/API service?

We provide a hosted MCP server that allows AI assistants (Claude, GPT, etc.) to call Wireweave tools. Credits are consumed per call. If you use the core library locally, it's completely free.

Why does the MCP service cost credits?

Server hosting, authentication, usage tracking, and rate limiting infrastructure incur costs. Using the core library locally is always free.

What is Wireweave DSL?

Wireweave is a domain-specific language designed for describing UI wireframes in a simple, human-readable format. It was created specifically to enable AI assistants to generate wireframes naturally through conversation.

How does AI integration work?

Wireweave provides an MCP (Model Context Protocol) server that integrates with AI assistants like Claude. When you ask the AI to create a wireframe, it uses Wireweave tools to generate and render the output.

How does the credit system work?

Each API call consumes credits based on the operation type. Basic operations like parsing and rendering cost 1-5 credits. Free tier includes 1,000 credits monthly. Paid plans offer more credits, and you can also purchase credit packs for one-time use.

What is the refund policy?

In accordance with Paddle Buyer Terms, all purchases can be refunded within 14 days if no credits have been used. Once you use any credits, refunds are not available. You can cancel your subscription anytime and continue using the service until the end of your billing period.

What output formats are supported?

Wireweave outputs HTML with inline CSS. This format is perfect for interactive prototypes, design reviews, and sharing with stakeholders.

Can I use Wireweave without AI?

Absolutely! While Wireweave is optimized for AI workflows, you can write DSL code manually using the Playground, the visual drag-and-drop editor, or integrate the core library directly into your tools.

What components are available?

Wireweave includes a rich set of UI components: pages, cards, forms, inputs, buttons, tables, navigation elements, modals, and more. Check the documentation for the complete list.