Pages

Build and preview React pages from source files in Builder

Pages are the frontend part of a Builder workspace. In the current Builder, a page is managed as a React application source tree, not as a block canvas. You edit files, preview the compiled app, and connect the interface to workspace automations through HTTP endpoints, WebSocket events, and the injected Prisme.ai SDK.

Use pages when users need a custom interface around an agent, workflow, internal tool, dashboard, or integration.

What Changed

No Legacy Canvas

The old visual block editor is no longer a Builder navigation item. User interfaces are built from React components and files.

Code and Preview

Pages have a source editor and a native preview. Switch between them from the page toolbar.

React Template

A new page can initialize a React, Vite, Tailwind CSS, and Radix-based starter application.

Deployment Preview

Deployed bundles can appear in the Pages list as read-only previews.

Page Workspace

The Builder layout is organized around the workspace sidebar:

• Overview shows usage, recent changes, errors, and quick actions.
• Activity shows event traces and correlation IDs.
• Pages contains editable source pages and read-only deployed bundles.
• Automations contains backend workflows and webhooks.
• Imports manages installed apps, custom code, and integration packages.
• Files lists uploaded workspace assets.
• Settings manages workspace configuration, sharing, secrets, and RBAC.

The editable page currently appears as index. It represents the source app that Builder compiles and previews.

Create a Page

1. Open the workspace

   In AI Studio, open Create > Builder, then select the workspace that should contain the page.

2. Open Pages

   Select Pages in the Builder sidebar. If the workspace has no page source yet, click the + action or initialize the template from Code mode.

3. Initialize the template

   Builder creates a starter React app with files such as:

   • src/App.tsx
   • src/main.tsx
   • src/styles/globals.css
   • index.html
   • package.json
   • vite.config.ts
4. Edit the source

   Switch to Code and edit the source files. The file tree supports folders, file selection, file creation, and file rename.

5. Preview the app

   Switch back to Preview. Builder compiles the React source and renders it in the native preview area.

6. Save the page

   Click Save when the page works as expected. Saving synchronizes the source files to the workspace.

Code Mode

Code mode is where the page source lives. Use it to:

• Edit React and TypeScript files.
• Add reusable components under src/components.
• Update global styles under src/styles.
• Add utility functions under src/lib or src/hooks.
• Configure Vite, Tailwind CSS, TypeScript, and package metadata.

Builder tracks unsaved changes and enables Save when files have changed.

Preview Mode

Preview mode compiles the source and renders the page inside Builder. Use the device controls to test:

• Desktop
• Tablet
• Mobile

The preview receives runtime context from the platform:

interface AppProps {
  sdk: SDK
  user: unknown
  workspace: {
    id: string
    slug: string
    name: string
  }
  backends?: Record<string, { slug: string }>
}

Use this context to call workspace webhooks, stream events, and adapt the interface to the current workspace or user.

Connect to Automations

Pages usually become useful when they call or listen to automations.

HTTP Webhooks

Use an automation with an endpoint when the page needs request-response behavior.

async function runAutomation(sdk: SDK, workspaceSlug: string) {
  const response = await fetch(
    `${sdk.host}/workspaces/slug:${workspaceSlug}/webhooks/myAutomation`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        ...(sdk.token ? { Authorization: `Bearer ${sdk.token}` } : {}),
        ...(sdk._csrfToken ? { "x-prismeai-csrf-token": sdk._csrfToken } : {}),
      },
      body: JSON.stringify({ name: "World" }),
    }
  )

  return response.json()
}

Events

Use workspace events when the page needs real-time behavior or long-running automation feedback.

const events = await sdk.streamEvents(workspace.id, {
  "source.sessionId": true,
})

events.on("app.greeting.completed", (event) => {
  console.log(event.payload)
})

events.emit("app.greeting.requested", { name: "World" })

Activity

Every automation run and event emission can be inspected from Activity. Use the generated correlation ID to follow the full trace from page action to backend execution.

Deployed Bundles

When a workspace has deployed page bundles, Builder lists them under Pages as read-only entries. Read-only pages use a lock icon and cannot be edited from the source editor. Use them to inspect the deployed app while keeping the editable source separate.

To change a deployed page:

1. Open the editable index source.
2. Make and save changes.
3. Deploy the workspace again.
4. Reopen the deployed bundle preview.

Files and Assets

The Files section is separate from the page source tree. Use it for uploaded assets that belong to the workspace, such as PDFs, images, spreadsheets, or other binary files.

For app source files, use Pages > Code. For workspace uploads, use Files.

Troubleshooting

The preview stays on Initializing

Open Code and verify that the workspace has a valid React entry point such as src/App.tsx and src/main.tsx. If no files exist, initialize the template.

The page shows a build error

Read the error in the preview, fix the corresponding source file, and return to Preview. Typical causes are invalid imports, missing exports, or TypeScript syntax errors.

The page cannot call an automation

Check that the automation endpoint exists, that the URL uses the current workspace slug, and that authentication headers include the platform token and CSRF token when required.

The UI action ran but no result appeared

Open Activity, filter by the correlation ID, and inspect the automation trace. The request may have reached the backend but failed inside an instruction.

Next Steps

Automations

Build the backend workflows that pages call.

Testing & Debugging

Trace page actions through Activity and correlation IDs.

Integrations

Connect pages and automations to external systems.

Deployment

Publish the workspace once the page is ready.