Component Library

Browse and install UI components from the Aomi registry.

Component Library

UI components are distributed via our shadcn registry. Install them with a single command:

npx shadcn add https://aomi.dev/r/aomi-frame.json

AomiFrame live demo

Live

Chat surface, thread list, and composer running with wallet integration in sidebar footer.

AomiFrame

The main widget component that provides a complete chat interface with sidebar, thread management, and controls.

Simple Usage

import { AomiFrame } from "@/components/aomi-frame";

export default function MyPage() {
  return <AomiFrame height="600px" />;
}

With Custom Configuration

import { AomiFrame } from "@/components/aomi-frame";

export default function MyPage() {
  return (
    <AomiFrame
      width="800px"
      height="600px"
      backendUrl="https://api.example.com"
      walletPosition="header"
    />
  );
}

Props

Prop	Type	Default	Description
`width`	`CSSProperties["width"]`	`"100%"`	Container width
`height`	`CSSProperties["height"]`	`"80vh"`	Container height
`className`	`string`	-	Additional CSS classes
`style`	`CSSProperties`	-	Inline styles
`walletPosition`	`"header" \| "footer" \| null`	`"footer"`	Wallet button position
`backendUrl`	`string`	env or `localhost:8080`	Backend API URL

Compound Components

For advanced customization, use the compound component pattern:

import { AomiFrame } from "@/components/aomi-frame";

export default function CustomLayout() {
  return (
    <AomiFrame.Root height="600px">
      <AomiFrame.Header
        withControl={true}
        controlBarProps={{ hideWallet: true }}
      />
      <AomiFrame.Composer />
    </AomiFrame.Root>
  );
}

AomiFrame.Root

The root container providing all contexts (runtime, sidebar, themes).

<AomiFrame.Root
  width="100%"
  height="600px"
  backendUrl="https://api.example.com"
  walletPosition="footer"
>
  {/* Header and Composer */}
</AomiFrame.Root>

AomiFrame.Header

The header with sidebar trigger, control bar, and thread title.

<AomiFrame.Header
  withControl={true}
  controlBarProps={{
    hideModel: false,
    hideNamespace: false,
    hideApiKey: true,
    hideWallet: true,
  }}
>
  {/* Additional header content */}
</AomiFrame.Header>

AomiFrame.Composer

The main content area with message list and input composer.

<AomiFrame.Composer withControl={false} controlBarProps={{ hideModel: true }}>
  {/* Additional content below messages */}
</AomiFrame.Composer>

ControlBar

The control bar provides model selection, namespace/agent selection, API key input, and wallet connection.

import { ControlBar } from "@/components/control-bar";

// Full control bar
<ControlBar />

// Hide specific controls
<ControlBar hideModel hideApiKey />

// Add custom controls
<ControlBar hideWallet>
  <MyCustomButton />
</ControlBar>

Props

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`ReactNode`	-	Custom controls
`hideModel`	`boolean`	`false`	Hide model selector
`hideNamespace`	`boolean`	`false`	Hide namespace selector
`hideApiKey`	`boolean`	`false`	Hide API key input
`hideWallet`	`boolean`	`true`	Hide wallet button
`hideNetwork`	`boolean`	`false`	Hide network selector

Individual Control Components

For granular control, use individual components:

ModelSelect

Dropdown to select the AI model.

import { ModelSelect } from "@/components/control-bar";

<ModelSelect placeholder="Choose model" className="w-[200px]" />;

NamespaceSelect

Dropdown to select the namespace/agent.

import { NamespaceSelect } from "@/components/control-bar";

<NamespaceSelect placeholder="Choose agent" className="w-[200px]" />;

ApiKeyInput

Dialog to enter and manage API key. The key is persisted to localStorage.

import { ApiKeyInput } from "@/components/control-bar";

<ApiKeyInput
  title="API Key"
  description="Enter your API key to authenticate."
/>;

WalletConnect

Button to connect/disconnect wallet. Syncs state with the runtime.

import { WalletConnect } from "@/components/control-bar";

<WalletConnect
  connectLabel="Connect Wallet"
  onConnectionChange={(connected) => console.log(connected)}
/>;

Visual Layout

+------------------------------------------------------------------+
|  AomiFrame                                                        |
|  +----------------+  +----------------------------------------+   |
|  | ThreadList     |  | Header                                 |   |
|  | Sidebar        |  | [=] | Model | Agent | [Key] | [Wallet] |   |
|  |                |  +----------------------------------------+   |
|  | - Thread 1     |  |                                        |   |
|  | - Thread 2     |  |         Message List                   |   |
|  | - Thread 3     |  |                                        |   |
|  |                |  |   User: Hello                          |   |
|  |                |  |   Assistant: Hi there!                 |   |
|  |                |  |                                        |   |
|  | [Wallet]       |  +----------------------------------------+   |
|  +----------------+  | [Type a message...            ] [Send] |   |
|                      +----------------------------------------+   |
+------------------------------------------------------------------+

Customization

Since components are copied to your project, you have full control to customize them. Edit the component files directly to match your design system.

See Runtime Configuration for runtime options and Theming for styling.

Component Library

On this page