@charisol/ plexo- sdk (英语)

视觉拖放电子邮件和登陆页面构建器 SDK 有AI集成——为React所建.

特征

• 🎨 视觉拖放构建器 ——有活编辑的行,列和元素
• 📧 电子邮件和登陆页面模式( L) - 为两者出口清洁、生产准备的HTML
• 🤖 AI 内容生成 ——在OpenAI,双子座和克洛德的支持下,编辑单个元素,编辑整个布局,或从一个快取生成新的布局
• 🔒 服务器代理的 AI, 没有曝光密钥 —— 您的提供者 API 密钥从未发送到浏览器或存储到浏览器中; 每个 AI 请求都会用您的 Plexo API 密钥进行认证, 并根据您的账户服务器侧配置解决
• 💬 Claude-Code-style AI反馈 – 加载气泡后一行汇总变化,用于每个元素编辑器和布局快栏
• 🖼️ 股票图像搜索 - 脱脂、脱脂、皮克萨拜一体化
• 🎨 设计代号系统 ——斯特拉塔标志性支持统一品牌主题
• 📦 纯客户端部分 ——无自主机;SDK使用您 Plexo API 密钥直接与 Plexo 所主持的 API 进行 AI/publish/编译

安装

npm install @charisol/plexo-sdk

同伴依赖关系 (如尚未安装)

npm install react react-dom

快速启动

普通反应( Vite / CRA)

import { useRef } from 'react';
import { PlexoBuilder, type PlexoBuilderRef } from '@charisol/plexo-sdk';
// Import the builder's stylesheet
import '@charisol/plexo-sdk/dist/plexo-sdk.css';

export function Editor() {
  const builderRef = useRef<PlexoBuilderRef>(null);

  const handleSave = async () => {
    const result = await builderRef.current?.exportDesign('email');
    console.log('HTML:', result?.html);
    console.log('JSON:', result?.json);
  };

  return (
    <div style={{ height: '100vh' }}>
      <PlexoBuilder
        ref={builderRef}
        apiKey="your-api-key"
        mode="email"
        backgroundColor="#ffffff"
        themeBgColor="#6d28d9"
        themeFgColor="#ffffff"
        textColor="#111827"
        showSaveButton={false}
      />
      <button onClick={handleSave}>Save</button>
    </div>
  );
}

Next.js (App路由器) (英语)

重要内容: SDK是一个纯客户端组件,使用拖放和浏览器API. 绝对不能在服务器上制造.

第1步——创建动态包装器

因为SDK只使用浏览器 API,用 next/dynamic 并禁用 SSR。 请确定导入 CSS 样式表 :

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

import dynamic from 'next/dynamic';
import type { PlexoBuilderRef } from '@charisol/plexo-sdk';
import { useRef } from 'react';

// Import the builder's stylesheet
import '@charisol/plexo-sdk/dist/plexo-sdk.css';

// Never SSR the builder — it relies on browser APIs (drag-and-drop, ResizeObserver, etc.)
const PlexoBuilder = dynamic(
  () => import('@charisol/plexo-sdk').then((m) => ({ default: m.PlexoBuilder })),
  { ssr: false, loading: () => <p>Loading builder…</p> }
);

export function TemplateEditor() {
  const builderRef = useRef<PlexoBuilderRef>(null);

  const handleSave = async () => {
    const result = await builderRef.current?.exportDesign('email');
    console.log(result?.html);
  };

  return (
    <div style={{ height: '100vh' }}>
      <PlexoBuilder
        ref={builderRef}
        apiKey="your-api-key"
        mode="email"
        backgroundColor="#ffffff"
        themeBgColor="#6d28d9"
        themeFgColor="#ffffff"
        textColor="#111827"
        showSaveButton={false}
      />
      <button onClick={handleSave}>Save</button>
    </div>
  );
}

步骤2——在服务器组件页面中使用

// app/editor/page.tsx  (Server Component — no "use client")
import { TemplateEditor } from '@/components/template-editor';

export default function EditorPage() {
  return <TemplateEditor />;
}

推荐参考

PlexoBuilder

AI 配置

