内框

运行时可编译应用程序的UI:在运行时人和AI代理安装了TSX部件,应用程序的UI会改变,没有部署.

一个应用程序载着一小组信任的人 原始组件 (单位:千美元) 设计系统部件是普通的TSX 写在那些原始人身上的 部件代码运行在应用程序的后端;浏览器只绘制一个具有应用程序自身组件的已验证树,因此UI看起来是本地的,页面中没有部件代码运行.

四条规则,没有一条是可选的:

1. 部件代码从未在浏览器中运行 。 只有应用的编译原始人运行在那里.
2. UI树是数据,在被渲染者读取之前就被验证.
3. 部件代码从不设置颜色或原始 CSS 。 外观出自设计系统;布局出自于有符号约束的风格道具.
4. 部件从不拥有权威 。 数据被解决,动作由app运行,作为取景器.

规格 • 妇女 如何建造地表 • 妇女 安保模式 • 妇女 兼容性 • 妇女 更改日志

安装

bun add @arnilo/liveframe

每个同位素是可选的,只有需要它的子路径:

后端子路径( S)/store/fs, (中文(简体) ), /preview/worker,在流程中的包装器和CLI)需要Bun ≥ 1.4.2. 主机-API无子路径需要 ES2022 外加以下列出的全球. 浏览器子路径( N)/css, (中文(简体) ), /react, (中文(简体) ), /preview/react, (中文(简体) ), /conformance/react需要任何无害环境管理包件。 包船编译 ES2022 JavaScript 与 .d.ts 申报和出版的JSON Schemas; 第13节 有运行时间矩阵和软件包内容.

路径相对 @arnilo/liveframe· ; . 是根导出 。 这个 sdk 行包括 /sdk/gen 以及JSX运行时间; /runner-kit.bundle.js 财务报告和审定财务报表 /validator.bundle.js 也无需非 ECMAScript 全球 。 条目包括捆绑的依赖关系: 橡子守护其未用 console 和包装器的源映射编码器可选使用 TextDecoder 带有纯JavaScript倒置. 预览定时器绑定模块加载;抓取需要编码和URL API. 作者到达捕获。 源、已编译的输出和浏览器捆绑将对照CI中的本表进行核对.

快速启动

编目,其反应执行和验证器都是表面需要的. compileValidator 取一个部件的已验证目录、能力和显示; createRenderer 返回时 <Surface> 画出它验证过的一棵树.

import { type Catalog, compileValidator, defineComponent, obj, str, type UiTree } from "@arnilo/liveframe";
import { createRenderer, implement } from "@arnilo/liveframe/react";

const text = defineComponent({
  kind: "text",
  description: "One line of text.",
  props: obj({ value: str({ maxLength: 200 }) }),
  children: "none",
  variants: ["default"],
  defaultVariant: "default",
  slots: ["root"],
  events: {},
  styleProps: [],
  a11y: { role: "paragraph" },
});

const catalog = {
  format: "liveframe-catalog/1",
  catalogId: "acme.ui@1",
  description: "The app's primitives.",
  vocabulary: {
    colourRoles: ["text.primary", "surface.base", "accent.primary"],
    surfaceRoles: ["surface.base"],
    fillableRoles: ["accent.primary"],
    typographyRoles: ["body"],
    space: ["space.1"],
    radius: ["radius.control"],
    size: ["size.glyph"],
    breakpoints: ["bp.sm"],
    tones: { default: "text.primary" },
    surfaceTypography: "body",
  },
  definitions: [text],
} as const satisfies Catalog;

const capabilities = { format: "liveframe-capabilities/1", sources: {}, actions: {} };
const manifest = {
  format: "liveframe-manifest/1",
  id: "hello",
  version: "1.0.0",
  catalogId: catalog.catalogId,
  params: obj({}),
  state: obj({}),
  context: obj({}),
  initialState: {},
  sources: {},
  actions: [],
};

const Text = implement(text, ({ props, slot, style }) => (
  <p className={slot("root")} style={style}>
    {props.value}
  </p>
));
const { Surface } = createRenderer({ catalog, implementations: [Text] });
const validator = compileValidator({ catalog, capabilities, manifest });
const identity = { id: "acme", version: "1.0.0" };

