Frontend Setup

Looking for install steps? See the Quickstart for the one-command shadcn install.

This page covers what the Aomi widget gives you, how it slots into a Next.js app, and how to decide between the widget and the headless library.

Use the widget when	Use the headless library when
You want a production-ready chat UI in minutes	You need a fully custom UI
You’re already on shadcn / Tailwind	You’re not using shadcn
Standard layout (sidebar + thread + composer) works for you	You need a non-standard layout
You want to edit source files when needed	You want to compose from primitives

→ Headless Library covers the alternative path.

Full chat surface: sidebar with threads, message composer, streaming thread view.
ControlBar: model selector, app selector, API key input, wallet connect, network select.
Wallet pipeline: Para-backed connect, wagmi-compatible signing, simulation-first transaction handling.
Compound component API: drop in only the pieces you want.
Owned source: components are copied into your repo via shadcn; edit anything.

Anatomy

your-app/
├── components/
│   ├── aomi-frame.tsx          ← Main shell (Root, Header, Composer)
│   ├── control-bar/            ← Model, App, API key, Wallet, Network
│   ├── assistant-ui/           ← Thread, ThreadList, markdown, tools
│   ├── ui/                     ← shadcn primitives
│   └── runtime-tx-handler.tsx  ← Runtime transaction handler
└── lib/utils.ts

Three registries feed the install:

Source	What	Why
`aomi.dev/r`	Customized components (AomiFrame, Thread, ThreadList)	Aomi-specific features like wallet integration
`r.assistant-ui.com`	Upstream primitives (markdown, tooltips)	Receives upstream fixes
`ui.shadcn.com`	Primitives (Button, Sidebar, Dialog)	Standard UI building blocks

Where it lives in your app

A typical setup mounts AomiFrame on a dedicated route:

// app/chat/page.tsx
import { AomiFrame } from "@/components/aomi-frame";

export default function ChatPage() {
  return (
    <div style={{ height: "100vh" }}>
      <AomiFrame
        backendUrl={process.env.NEXT_PUBLIC_BACKEND_URL!}
        height="100%"
        width="100%"
      />
    </div>
  );
}

For embedded layouts (sidebars, modals, panels), use the compound API.

Next steps

Quickstart: install with one command.
Widget Installation: props, compound API, and customization.
Headless Library: build your own UI.
Apps & Auth: how API keys and apps work.

Try Aomi

Build on Aomi

Trade on Aomi

Aomi Skills

Integrations

Platform

Concepts

Examples

Reference

Resources

Frontend Setup

When to use the widget

What the widget gives you

Anatomy

Where it lives in your app

Next steps

​When to use the widget

​What the widget gives you

​Anatomy

​Where it lives in your app

​Next steps

When to use the widget

What the widget gives you

Anatomy

Where it lives in your app

Next steps