Create Custom Interfaces For Your Project

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.

Multi-Page Applications

Create interfaces with multiple pages, each serving a different function, organized in a custom navigation.

Drag-and-Drop Canvas

Build pages using a 12-column grid with a library of AI, data, action, and content widgets.

Custom Branding

Customize logos, colors, navigation layout, favicon, and CSS to match your brand.

Publishing & Sharing

Publish interfaces via a public URL and control member access.

Key Concepts

Interface

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

Page

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.

Widget

Widgets are the building blocks of a page, placed on a 12-column drag-and-drop grid. See the Widget Library section below for the full list.

Widget Library

AI

Widget	Description
Chat	AI chat with your agents
Agent Card	Agent selection card

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

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

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

Primeros Pasos

Creating an Interface

1. Navigate to Interfaces

   Click Interfaces in the project sidebar.

2. 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.
3. Name your interface

   A New Interface modal will appear. Enter a name and click Create. You will be taken to the Interface Builder.

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:

Undo / Redo

Step backward or forward through your changes.

Responsive View

Toggle between Desktop, Tablet, and Mobile previews.

Edit / Preview

Switch between editing mode and an in-builder preview.

Full Preview

Open the interface in a new tab as end users will see it.

Command Palette (⌘K)

Quick access to builder actions via keyboard.

Publish / Save

Save your work or publish the interface to a public URL.

Building Pages

Adding a Page

1. Open the New Page modal

   Click + next to PAGES in the left sidebar.

2. Choose a template

   Filter by category (All Templates, Start, Starter, Advanced) and select one of the available templates.

   Blank Page

   Start from scratch with an empty canvas.

   Analytics Dashboard

   KPI cards, charts, and a recent-activity table.

   Action Form

   Centered form for triggering an action.

   Table View

   Full-width data table with header.

   Chat Workspace

   Embedded chat with sidebar context.

   Agents Hub

   Grid of agent cards with header and filters.

   Actions Panel

   Searchable grid of all available actions.

   Chat + Table

   Side-by-side chat and data view.

3. Name the page

   Enter a page name at the bottom of the modal (defaults to the template name).

4. Create the page

   Click Create Page. The page will be added to your interface and opened on the canvas.

Adding Widgets

1. Find a widget

   In the Widgets panel on the left, browse by category or use the search bar.

2. Add to canvas

   Drag the widget onto the canvas, or click it to place it automatically.

3. Position and resize

   Move and resize widgets on the 12-column grid to achieve your desired layout.

4. Configure the widget

   Select a widget to open its settings in the right panel.

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:

Rename

Click Rename to turn the page name into an inline editable text field directly in the sidebar. Type the new name and confirm.

Change icon

Click Change icon to open an icon picker below the page name. Click any icon to apply it immediately — no save step required.

Add to group

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.

Reorder pages

Click and drag pages in the page list to reorder them. The order determines the navigation order in the published interface.

Delete

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.

Previewing Your Interface

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.

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.

Interface Branding

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

General

Setting	Description
Display title	Text shown in the sidebar header
Logo URL	Square image, recommended 256×256 PNG

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

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.

Advanced

Setting	Description
Favicon URL	Browser tab icon — ICO or PNG format
Custom CSS	Applied to the runtime root for advanced styling

Click Save Branding to apply your changes.

Publishing

aviso

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.

1. Open the Publish modal

   Click Publish in the top right of the Interface Builder.

2. Set your Public URL

   Enter the URL slug for your interface. Lowercase letters, numbers, and hyphens only.

3. Manage member access

   Under Manage Member Access, review or add the users who should have access to this interface.

4. Publish to web

   Click Publish to web. Your interface is now live and accessible at the public URL.

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

Command Palette

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

Available commands

Command	Shortcut
Save changes	⌘S
Publish to web	—
Toggle preview	—
Open branding settings	—
New page from template	—
Undo	⌘Z
Redo	⌘⇧Z
Switch to page	Lists all pages for quick navigation

Type a command, page name, or widget name to search. Press Esc to close.

Casos de Uso

Customer Support

Chat Workspace — support chat with agent context

Knowledge Base — help articles and documentation

Action Form — submit a ticket or request

Data Management

Analytics Dashboard — KPI cards and charts

Table View — full data table for reviewing records

Custom Page — charts and KPI widgets for reporting

Workflow Automation

Actions Panel — browse and execute workflows

Workflow Runs — track run status and history

Analytics Dashboard — key metrics and execution history

Solución de Problemas

Interface not appearing

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.

Page not loading

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.

Unsaved changes warning

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.

Warning banner in Publish modal

This appears when you attempt to publish with unsaved changes.

Close the modal, click Save, then re-open the Publish modal and proceed.

Siguientes Pasos

Agents

Configure agents to power your Chat widgets.

Smart Tables

Set up Smart Tables for data widgets and dashboards.

Workflows

Build workflows to use in Action widgets.

Knowledge Base

Manage your knowledge base for KB widgets.