/** Draw a validated tree that the app's backend rendered. */
export function Hello({
  tree,
  onIntent,
}: {
  tree: unknown;
  onIntent: (intent: { type: "setState" | "action" }) => void;
}) {
  return (
    <Surface
      tree={tree}
      validator={validator}
      theme={identity}
      designSystem={identity}
      onIntent={onIntent}
      fallback={null}
    />
  );
}

export const tree: UiTree = {
  format: "liveframe/1",
  catalogId: catalog.catalogId,
  surfaceId: "hello",
  revision: 1,
  root: { id: "root", kind: "text", props: { value: "Hello from Liveframe" } },
};

部件与 SDK 软件,用于出口 render() jSX运行时间并释放出树 Hello 接收。 这个 预览指南 显示执行部件代码的后端运行器,以及 软件包指南 显示所制成的部件如何成为一个不可改变的软件包 .

对于流传更新, diffTrees(prev, next) 发出可选 liveframe/tree-patch/1 在后端上补丁,浏览器主机应用它 applyPatch(base, patch) 将被补丁的树传递到 <Surface> (在到达时验证整棵树):

import { applyPatch, diffTrees } from "@arnilo/liveframe";

const next = {
  ...tree,
  revision: 2,
  root: { id: "root", kind: "text", props: { value: "Hello again" } },
};
const patch = diffTrees(tree, next);
if (patch.ok) {
  const updated = applyPatch(tree, patch.value);
  if (updated.ok) Hello({ tree: updated.value, onIntent: () => {} });
}

包裹里有什么

这个 光谱 定义每个子路径的合同.

用编码代理

liveframe mcp 是一个 MCP 磁共振 服务器在 stdio 上让一个编码代理读取您的目录, 写一个草稿部件并查看它的成份 。 它只写: 没有安装、放置或批准部件或运行动作的工具 .

1. 安装可选对等器 : bun add -d @modelcontextprotocol/server,以及 bunx playwright install chromium 如果代理商应该抓取截图.
2. 写入默认导出一个配置模块 AuthoringConfig (你的电话) catalog, (中文(简体) ), capabilities, (中文(简体) ), runner 和,为了抓获,a preview(binding) 开始你的 <Preview> 页:1. examples/demo-host/mcp.config.ts 这是一个工作.
3. 与代理注册. 对于克洛德代码,放这个 .mcp.json 在您的应用程序中; Claude Desktop 和其他客户端使用相同的 mcpServers 形状 :

{ "mcpServers": { "liveframe": { "command": "bunx", "args": ["liveframe", "mcp", "./mcp.config.ts"] } } }

客户端自己启动服务器. 这个 MCP 指南 涵盖8个工具,抓取和出错.

指南

• 模型 ——何去何从,谁拥有每一步
• 格式和验证 ——目录,主题,设计系统,能力,运单,树木
• 写入部件 - TSX SDK、意向助手和 liveframe gen
• 铸造器 ——原始人,执行人, <Surface> 和意图处理
• 样式 ——食谱,三张单和范围CSS
• 包、仓库和跑道 —— 说 pack(), (中文(简体) ), fileStore, (中文(简体) ), inProcessRunner, (中文(简体) ), workerRunner
• 预览和抓取 预览会话, <Preview> 财务报告和审定财务报表 liveframe preview capture
• 遵约 软件目录、造型、制造器和存储的测试工具箱
• MCP的代理作者 —— 说 liveframe mcp 及其八项工具
• 代理通过演示 - 作者、抓取、安装和放置草稿
• 安保模式 ——什么被验证在哪里,什么不是沙盒
• 兼容性 - 一个版本的突起可能改变

状态

前 1.0 (中文(简体) )0.2.2 是当前发布)。 公共 API、格式和光盘 fileStore 布局由 兼容政策; 数据 发布注释 列出此发行的已知限制.

发展

bun install
bun run check   # build, generated output, typecheck, lint, format, tests

仓库布局、路线图和计划: roadmap.md, (中文(简体) ), plans/与代理人合作: AGENTS.md安全报告: SECURITY.md。 。 。 .

许可证

麻省理工学院——见 LICENSE。 。 。 .