AI 生成( 单元编辑, 整版编辑, 当画布为空时生成全新的布局) 完全运行 服务器侧没有 aiApiKey prop and never be——一个提供者API密钥(OpenAI, Anthropic, 或双子座)曾经被配置在您的Plexo账户上,并停留在那里,在休息时加密. SDK 认证了 AI 的同样请求 apiKey 你已经传给了 PlexoBuilder;服务器将解决您的账户提供者、密钥和默认级别.

<PlexoBuilder
  apiKey="your-plexo-api-key"
  useAi
  aiTier="AUTO" // optional override: 'AUTO' | 'BASIC' | 'MEDIUM' | 'HIGH'
  // no aiApiKey, no aiProvider selection — both are account-level, not props
  ...
/>

等级从最便宜/最差到最能: BASIC → MEDIUM → HIGH。 。 。 . AUTO (默认)将每个提示的复杂服务器侧进行分类,并自动选择正确的分级——快速"更改按钮颜色"将不会花费与"重新设计这整个登陆页"相同的预算

偶数覆盖 : TemplateJSON.body.aiConfig 可以覆盖 useAi编号 :tier 单一模板:

aiConfig?: {
  useAi?: boolean;
  tier?: string;
}

注意没有 apiKey编号 :provider 字段中的任意一个——一个模板的JSON被装入了浏览器批发中进行编辑,所以存储在其中的秘密实际上永远无法保存. 真正的密钥总是来自您的账户的服务器侧配置, 而不是模板.

如果大赦国际的要求是: 若为 apiKey 实值 "workspace-internal" (SDK由Plexo自己的仪表板提供时使用的哨兵),请求保持同源. 对于每个真实的Plexo API密钥——即任何第三方集成——请求都会被自动路由到Plexo主机制作API. 没什么好配置的 如果一个请求在这里用一个 404 失败, 则表示此软件包版本已过时; 更新为 npm install @charisol/plexo-sdk@latest。 。 。 .

PlexoBuilderRef - 强制性API

通过 ref 有关部分:

const builderRef = useRef<PlexoBuilderRef>(null);

// Export the current design
const { json, html } = await builderRef.current.exportDesign('email');
// or:
const { json, html } = await builderRef.current.exportDesign('landing_page');

// Get the JSON without compiling HTML
const json = builderRef.current.getJson();

V2 编辑 - @charisol/plexo-sdk/v2

一个用于登陆页和应用程序屏幕的图片式视觉构建器:自由出行或网格布局,每屏(桌面/平板/移动)布局,以及9个现成的互动元素(木卫一,视频,社交链接,菜单,HTML嵌入,表格,倒计时器,形式,手风琴). 一个设计是plain JSON——一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行一行.

import { V2Editor } from '@charisol/plexo-sdk/v2';
import '@charisol/plexo-sdk/dist/plexo-sdk.css';

// Works with no props at all: opens a blank page, fully offline.
<div style={{ height: '100vh' }}>
  <V2Editor pages={savedPages} onChange={setPages} onSave={(pages) => api.save(pages)} />
</div>

编辑器填充容器( 给父端一个高), 它只像 V1 客户端 —— 把它包入 next/dynamic 与 ssr: false 在下一个.js.

什么是默认,什么是道具,什么是独立的

流出SOL(英语:SOL). onAskSol(question, context, io) 可能流: 调用 io.onText(replySoFar) 每次到来时,都会有完整的答复(面板显示其不断增长) io.signal ——当所有者按住停止时会中止. 尽头还满回覆. 忽略主机 io 然后把答复还给我 继续工作 添加 solAutoApply 每个更改 SOL 写( 栅栏 plexo-commands 列表)是在其到达时在页面上作出的,所以在SOL仍在回答时会更改页面;一个Undo收回整个答案. 无 solAutoApply 拥有者仍在审查并按下应用程序. context 还携带 nodeName 更早的时候 history因此,后续如"让它更短"是有道理的. readStreamingSolReply 如果一个主机建立自己的面板,(导出)是递增读取器.

缺少道具时没有假的:没有 onAskSol sOL 按钮是隐藏的,没有 onSave 没有保存按钮, 没有 onUpload 图像被嵌入到设计中( 最多1.5 MB ) , 并有清晰的信息 onUploadFont 字体拾取器只提供Google字体(没有“添加字体”按钮)。 上传的字体被存储在设计系统中(designSystem.fonts)并编为 @font-face 规则;如果主机将字体文件存储在另一个来源,请将其传递给 sanitizeV2Html(html, { fontOrigins: [...] })。 。 。 . compilePageToHtml ưμ㼯a head (发音) <link> 标记)和 fontLinks 给那个地方的主机 html + 键 css 在他们自己的页面。 没有任何提供者密钥生活在浏览器中——AI和sock-image搜索通过主机,如V1中.

