@fayz-ai/app-builder

Status: preview (experimental). The surface is real; the code view, publish and chat are contracts with minimal implementations. API may change without notice.

The app-builder surface: a window bar, the app running inside it, and the seams for seeing the code, publishing, and talking to whoever is doing the work.

The Fayz editor and an admin app need the same thing: the window chrome, the live app inside it, the conversation beside it, and a publish button. Writing that twice is the mistake this package exists to avoid. One surface, two hosts — the editor keeps its container lifecycle and its chat, the admin keeps its shell and its assistant, and both mount the same component.

Two doors

• . — the surface. No @fayz-ai/* dependency at all: React, lucide-react and shadcn tokens, which both hosts already have. This is the door the Fayz editor imports.
• ./plugin — createAppBuilderPlugin(), how the SDK admin mounts it. Pulls @fayz-ai/core, @fayz-ai/admin and @fayz-ai/ui as optional peers, so importing the surface never drags the admin in.

Install

npm install @fayz-ai/app-builder

Peer deps: react, react-dom, lucide-react. Optional peers (only for ./plugin): @fayz-ai/core, @fayz-ai/admin, @fayz-ai/ui.

The surface

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 /> }}
/>

Preview and code are one surface in two states (mode), not two components: pass a code slot and the switch appears; omit it and it does not exist. The chat is never drawn here — it varies per host — but chatContract is how "change this block" gets from the canvas into whatever conversation the host mounted. publish is the same button in both hosts with each one's transport behind it; without a contract it renders disabled and says why.

The admin

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

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

Mounts an immersive route (no nav entry — the door is the "Seu site" widget), resolves the target from the tenant's site row, opens the shell's assistant rail, and publishes builder_navigate / builder_reload / builder_set_viewport / builder_request_change to the agent.

Part of the Fayz SDK

Roadmap: the element-picker overlay (the protocol is already wired on both sides), a real code surface, and the Fayz editor swapping its components/preview/ tree for this one.