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 theming

Use this guide for visual customization and optional chat UI features. Start from the working Chat example in Chat UI. Apply one option at a time, run veryfront dev, and verify the chat still sends messages through /api/ag-ui.

​
Prerequisites

  • A working preset Chat UI (see Chat UI).
  • For attachments: an upload endpoint you can call from onAttach.
  • For model switching: more than one provider configured (see Providers).

​
Theme overrides

<Chat
  {...chat}
  theme={{
    colors: {
      primary: "#2563eb",
      background: "#ffffff",
    },
  }}
/>;

​
Attachments

<Chat
  {...chat}
  onAttach={(files) => uploadFiles(files)}
  attachAccept=".pdf,.docx,.txt"
  attachments={uploadedFiles}
  onRemoveAttachment={(id) => removeFile(id)}
/>;

​
Models

<Chat
  {...chat}
  models={[
    { value: "anthropic/claude-sonnet-4-6", label: "Claude Sonnet" },
    { value: "openai/gpt-4o", label: "GPT-4o" },
  ]}
  model={chat.model}
  onModelChange={chat.setModel}
/>;

​
Sources and actions

<Chat
  {...chat}
  showSources
  showMessageActions
  onFeedback={(messageId, feedback) => saveFeedback(messageId, feedback)}
/>;

​
Context providers

Use chat context providers when shared state needs to cross component boundaries in a custom UI. Prefer the preset props or composition components unless a nested component needs direct context access.

​
Verify it worked

After applying each option:
  • Theme: open the page and confirm primary and background colors match what you set.
  • Attachments: drop a file matching attachAccept and confirm onAttach fires with the file list.
  • Models: switch the model selector and confirm a request body sent on the next message includes the new model field.
  • Sources and actions: confirm action buttons render under each message and onFeedback fires when you click them.

​
Next

  • Workflows: orchestrate multi-step AI execution
  • Multi-agent: compose agents and delegation patterns