编辑

编辑自己的颜色(不是你的访客页面)遵循了三个道具. 传出其中任何一个;其他的阴影(平面,边框,徘徊状态,哑音文字)都是从这些阴影中混合而来,所以有暗色文字的浅色背景既能起作用,又能黑暗. 没有通过=Plexo的 石灰上黑色外观.

<V2Editor theme={{ accent: '#96F02E', background: '#000000', text: '#ffffff' }} />

电子邮件

同一编辑器设计电子邮件: <V2Editor mode="email" />。在电子邮件模式中,仅提供每个电子邮件应用程序所能绘制的内容:文本、按钮、图片、分页符、列的间隔和行(在电话上堆放),即时制作的电子邮件部分(标题、主要信息、文本、要闻、呼吁行动、图片、页脚)。 没有免费放置、网格、阴影、动画或脚本, 用编译器写入已完成的电子邮件( 带有内含样式的表格, 外加纯文本版本) :

import { compilePageToEmail, emailIssues, starterEmailPages } from '@charisol/plexo-sdk/v2/compile';
const { html, text, warnings } = compilePageToEmail(page, { designSystem, preheader: 'Your account is ready' });

合并标签, 如 {{first_name}} 让发件人来填写.

格式发送消息的地方

按顺序排列:表单自己的地址(所有者打出)-主机地址 formAction(formId) • 在Plexo内apiKey="workspace-internal" 加号 templateId) Plexo 自己的形式收件箱 ~ 无所事事,编辑和编译者都直截了当地说. 一个具有真实的Plexo密钥的第三方应用程序不能获得Plexo的收件箱(它从页面的自有域中找到网站),所以通过 formAction。 。 。 .

编译

import { compilePageToHtml, compilePageToReact, parsePages } from '@charisol/plexo-sdk/v2/compile';

const parsed = parsePages(json);                       // untrusted JSON in, plain-language error out
if (!parsed.ok) throw new Error(parsed.error);

// Landing pages / templates → HTML
const { html, css, script, document, warnings } = compilePageToHtml(parsed.pages[0], {
  apiKey: 'workspace-internal', templateId,            // inside Plexo: forms work with no setup
  // formAction: (id) => `https://api.acme.test/leads?form=${id}`,   // any other host
  // runtime: 'none',                                   // host forbids scripts on published pages
  // allowEmbedScripts: false,                          // …and wants HTML embeds script-free too
});

// App projects → a standalone React component (imports only "react")
const { code } = compilePageToReact(parsed.pages[0], { componentName: 'HomePage' });

所有东西在浏览器允许的地方作为平版 HTML 工作(scroll-snap carousel,本土手风琴和移动菜单,真实的表格,形式和视频). 可选的运行时间添加了自動自動播放和箭頭,活取计时器,并发送一个表格而不会离开页面;不允许脚本留下它的主机 runtime: 'none'。 。 。 . warnings 是所有者应该修补的普通语言的东西(一个无处发送消息的表格,一个屏幕缺失的桌面元素).

可见的画布

每台屏幕(台式1200,平板768,移动375)为相框. 这是什么 内部 框是屏幕上的页面; 什么是 外部 仅在编辑时显示的工作区域 :

• 完全在屏幕框架外的元素不在该屏幕上发布(如果没有屏幕显示,则完全不在页面中);
• (a) 部分外部元素被剪去其部分边缘;
• 编辑会计算外面的东西 并提议 适合此屏幕 (移动:一叠列;平板块:被缩放为宽度)和 带入视野。当屏幕缺失桌面的元素时,编译器会发出警告.

由于片段的边缘会被剪断,在生长的东西(手风琴,带有错误信息的形式)下留下空间.

未信任输入

