ConvertexConvertex
Getting Started

Full step-by-step setup

This guide walks you through connecting Claude (the AI assistant) to Convertex. Once configured, you'll be able to generate entire Webflow pages by simply describing what you want.

Estimated time: 15 minutes. You only need to do this setup once.

What you need

  • A Convertex account (create one if you haven't already)
  • A Claude account on claude.ai (Pro, Team, or Enterprise plan for MCP)

Overview

Here are the 3 steps to follow. Each one is explained in detail below.

  1. Install Claude: the application that runs the AI
  2. Install the Skills: the rules that teach Claude how to write Webflow code
  3. Connect the MCP: the bridge that links Claude to your Convertex editor

It might seem like a lot, but each step is simple. We guide you click by click.

Step 1: Install Claude

Claude is the AI assistant that generates code for you. Choose the application that suits you:

Ideal for designers: a simple visual interface, no terminal needed.

Download Claude Desktop

Go to claude.ai/download and download the application for macOS or Windows.

Install the application

Open the downloaded file and follow the instructions. The application is placed in your Applications folder.

Sign in

Open Claude Desktop and sign in with your Anthropic account. If you don't have one, create one.

MCP (the connection with Convertex) requires a Claude Pro, Team, or Enterprise plan. Claude's free plan does not support this feature.

Step 2: Install the Skills

Skills are "rule sheets" that teach Claude how to write Webflow-compatible code. Without them, Claude writes generic code. With them, the code converts perfectly.

Download the skill

Sign in to convertex.ai. Click the Skills & MCP button in the top bar, then download the zip file.

Open Claude settings

On claude.ai, click the gear icon at the bottom left to open Settings.

Upload the skill

Navigate to Claude Skills, click Add Skill, and upload the zip file.

How to check it works?

Open a new conversation with Claude and ask:

"With Convertex, generate a simple hero section with a title and a button."

If the skills are properly installed, Claude will ask you 3 questions before generating:

  1. Client-First or free naming?: choose "free" if you're not familiar with Client-First
  2. rem or px?: choose "px" if you don't have a preference
  3. Content language?: French, English, etc.

Tip: you can answer these 3 questions directly in your prompt to go faster. Example: "With Convertex, free naming, in px, content in English, generate a hero section."

Step 3: Connect the MCP

The MCP is the bridge between Claude and Convertex. It allows Claude to send the code it generates directly to your editor, without manual copy-paste.

First: generate your API key

Open Convertex

Go to convertex.ai and sign in.

Generate a key

Click Skills & MCP in the top bar, then open the MCP tab. Click Generate a key.

Copy the key

Your key starts with cvx_. Copy it immediately -- it won't be visible again afterward.

Keep your key in a safe place. If you lose it, you'll need to generate a new one.

Then: connect the MCP

Quick method (recommended): one click, no code involved.

Download the extension file

In the MCP tab of Convertex, click Install for Claude Desktop to download the convertex.mcpb file.

Install the extension

Double-click the downloaded file. Claude Desktop opens and asks for confirmation.

Enter your API key

Paste the key you generated (cvx_...) when Claude Desktop prompts for it.

That's it. The MCP is active immediately.

Manual method (if the quick method doesn't work)

Open Claude Desktop > Settings > Developer > Edit Config and paste:

{
  "mcpServers": {
    "convertex": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.convertex.ai/mcp",
        "--header",
        "Authorization: Bearer cvx_YOUR_KEY_HERE"
      ]
    }
  }
}

Replace cvx_YOUR_KEY_HERE with your key. Save and fully restart Claude Desktop.

Requires Node.js installed on your machine.

Verify the connection

Open a new conversation with Claude and ask:

"Test the Convertex connection."

Claude should respond with your account information (plan, remaining conversions, etc.). If so, everything is connected.

Step 4: Install the Chrome extension

The Convertex Capture extension lets you capture any section from an existing website and send it directly to your Convertex editor to reproduce it in Webflow.

Install the extension

Go to the Chrome Web Store and search for Convertex Capture, then click Add to Chrome.

Sign in

Click the extension icon in your browser and sign in with your Convertex account.

Test a capture

Go to any website, click the extension, then select a section. The HTML/CSS code is sent to your Convertex editor.

The extension is optional but very useful for reproducing existing sections. More details in the dedicated guide.

First full test

Everything is set up. Let's test the complete workflow.

Ask Claude to generate a component

Open a new conversation with Claude and say:

"With Convertex, generate a hero section with a dark background, a white title, a light gray paragraph, and a purple button. Responsive."

Check in Convertex

Open convertex.ai. The code generated by Claude appears in the editor. The preview on the right shows the visual result.

Test the breakpoints (Desktop, Tablet, Mobile) to verify responsiveness.

Convert and paste into Webflow

Click Convert, then Copy, then paste into Webflow Designer with Cmd+V.

Verify in Webflow

The elements appear with their classes and styles. Check the hierarchy in the Navigator and the styles in the Style Manager.

If something doesn't work, check the FAQ & Troubleshooting page for solutions to common issues.

What's next

You're all set. Here's what you can do now:

Previous

How does it work?

Next

Quick Start: 5 minutes

On this page