@fayz-ai/应用程序创建器

状态:预览(实验). 表面是真实的;代码视图,发布和聊天是执行最少的合同. API可不经通知而更改.

应用构建器表面:一个窗口栏,应用程序在它内部运行,以及用来查看代码,发布,和正在做这项工作的人交谈的接缝.

Fayz编辑和一个管理员的应用程序需要同样的东西:窗口铬,里面的活应用程序,旁边的对话,以及一个发布按钮. 写上两次是这个软件包存在要避免的错误。 一个表面,两个主机——编辑器保持其容器的生命周期和聊天,管理员保存其外壳和助手,两者都挂载了相同的组件.

两扇门

• . ——地表. 没有 @fayz-ai/* 完全依赖: 反应,明快反应和阴影符号,这两个主机已经拥有了. 这是费兹编辑进口的门.
• ./plugin —— 说 createAppBuilderPlugin()SDK管理员怎么装的 拉动 @fayz-ai/core, (中文(简体) ), @fayz-ai/admin 财务报告和审定财务报表 @fayz-ai/ui 作为 选项 等同位素, 因此导入表面时不会拖动管理员 .

安装

npm install @fayz-ai/app-builder

端点 : react, (中文(简体) ), react-dom, (中文(简体) ), lucide-react可选同龄人(仅限 ./plugin: @fayz-ai/core, (中文(简体) ), @fayz-ai/admin, (中文(简体) ), @fayz-ai/ui。 。 。 .

水面 水面

import { AppBuilder } from '@fayz-ai/app-builder'

<AppBuilder
  target={{ name: 'Artorius', url: containerPreviewUrl, liveUrl }}
  chat={<YourChatColumn />}
  chatContract={{ send: (message, element) => yourChat.send(message, element) }}
  publish={{ state, publish }}
  onClose={goBack}
  onToggleChat={toggleChat}
  onToggleWide={toggleSidebar}
  slots={{ chromeEnd: <YourTabs />, belowCanvas: <YourTerminal /> }}
/>

预览和代码为 在两个州有一个地表 (单位:千美元)mode),而不是两个组件:通过 a code 槽和开关出现; 省略它而不存在。 聊天从不在这里画——每个主机都不同,但 chatContract "改变这个街区" 是如何从画布 变成任何对话 东道主挂起. publish 在两个主机中都是相同的按钮,每个主机后面都有运输工具;没有合同,它就会被禁用,并说原因.

管理员

import { createAppBuilderPlugin } from '@fayz-ai/app-builder/plugin'

plugins: [createAppBuilderPlugin({ sandboxUrl: import.meta.env.VITE_APP_BUILDER_SANDBOX_URL })]

挂载 a immersive 路由(没有导航条目——门是"Seu site"部件),从租户的站点行中解决目标,打开外壳的助理铁路,并出版 builder_navigate 编号 : builder_reload 编号 : builder_set_viewport 编号 : builder_request_change 给探员.

费兹SDK的一部分

路线图: 元素拾取器上覆( 协议已经在两侧有线) , 真实的代码表面, 和 Fayz 编辑器互换 components/preview/ 这棵树.