Plexo
Start Free
PLEXO DEVELOPER HUB & API ENGINE

Embed, Automate &
Build with AI Agents.

Add the Plexo visual builder to your product with SDK 2, compile pages to clean HTML or React, or connect Cursor, Claude, and Antigravity through our native MCP server. The classic builder keeps working.

$npm i @charisol/plexo-sdk
Configure MCP Server
app/developer-quickstart.tsxSDK 2
import { V2Editor } from "@charisol/plexo-sdk/v2";
import { compilePageToHtml } from "@charisol/plexo-sdk/v2/compile";

// 1. Embed the visual builder
<V2Editor
  pages={savedPages}
  onSave={async (pages) => saveToMyDatabase(pages)}
  formAction={(formId) => `/api/forms/${formId}`}
/>

// 2. Turn a saved page into clean HTML
const { document } = compilePageToHtml(page);
SDK & MCP Active
Classic builder supported
EMBEDDABLE SDK

Plexo SDK 2 for React & Next.js

Give your users a visual website builder inside your own product. They edit pages section by section, you keep the pages in your database and compile them to clean HTML or React.

site-editor.tsx
import { V2Editor } from "@charisol/plexo-sdk/v2";
import "@charisol/plexo-sdk/dist/plexo-sdk.css";

export default function SiteEditor() {
  return (
    <div style={{ height: "100vh" }}>
      <V2Editor
        onSave={async (pages) => {
          await saveToMyDatabase(pages);
        }}
        formAction={(formId) => `/api/forms/${formId}`}
      />
    </div>
  );
}
Package: @charisol/plexo-sdk (SDK 2)Full guide →

Section by section, for anyone

Pages are built from ready-made sections that people edit by clicking and typing. Brand colours and fonts stay in sync through one design system, with Strata.

Clean HTML or React out

Compile any page on your server with compilePageToHtml, or call /api/v1/compile-v2. Forms post to your own address with formAction.

Classic builder keeps working

Already using <PlexoBuilder />? It is unchanged, with the same API key and endpoints. See the classic docs when you are ready to compare.

NATIVE MCP SERVER

Plexo MCP Server for AI Agents

Connect Cursor, Antigravity, Claude Desktop, or ChatGPT to your Plexo workspace. Prompt AI assistants to generate, edit, link custom domains, or publish pages autonomously.

claude_desktop_config.json
{
  "mcpServers": {
    "plexo": {
      "command": "npx",
      "args": ["-y", "@charisol/plexo-mcp@latest"],
      "env": {
        "PLEXO_API_KEY": "plx_live_your_key_here",
        "PLEXO_APP_URL": "https://plexo.app"
      }
    }
  }
}
Package: @charisol/plexo-mcpMCP Protocol 1.0
tool: create_landing_page

Autonomous Page Creation

Generates multi-page visual templates or raw HTML pages from natural language prompts.

tool: linkDomainToTemplate

Custom Domain Binding

Links custom domains to published templates with Vercel DNS and TLS provisioning.

tool: duplicate_landing_page

Template & Blob Cloning

Duplicates visual blocks and asset blobs cleanly across sub-page hierarchies.

tool: create_commerce_product

Digital Products & Payments

Lists a digital download or service, manages orders, and switches a site between its own Paystack keys or Plexo's Paystack/Stripe.

INTERACTIVE PLAYGROUND

Developer Code Reference

Copy-paste code for embedding the SDK, compiling pages on your server, connecting an AI assistant over MCP, or calling the REST API. The classic builder is still here too.

components/site-editor.tsx
'use client';

import { useRef } from 'react';
import { V2Editor, type V2EditorRef, type PageDefinition } from '@charisol/plexo-sdk/v2';
import '@charisol/plexo-sdk/dist/plexo-sdk.css';

export function SiteEditor({ pages }: { pages?: PageDefinition[] }) {
  const editor = useRef<V2EditorRef>(null);

  return (
    <div style={{ height: '100vh' }}>
      <V2Editor
        ref={editor}
        pages={pages}                       // omit to start on a blank page
        autoSave
        onSave={async (all) => {
          await fetch('/api/site', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              pages: all,
              designSystem: editor.current?.getDesignSystem(),
            }),
          });
        }}
        formAction={(formId) => `/api/forms/${formId}`}   // forms post to your server
        features={{ codeView: false, viewSwitch: false }}  // keep the screen minimal
      />
    </div>
  );
}