一个设计可以来自数据库,AI或第三方应用,因此编译者将它视为不可信:文本和属性被逃脱,链接和图像方案被允许列表,可以添加声明或获取URL的CSS值被丢弃,类名被限制,嵌入沙盒中,以及 parsePages 拒绝未知的元素类型、重复的标识和超大小的树. 不要通过 V1 的 V2 HTML sanitizeCompiledHtml。 。 。 . 它保留了 V2 的样式表和布局,但删除 <details>, (中文(简体) ), <iframe>, (中文(简体) ), <figure> 财务报告和审定财务报表 <script> ——无声地打破了手风琴,电话菜单,视频,HTML嵌入和旋转木马. V2的输出由允许标记和属性列表所构建,所以不需要该步骤;必须进行消毒的宿主应当使用允许这些标记的消毒器.

从以前的 V2 升级

上个V2(V2Canvas, (中文(简体) ), useCanvasStore, (中文(简体) ), compilePageToReact(nodes, pageOrder, …)替换;这是 断开更改 改为 @charisol/plexo-sdk/v2 财务报告和审定财务报表 /v2/compile。旧版本保存的设计仍然开放: isLegacyDesign(doc) 认识他们 convertLegacyDesign(doc, { name, slug }) 将一个页面升级到一个页面(旧页面缩放以适应任何屏幕,因此平板电脑和移动设备得到匹配的缩放版式)。 未结转:品牌文本风格链接和被绑放部分.

框架说明

维特

盒子里没有工作——不需要额外配置.

Next.js (页路由器)

相同的动态导入模式适用 :

import dynamic from 'next/dynamic';

const PlexoBuilder = dynamic(
  () => import('@charisol/plexo-sdk').then((m) => ({ default: m.PlexoBuilder })),
  { ssr: false }
);

Remix / react 路由器 v7

使用 lazy 方法或仅限客户的守护:

import { lazy, Suspense } from 'react';

const PlexoBuilder = lazy(() =>
  import('@charisol/plexo-sdk').then((m) => ({ default: m.PlexoBuilder }))
);

// In your component:
<Suspense fallback={<p>Loading…</p>}>
  <PlexoBuilder ... />
</Suspense>

说明: 在雷米克,把这个放进去 clientLoader 或用途 <ClientOnly> 包装以确保它从未在服务器上被执行.

更改日志

1.1.0 国家

• 新设 readOnly, (中文(简体) ), commentMode,以及 onRequestComment 道具,还有 getNodeRect编号 :getCanvasContainerRect 编辑 PlexoBuilderRef ——让一个主机在画布上方构建 Figma 风格的锚定评论(单击节点时) commentMode 它的编号/类型/坐标、位置、覆盖通过 getNodeRect,通过 readOnly)不需要知道画布的内部DOM结构. 完全向后兼容——现有道具或还原方法没有改变.
• 每个行/栏/元素包装现在都装有 data-plexo-node-type="row"|"column"|"element" 属性与其现有 id (已经是节点的稳定的JSON id).

未释放

• 断开 : 已删除 aiApiKey 道具 (英语). AI世代现在运行服务器侧- 您的提供者密钥被配置在您 Plexo 账户( 在休息时加密) 上, 而不是在每次渲染时传递给浏览器 .
• 断开 : TemplateJSON.body.aiConfig 不再接受 apiKey编号 :provider 仅限 useAi编号 :tier 由于同样的原因(一个模板的JSON装入了客户端,所以不能安全地持有一个秘密),保留.
• aiProvider ;有效的提供者来自您的账户配置,而不是此道具.
• 新克洛德-Code风格的AI回馈:一个装入气泡后再以一行简写来总结变化之处,用于平面"Edit with AI"弹出和布局AI即时栏.
• 布局AI 即时栏现在在画布为空时自动生成全新的布局,而不只是编辑已存在的内容.
• AI请求(并发布/验证-键请求,当使用真实的Plexo API密钥而不是仪表盘的内部会话时)现在自动通向Plexo主机出品API的路由——没有配置. 这里的一款404表示已安装的软件包版本是 stale;更新到最新的.

1.0.1 (中文(简体) )

• 固定: 已删除已滚动 CJS interop shim(require()从无害环境管理产出中——解决与涡轮包装(Next.js 15+16+)和严格的无害环境管理环境的相容性问题
• 所有反应子路径( A)react/jsx-runtime现在已适当外部化

1.0.0 (单位:千美元)

• 初步释放

许可证

麻省理工学院