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

# Interfaces

> Build and deploy full apps powered by your Twin agents

Every agent deserves a frontend. Interfaces let you build **full websites and apps** — with sign-ups, databases, and your Twin agents working behind the scenes — directly inside Twin. No external tools needed.

This is a new way to build software: describe what you want, and Twin generates a complete, deployable application with your agents as the backend.

## Why Interfaces

Until now, deploying a Twin agent to users meant integrating via the [REST API](/rest-api) — great for developers, but a barrier for everyone else.

Interfaces change that. Now **anyone** can build and ship a complete app powered by Twin agents:

<CardGroup cols={3}>
  <Card title="Websites" icon="globe" color="#F4D03F">
    Dashboards, landing pages, internal tools — fully responsive
  </Card>

  <Card title="Apps with Auth" icon="lock" color="#F4D03F">
    User sign-ups, login flows, and per-user data
  </Card>

  <Card title="Database-backed" icon="database" color="#F4D03F">
    Full database schemas generated and managed automatically
  </Card>
</CardGroup>

<Tip>For technical users, you can still deploy agents via the REST API. Interfaces are for when you want to ship a complete product without writing code.</Tip>

## How It Works

<Steps>
  <Step title="Build your agent" icon="hammer" color="#F4D03F">
    Start by creating your agent in the Orchestrator as usual. Get it working, test it, deploy it.
  </Step>

  <Step title="Open Interfaces" icon="table-columns" color="#F4D03F">
    Click the Interfaces icon in the top-right of your agent's view. The Orchestrator will often suggest building an interface at the end of a build — but you can open it anytime.

    <Frame caption="Access Interfaces from the icon in the top-right corner of any agent">
      <img src="https://mintcdn.com/twinlabs/32bkTaA33ltG-5t7/images/interfaces-access.png?fit=max&auto=format&n=32bkTaA33ltG-5t7&q=85&s=48363ba549e3d36dbe50d6e566ff4f47" alt="How to access the Interfaces feature" width="1024" height="686" data-path="images/interfaces-access.png" />
    </Frame>
  </Step>

  <Step title="Describe your app" icon="message" color="#F4D03F">
    Use the chat on the left side to describe what you want your app to look like. Twin generates the full frontend — layout, components, styling, interactions — with your agent powering the backend.
  </Step>

  <Step title="Preview and iterate" icon="eye" color="#F4D03F">
    See your app live on the right side. Want to change something? Just say it in the chat — "make the table sortable", "add a dark mode", "show a chart for daily trends" — and the interface updates instantly.

    <Frame caption="A complete dashboard app built with Interfaces — chat on the left, live preview on the right">
      <img src="https://mintcdn.com/twinlabs/32bkTaA33ltG-5t7/images/interfaces-dashboard.png?fit=max&auto=format&n=32bkTaA33ltG-5t7&q=85&s=81a661b461c38188218cae9b0e24fcb8" alt="Interface builder showing a live dashboard" width="1024" height="706" data-path="images/interfaces-dashboard.png" />
    </Frame>
  </Step>

  <Step title="Publish" icon="rocket" color="#F4D03F">
    When you're ready, publish your app online. Choose who can access it: **Private** (only you), **Restricted** (authenticated users only), or **Public** (open to everyone).

    <Frame caption="Choose your visibility: Private, Restricted, or Public">
      <img src="https://mintcdn.com/twinlabs/32bkTaA33ltG-5t7/images/interfaces-publish.png?fit=max&auto=format&n=32bkTaA33ltG-5t7&q=85&s=ee89eefb0d9098939e2ecfa28dee73eb" alt="Publishing options for interfaces" width="1024" height="685" data-path="images/interfaces-publish.png" />
    </Frame>
  </Step>
</Steps>

## Responsive by Default

Every interface is responsive out of the box. You can preview how your app looks across different devices — from iPhone SE to wide desktop — using the built-in device picker.

<Frame caption="Preview your app on any device size with the responsive picker">
  <img src="https://mintcdn.com/twinlabs/32bkTaA33ltG-5t7/images/interfaces-responsive.png?fit=max&auto=format&n=32bkTaA33ltG-5t7&q=85&s=b75d044c6120b70a1ba35f36ec4047e2" alt="Responsive device picker for interfaces" width="1024" height="712" data-path="images/interfaces-responsive.png" />
</Frame>

## Version Control

Interfaces come with built-in version control. Every change you make is tracked, so you can:

* Switch between versions
* Roll back to a previous state
* Compare what changed between iterations

No git required — it's all managed inside Twin.

## What You Can Build

<AccordionGroup>
  <Accordion title="Dashboards and internal tools" icon="chart-simple" color="#F4D03F">
    Build data dashboards that display live results from your agents — lead trackers, competitor monitors, analytics views. Complete with search, filters, and charts.
  </Accordion>

  <Accordion title="Customer-facing apps" icon="users" color="#F4D03F">
    Build apps with user sign-up, authentication, and per-user data. Let your users interact with your agents through a polished interface you control.
  </Accordion>

  <Accordion title="Landing pages and tools" icon="browser" color="#F4D03F">
    Ship a public-facing tool powered by your agents. Think: a free SEO analyzer, a price comparison tool, or a lead qualification form — all backed by Twin.
  </Accordion>

  <Accordion title="Monetizable products" icon="money-bill" color="#F4D03F">
    Because Interfaces support auth and databases, you can build products you charge for. Your Twin agents handle the backend logic, and the interface handles the user experience.
  </Accordion>
</AccordionGroup>

## Two Ways to Deploy

<CardGroup cols={2}>
  <Card title="Interfaces" icon="table-columns" color="#F4D03F">
    Build and publish a full app inside Twin. No code, no external hosting. Best for non-technical users or when you want to ship fast.
  </Card>

  <Card title="REST API" icon="code" href="/rest-api" color="#F4D03F">
    Integrate your agents into any existing app. Best for developers who want full control over the frontend.
  </Card>
</CardGroup>

<Card title="Build Your First Interface" icon="arrow-right" href="https://builder.twin.so/" color="#F4D03F">
  Open Twin and turn your agent into a live app
</Card>