Skip to main content

Documentation Index

Fetch the complete documentation index at: https://veryfront.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

​
Chat composition

Use composition when the preset Chat component is too constrained but you still want Veryfront to own the chat wiring. The examples use the same useChat({ api: "/api/ag-ui" }) setup as the Chat UI guide. Create the AG-UI route first, then render these components in a client page and verify them with veryfront dev.

​
Prerequisites

  • A working preset Chat UI (see Chat UI).
  • The /api/ag-ui route mounted with createAgUiHandler.

​
Layout components

"use client";
import { Chat, useChat } from "veryfront/chat";

export default function CustomLayout() {
  const chat = useChat({ api: "/api/ag-ui" });

  return (
    <Chat.Root {...chat}>
      <header className="border-b p-4">
        <h1>Assistant</h1>
      </header>
      <Chat.MessageList messages={chat.messages} />
      <Chat.Composer
        input={chat.input}
        onChange={chat.handleInputChange}
        onSubmit={chat.handleSubmit}
      />
    </Chat.Root>
  );
}

​
Empty state

<Chat.Empty
  title="What can I help with?"
  suggestions={["Explain React hooks", "Write a regex"]}
  onSuggestionClick={(value) => chat.setInput(value)}
/>;

​
Message compound components

Use Message when individual message rendering needs custom structure: 
import { Message } from "veryfront/chat";

<Message.Root message={message}>
  <Message.Avatar />
  <Message.Content />
  <Message.Actions />
</Message.Root>;

import { ChatWithSidebar, useChat } from "veryfront/chat";

function App() {
  const chat = useChat({ api: "/api/ag-ui" });
  return (
    <ChatWithSidebar
      chat={chat}
      sidebar={{ storageKey: "my-app" }}
    />
  );
}

​
Verify it worked

Render your composed layout in a client page, run veryfront dev, and:
  • Confirm the header, message list, and composer all render where you placed them.
  • Submit a message and confirm tokens stream into the message list (the same AG-UI flow as the preset Chat component).
  • For Message compound components, confirm avatar, content, and actions render in the order you arranged them.

​
Next