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

# Create Custom Interfaces For Your Project

> Build custom, multi-page app experiences on top of your project resources using a no-code drag-and-drop builder.

Interfaces is a no-code app builder that lets project admins create custom, multi-page applications on top of existing project resources — agents, chats, smart tables, dashboards, knowledge bases, actions, workflows, documents, and meetings. Instead of the default chat experience, you can build purpose-built interfaces with multiple pages, drag-and-drop widgets, custom branding, and a shareable public URL.

<CardGroup cols={2}>
  <Card title="Multi-Page Applications" icon="layer-group">
    Create interfaces with multiple pages, each serving a different function, organized in a custom navigation.
  </Card>

  <Card title="Drag-and-Drop Canvas" icon="objects-column">
    Build pages using a 12-column grid with a library of AI, data, action, and content widgets.
  </Card>

  <Card title="Custom Branding" icon="palette">
    Customize logos, colors, navigation layout, favicon, and CSS to match your brand.
  </Card>

  <Card title="Publishing & Sharing" icon="globe">
    Publish interfaces via a public URL and control member access.
  </Card>
</CardGroup>

## Key Concepts

<AccordionGroup>
  <Accordion title="Interface" icon="browser">
    An interface is a collection of pages that together form a complete user experience for a project. Each project can have multiple interfaces.

    | Property      | Description                                                      |
    | ------------- | ---------------------------------------------------------------- |
    | **Name**      | Display name for the interface                                   |
    | **Published** | Whether the interface is available to end users via a public URL |
    | **Branding**  | Custom logo, colors, navigation layout, favicon, and CSS         |
  </Accordion>

  <Accordion title="Page" icon="file">
    A page is a single screen within an interface. Each page has a name, icon, and position in the navigation. Pages are built by dragging widgets onto a canvas and can be created from pre-built templates.
  </Accordion>

  <Accordion title="Widget" icon="puzzle-piece">
    Widgets are the building blocks of a page, placed on a 12-column drag-and-drop grid. See the [Widget Library](#widget-library) section below for the full list.
  </Accordion>
</AccordionGroup>

## Widget Library

<Tabs>
  <Tab title="AI">
    | Widget         | Description              |
    | -------------- | ------------------------ |
    | **Chat**       | AI chat with your agents |
    | **Agent Card** | Agent selection card     |
  </Tab>

  <Tab title="Data">
    | Widget             | Description                              |
    | ------------------ | ---------------------------------------- |
    | **Smart Table**    | Table, review, kanban, or dashboard view |
    | **Dashboard**      | Smart Table analytics dashboard          |
    | **Knowledge Base** | Browse and search knowledge              |
    | **Analytics**      | Usage analytics and feedback             |
    | **Chart**          | Data visualization chart                 |
    | **Data Grid**      | Tabular data from a Smart Table          |
    | **Filter**         | Dropdown or search filter                |
    | **Form Field**     | Text, number, date, or checkbox input    |
    | **Record Picker**  | Select records from a Smart Table        |
  </Tab>

  <Tab title="Actions">
    | Widget                | Description                     |
    | --------------------- | ------------------------------- |
    | **Actions**           | List of available actions       |
    | **Action Form**       | Single action as a form         |
    | **Workflow Runs**     | Workflow run status and history |
    | **Execution History** | Workflow execution history      |
  </Tab>

  <Tab title="Content">
    | Widget           | Description                     |
    | ---------------- | ------------------------------- |
    | **Document**     | Document viewer and editor      |
    | **Meetings**     | Meeting transcripts and notes   |
    | **JSON Builder** | Structured JSON editor          |
    | **Text**         | Rich text content               |
    | **Button**       | Interactive button with actions |
    | **Image**        | Display an image                |
    | **Number / KPI** | Display a metric or KPI         |
  </Tab>
</Tabs>

## Primeros Pasos

### Creating an Interface

<Steps>
  <Step title="Navigate to Interfaces">
    Click **Interfaces** in the project sidebar.
  </Step>

  <Step title="Create a new interface">
    * If no interfaces exist yet, click **+ Create Your First Interface** in the center of the page.
    * If interfaces already exist, click **+ New Interface** in the top right.
  </Step>

  <Step title="Name your interface">
    A **New Interface** modal will appear. Enter a name and click **Create**. You will be taken to the Interface Builder.
  </Step>
</Steps>

### Interface Builder Layout

Once inside the Interface Builder, you'll see three main areas:

| Area             | Description                                        |
| ---------------- | -------------------------------------------------- |
| **Left Sidebar** | Page list and Widgets panel                        |
| **Canvas**       | The page editing area — drag widgets here to build |
| **Right Panel**  | Configuration settings for the selected widget     |

The **top bar** contains the following controls:

<CardGroup cols={2}>
  <Card title="Undo / Redo" icon="rotate-left">
    Step backward or forward through your changes.
  </Card>

  <Card title="Responsive View" icon="mobile">
    Toggle between Desktop, Tablet, and Mobile previews.
  </Card>

  <Card title="Edit / Preview" icon="eye">
    Switch between editing mode and an in-builder preview.
  </Card>

  <Card title="Full Preview" icon="arrow-up-right-from-square">
    Open the interface in a new tab as end users will see it.
  </Card>

  <Card title="Command Palette (⌘K)" icon="terminal">
    Quick access to builder actions via keyboard.
  </Card>

  <Card title="Publish / Save" icon="cloud-arrow-up">
    Save your work or publish the interface to a public URL.
  </Card>
</CardGroup>

## Building Pages

### Adding a Page

<Steps>
  <Step title="Open the New Page modal">
    Click **+** next to **PAGES** in the left sidebar.
  </Step>

  <Step title="Choose a template">
    Filter by category (**All Templates**, **Start**, **Starter**, **Advanced**) and select one of the available templates.

    <CardGroup cols={2}>
      <Card title="Blank Page" icon="file">
        Start from scratch with an empty canvas.
      </Card>

      <Card title="Analytics Dashboard" icon="chart-bar">
        KPI cards, charts, and a recent-activity table.
      </Card>

      <Card title="Action Form" icon="bolt">
        Centered form for triggering an action.
      </Card>

      <Card title="Table View" icon="table">
        Full-width data table with header.
      </Card>

      <Card title="Chat Workspace" icon="message">
        Embedded chat with sidebar context.
      </Card>

      <Card title="Agents Hub" icon="robot">
        Grid of agent cards with header and filters.
      </Card>

      <Card title="Actions Panel" icon="list">
        Searchable grid of all available actions.
      </Card>

      <Card title="Chat + Table" icon="table-columns">
        Side-by-side chat and data view.
      </Card>
    </CardGroup>
  </Step>

  <Step title="Name the page">
    Enter a page name at the bottom of the modal (defaults to the template name).
  </Step>

  <Step title="Create the page">
    Click **Create Page**. The page will be added to your interface and opened on the canvas.
  </Step>
</Steps>

### Adding Widgets

<Steps>
  <Step title="Find a widget">
    In the **Widgets** panel on the left, browse by category or use the search bar.
  </Step>

  <Step title="Add to canvas">
    Drag the widget onto the canvas, or click it to place it automatically.
  </Step>

  <Step title="Position and resize">
    Move and resize widgets on the 12-column grid to achieve your desired layout.
  </Step>

  <Step title="Configure the widget">
    Select a widget to open its settings in the right panel.
  </Step>
</Steps>

### Managing Pages

To access page options, hover over a page in the sidebar and click the **⋯** (three-dot menu) that appears. This gives you the following options:

<AccordionGroup>
  <Accordion title="Rename" icon="pen">
    Click **Rename** to turn the page name into an inline editable text field directly in the sidebar. Type the new name and confirm.
  </Accordion>

  <Accordion title="Change icon" icon="icons">
    Click **Change icon** to open an icon picker below the page name. Click any icon to apply it immediately — no save step required.
  </Accordion>

  <Accordion title="Add to group" icon="folder">
    Click **Add to group** to open an inline panel with a text input. Enter a group name (e.g. "Admin", "Reports") and click **Save** to organize pages under a labeled group in the navigation. To remove a page from its group, leave the field empty and click **Save**.
  </Accordion>

  <Accordion title="Reorder pages" icon="arrows-up-down">
    Click and drag pages in the page list to reorder them. The order determines the navigation order in the published interface.
  </Accordion>

  <Accordion title="Delete" icon="trash">
    Click **Delete** to trigger a browser confirmation dialog: "Delete this page? This cannot be undone." Click **OK** to confirm or **Cancel** to abort. An interface must always have at least one page.
  </Accordion>
</AccordionGroup>

## Previewing Your Interface

<Tabs>
  <Tab title="Edit / Preview Toggle">
    Use the **Edit / Preview** toggle in the top bar to switch between editing mode and an in-builder preview of the current page. This is useful for checking your layout as you build without leaving the builder.
  </Tab>

  <Tab title="Full Preview">
    Click **Full Preview** in the top right to open the interface in a new browser tab exactly as end users will see it. This renders the full interface — including sidebar navigation, branding, and all pages — outside the builder environment.
  </Tab>
</Tabs>

## Interface Branding

Click the **palette icon** next to the interface name in the top bar to open the **Interface Branding** modal.

<Tabs>
  <Tab title="General">
    | Setting           | Description                           |
    | ----------------- | ------------------------------------- |
    | **Display title** | Text shown in the sidebar header      |
    | **Logo URL**      | Square image, recommended 256×256 PNG |
  </Tab>

  <Tab title="Navigation">
    **Navigation layout** — controls how end users move between pages:

    | Layout       | Description                                                  |
    | ------------ | ------------------------------------------------------------ |
    | **Sidebar**  | Vertical menu on the left — best for apps with many pages    |
    | **Top bar**  | Horizontal nav above content — great for a landing-page feel |
    | **Floating** | Hamburger menu in a drawer — maximizes canvas space          |
    | **No nav**   | Single-page mode — use buttons inside the page to navigate   |

    **Initial state** — whether the sidebar starts **Expanded** or **Collapsed**.

    **Active page indicator** — visual style for the selected page:

    * **Pill**: filled background
    * **Soft**: tinted background
    * **Bar**: left accent line
  </Tab>

  <Tab title="Colors">
    | Setting                       | Description                                                                                 |
    | ----------------------------- | ------------------------------------------------------------------------------------------- |
    | **Primary color**             | Used for buttons, links, and active states — enter a hex value or pick from preset swatches |
    | **Accent color** *(optional)* | Sidebar accent color; defaults to the primary color                                         |

    A **Live Preview** updates in real time as you make changes.
  </Tab>

  <Tab title="Advanced">
    | Setting         | Description                                      |
    | --------------- | ------------------------------------------------ |
    | **Favicon URL** | Browser tab icon — ICO or PNG format             |
    | **Custom CSS**  | Applied to the runtime root for advanced styling |
  </Tab>
</Tabs>

Click **Save Branding** to apply your changes.

## Publishing

<Warning>
  Saving and publishing are separate actions. Always save your changes before publishing. If you open the Publish modal with unsaved changes, a warning banner will prompt you to save first.
</Warning>

<Steps>
  <Step title="Open the Publish modal">
    Click **Publish** in the top right of the Interface Builder.
  </Step>

  <Step title="Set your Public URL">
    Enter the URL slug for your interface. Lowercase letters, numbers, and hyphens only.
  </Step>

  <Step title="Manage member access">
    Under **Manage Member Access**, review or add the users who should have access to this interface.
  </Step>

  <Step title="Publish to web">
    Click **Publish to web**. Your interface is now live and accessible at the public URL.
  </Step>
</Steps>

To make an interface unavailable, open the Publish modal and use the unpublish option.

## Command Palette

Press <kbd>⌘K</kbd> (Mac) or <kbd>Ctrl+K</kbd> (Windows) — or click the **⌘K** button in the top bar — to open the command palette.

<AccordionGroup>
  <Accordion title="Available commands" icon="terminal">
    | Command                | Shortcut                             |
    | ---------------------- | ------------------------------------ |
    | Save changes           | <kbd>⌘S</kbd>                        |
    | Publish to web         | —                                    |
    | Toggle preview         | —                                    |
    | Open branding settings | —                                    |
    | New page from template | —                                    |
    | Undo                   | <kbd>⌘Z</kbd>                        |
    | Redo                   | <kbd>⌘⇧Z</kbd>                       |
    | Switch to page         | Lists all pages for quick navigation |

    Type a command, page name, or widget name to search. Press <kbd>Esc</kbd> to close.
  </Accordion>
</AccordionGroup>

## Casos de Uso

<CardGroup cols={3}>
  <Card title="Customer Support" icon="headset">
    **Chat Workspace** — support chat with agent context

    **Knowledge Base** — help articles and documentation

    **Action Form** — submit a ticket or request
  </Card>

  <Card title="Data Management" icon="database">
    **Analytics Dashboard** — KPI cards and charts

    **Table View** — full data table for reviewing records

    **Custom Page** — charts and KPI widgets for reporting
  </Card>

  <Card title="Workflow Automation" icon="gears">
    **Actions Panel** — browse and execute workflows

    **Workflow Runs** — track run status and history

    **Analytics Dashboard** — key metrics and execution history
  </Card>
</CardGroup>

## Solución de Problemas

<AccordionGroup>
  <Accordion title="Interface not appearing" icon="circle-question">
    **Possible causes:**

    * The interface has not been published yet
    * You are viewing the wrong project
    * You do not have the required permissions

    Check the interface publish status and verify you are in the correct project.
  </Accordion>

  <Accordion title="Page not loading" icon="triangle-exclamation">
    **Possible causes:**

    * A widget is misconfigured
    * A referenced resource (agent, table, action, etc.) no longer exists or is inaccessible

    Review widget settings in the right panel and verify all referenced resources are available.
  </Accordion>

  <Accordion title="Unsaved changes warning" icon="floppy-disk">
    The **Unsaved changes** indicator appears in the top bar and the **Save** button turns orange when you have pending changes.

    Click **Save** before previewing or publishing to ensure your latest changes are applied.
  </Accordion>

  <Accordion title="Warning banner in Publish modal" icon="bell">
    This appears when you attempt to publish with unsaved changes.

    Close the modal, click **Save**, then re-open the Publish modal and proceed.
  </Accordion>
</AccordionGroup>

## Siguientes Pasos

<CardGroup cols={2}>
  <Card title="Agents" icon="robot" href="/agents/agents">
    Configure agents to power your Chat widgets.
  </Card>

  <Card title="Smart Tables" icon="table" href="/knowledge-base/smart-tables">
    Set up Smart Tables for data widgets and dashboards.
  </Card>

  <Card title="Workflows" icon="gears" href="/tools/workflows-v2">
    Build workflows to use in Action widgets.
  </Card>

  <Card title="Knowledge Base" icon="book" href="/knowledge-base/kb-overview">
    Manage your knowledge base for KB widgets.
  </Card>
</CardGroup>