> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prisme.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Discover Builder, the workspace for building apps, automations, and integrations on Prisme.ai

<Frame>
  <img src="https://mintcdn.com/prismeai/DqMytpkd4s_f0V1S/images/ai-builder-nav.png?fit=max&auto=format&n=DqMytpkd4s_f0V1S&q=85&s=a9fc8e3c7abd183a47f84ad0693fe677" alt="Builder workspace overview" width="1350" height="953" data-path="images/ai-builder-nav.png" />
</Frame>

Builder is the creation workspace of Prisme.ai. Use it to build custom apps, orchestrate automations, connect enterprise systems, and inspect runtime activity from the same workspace.

Builder is now organized around source-based pages, backend automations, imports, files, activity traces, and workspace settings.

## What You Build

<CardGroup cols={2}>
  <Card title="Custom Apps" icon="window-maximize">
    Build React interfaces that run as workspace pages and connect to Prisme.ai runtime context.
  </Card>

  <Card title="Automations" icon="gears">
    Create event-driven workflows, webhook endpoints, scheduled jobs, and backend orchestration.
  </Card>

  <Card title="Integrations" icon="plug">
    Install apps, configure imports, call external APIs, and connect enterprise systems.
  </Card>

  <Card title="Operational Traces" icon="chart-line">
    Follow every request, event, and automation run through Activity and correlation IDs.
  </Card>
</CardGroup>

## Main Workspace Areas

<AccordionGroup>
  <Accordion title="Overview">
    The workspace dashboard summarizes recent usage, recent changes, top errors, and quick actions such as publishing.
  </Accordion>

  <Accordion title="Activity">
    Activity is the runtime trace explorer. Use it to filter events, inspect correlation IDs, and debug a full page-to-automation flow.
  </Accordion>

  <Accordion title="Pages">
    Pages are source-based React applications. Builder provides a file tree, source editor, native preview, desktop/tablet/mobile preview controls, and read-only deployed bundle previews.
  </Accordion>

  <Accordion title="Automations">
    Automations contain backend logic. They can run from events, schedules, endpoints, or manual tests from the editor.
  </Accordion>

  <Accordion title="Imports">
    Imports manage installed apps and extension packages, including app configuration and custom code.
  </Accordion>

  <Accordion title="Files">
    Files contains uploaded workspace assets. It is separate from the page source tree used in Pages.
  </Accordion>

  <Accordion title="Settings">
    Settings contains workspace configuration, sharing, secrets, RBAC, versioning, and publishing options.
  </Accordion>
</AccordionGroup>

## Typical Workflow

<Steps>
  <Step title="Create or open a workspace">
    Start from Builder and choose a workspace. The workspace is the container for pages, automations, imports, files, secrets, activity, and deployment settings.
  </Step>

  <Step title="Build the frontend">
    Open **Pages**, initialize the React template if needed, edit the source in **Code**, and verify behavior in **Preview**.
  </Step>

  <Step title="Build backend logic">
    Open **Automations** to create endpoints, event handlers, scheduled workflows, or internal orchestration steps.
  </Step>

  <Step title="Connect the page and backend">
    From the page, call automation endpoints through HTTP or emit/listen to workspace events through the injected SDK.
  </Step>

  <Step title="Trace and debug">
    Use **Activity** to follow the resulting trace. Correlation IDs connect page actions, events, automation instructions, errors, and outputs.
  </Step>

  <Step title="Deploy">
    Publish the workspace when the page and automations are ready. Deployed page bundles can be inspected as read-only previews from **Pages**.
  </Step>
</Steps>

## Development Modes

<Tabs>
  <Tab title="Configure">
    Use the Builder UI to create workspaces, automations, imports, files, secrets, and deployment settings without leaving the product.
  </Tab>

  <Tab title="Code">
    Use React, TypeScript, Tailwind CSS, and the Prisme.ai SDK for frontend pages. Use automation instructions and custom code for backend logic.
  </Tab>

  <Tab title="Observe">
    Use Activity tables, timelines, graphs, and distribution views to understand exactly what happened at runtime.
  </Tab>
</Tabs>

## Builder in the Platform

Builder is usually paired with the newer Prisme.ai products:

<CardGroup cols={3}>
  <Card title="Agent Creator" icon="robot">
    Build and test agent behavior, then connect agents to Builder workflows.
  </Card>

  <Card title="Knowledges" icon="database">
    Use knowledge bases from custom pages and automations.
  </Card>

  <Card title="Governe" icon="shield-halved">
    Apply platform roles, product access, model policy, and organizational controls.
  </Card>

  <Card title="Insights" icon="chart-line">
    Use analytics feedback to improve agents, prompts, and workflows.
  </Card>

  <Card title="LLM Gateway" icon="network-wired">
    Route model usage through governed providers and model policies.
  </Card>

  <Card title="Storage" icon="hard-drive">
    Store files, app state, and workspace data used by Builder experiences.
  </Card>
</CardGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Pages" icon="file-code" href="/products/ai-builder/pages">
    Build source-based React interfaces in Builder.
  </Card>

  <Card title="Automations" icon="gears" href="/products/ai-builder/automations">
    Create backend logic and workflows.
  </Card>

  <Card title="Testing & Debugging" icon="vial" href="/products/ai-builder/testing-debugging">
    Trace runtime behavior with Activity and correlation IDs.
  </Card>

  <Card title="Framework Architecture" icon="diagram-project" href="/products/ai-builder/framework-architecture">
    Understand the Builder architecture.
  </Card>
</CardGroup>