veryfront/chat

Chat UI components and streaming hooks.

Import

import {
  Chat,
  useChat,
  useAgent,
  AgentCard,
  Message,
  AIErrorBoundary,
} from "veryfront/chat";

Examples

Basic chat (preset)

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

export default function Page() {
  const chat = useChat({ api: "/api/chat" });
  return (
    <Chat
      messages={chat.messages}
      input={chat.input}
      onChange={chat.handleInputChange}
      onSubmit={chat.handleSubmit}
    />
  );
}

Custom layout (composition)

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

export default function Page() {
  const chat = useChat({ api: "/api/chat" });
  return (
    <Chat.Root messages={chat.messages} input={chat.input}>
      <Chat.Empty title="Ask me anything" />
      <Chat.MessageList messages={chat.messages} />
      <Chat.Composer input={chat.input} onChange={chat.handleInputChange} onSubmit={chat.handleSubmit} />
    </Chat.Root>
  );
}

Per-message control (compound)

import { Message } from "veryfront/chat";

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

Type Reference

`UseChatOptions`

useChat options

Property	Type	Description
`api`	`string`	Chat API endpoint URL
`initialMessages?`	`UIMessage[]`	Pre-populated messages
`body?`	`Record<string, unknown>`	Extra body fields sent with each request
`headers?`	`Record<string, string>`	Custom request headers
`credentials?`	`RequestCredentials`	Fetch credentials mode
`model?`	`string`	Override model at runtime (e.g. “openai/gpt-4o”, “anthropic/claude-sonnet-4-5-20250929”)
`systemPrompt?`	`string`	System prompt for browser-side inference (server uses agent config)
`browserFallback?`	`boolean`	Enable/disable browser fallback when server can’t provide AI. Default: true
`onResponse?`	`(response: Response) => void`	Raw response callback
`onFinish?`	`(message: UIMessage) => void`	Completion callback
`onError?`	`(error: Error) => void`	Error callback
`onToolCall?`	`(arg: OnToolCallArg) => void \| Promise<void>`	Tool call handler for client-side execution

`UseChatResult`

useChat result

Property	Type	Description
`messages`	`UIMessage[]`	All messages in the conversation
`input`	`string`	Current input value
`isLoading`	`boolean`	Whether a request is in flight
`error`	`Error \| null`	Last error (if any)
`model`	`string \| undefined`	Current model override (undefined = use agent default)
`activeModel`	`string \| undefined`	The actual model being used after auto-upgrade (e.g. “anthropic/claude-sonnet-4-20250514”)
`inferenceMode`	`InferenceMode`	Where inference is currently happening
`browserStatus`	`BrowserInferenceStatus \| null`	Browser-side model loading/inference status (null when not using browser fallback)
`setInput`	`(input: string) => void`	Set input value
`setModel`	`(model: string \| undefined) => void`	Change the model for subsequent requests
`sendMessage`	`(message: { text: string }) => Promise<void>`	Send a message programmatically
`editMessage`	`(messageId: string, newText: string) => Promise<void>`	Edit a user message and resubmit — truncates history to that point
`getBranches`	`(messageId: string) => BranchInfo`	Get branch info for a message (returns ; total=1 if no branches)
`switchBranch`	`(messageId: string, branchIndex: number) => void`	Switch to a different branch at a given message
`reload`	`() => Promise<void>`	Re-send last user message
`stop`	`() => void`	Abort current request
`setMessages`	`(messages: UIMessage[]) => void`	Replace message history
`addToolOutput`	`(output: ToolOutput) => void`	Submit client-side tool result
`data?`	`unknown`	Extra data from server response
`handleInputChange`	`(e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => void`	Bind to input onChange
`handleSubmit`	`(e: React.FormEvent) => Promise<void>`	Submit current input
`onChange`	`(e: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement>) => void`	Alias for `handleInputChange` — matches `ChatProps.onChange` for easy spreading
`onSubmit`	`(e: React.FormEvent) => Promise<void>`	Alias for `handleSubmit` — matches `ChatProps.onSubmit` for easy spreading
`onModelChange`	`(model: string \| undefined) => void`	Alias for `setModel` — matches `ChatProps.onModelChange` for easy spreading

`UseAgentOptions`

useAgent options

Property	Type	Description
`agent`	`string`	Agent ID or endpoint
`onToolCall?`	`(toolCall: ToolCall) => void`	Callback when tool is called
`onToolResult?`	`(toolCall: ToolCall, result: unknown) => void`	Callback when tool result received
`onError?`	`(error: Error) => void`	Callback when error occurs

`UseAgentResult`

useAgent result

Property	Type	Description
`messages`	`AgentMessage[]`	Message history
`toolCalls`	`ToolCall[]`	Active tool calls
`status`	`AgentStatus`	Agent status
`thinking?`	`string`	Thinking/reasoning text
`invoke`	`(input: string) => Promise<void>`	Invoke the agent
`stop`	`() => void`	Stop agent execution
`isLoading`	`boolean`	Loading state
`error`	`Error \| null`	Error state

Exports

Components

Name	Description
`AgentCard`	Agent status, tool calls, and messages
`AttachmentPill`
`BranchPicker`
`Chat`	Full chat UI (messages + input)
`ChatComponents`	Compound components for custom layouts
`ChatComposer`
`ChatContextProvider`
`ChatEmpty`
`ChatIf`
`ChatMessageList`
`ChatRoot`
`ChatSidebar`
`ChatWithSidebar`
`ComposerContextProvider`
`ConversationEmptyState`
`ConversationScrollButton`
`DropZoneOverlay`
`ErrorBanner`
`FadeIn`
`InferenceBadge`
`InlineCitation`
`Loader`
`Message`	Chat message bubble
`MessageActions`
`MessageContextProvider`
`MessageEditForm`
`MessageFeedback`
`ModelAvatar`
`ModelSelector`	Dropdown for switching models at runtime
`QuickActions`
`ReasoningCard`
`RichCodeBlock`
`Shimmer`
`SkillBadge`
`Sources`
`StandaloneMessage`
`StepIndicator`
`StreamingMessage`	Incrementally rendered message
`Suggestion`
`Suggestions`
`TabSwitcher`
`ThreadListContextProvider`
`ToolCallCard`	Tool call card component - renders tool invocations with parameters and results
`ToolStatusBadge`
`UpgradeCTA`
`UploadsPanel`

Functions

Name	Description
`downloadMarkdown`	Download messages as a .md file.
`exportAsMarkdown`	Convert chat messages to a markdown string.
`extractSourcesFromParts`	Extract sources from tool result parts.
`getTextContent`	Get text content from UIMessage parts
`groupPartsInOrder`	Group consecutive parts for ordered rendering
`isReasoningPart`	Check if a part is a reasoning part
`isSkillToolPart`	Check if a tool part is a skill-related tool (load-skill, load-skill-reference, execute-skill-script)
`isToolPart`	Check if a part is a tool part
`useAgent`	Agent interactions with tool call tracking
`useAIErrorHandler`	Programmatic AI error handler
`useChat`	useChat hook for managing chat state with veryfront stream events.
`useChatContext`
`useChatContextOptional`
`useCompletion`	useCompletion hook for single text generation
`useComposerContext`
`useComposerContextOptional`
`useMessageContext`
`useMessageContextOptional`
`useStreaming`	Low-level streaming hook
`useThreadListContext`
`useThreadListContextOptional`
`useThreads`
`useVoiceInput`	Voice input (Web Speech API)

Classes

Name	Description
`AIErrorBoundary`	Error boundary with retry

Types

Name	Description
`AgentCardProps`	`<AgentCard>` props
`AgentTheme`	Agent card theme config
`AIErrorBoundaryProps`	`<AIErrorBoundary>` props
`AttachmentInfo`
`AttachmentPillProps`
`BranchInfo`
`BranchPickerProps`
`BrowserInferenceStatus`	Browser-side model loading and inference status
`ChatComposerProps`
`ChatContextValue`
`ChatEmptyProps`
`ChatIfProps`
`ChatMessageListProps`
`ChatProps`	`<Chat>` props
`ChatRootProps`
`ChatSidebarProps`
`ChatTab`
`ChatTheme`	Theme System for Styled Components
`ChatWithSidebarAttachmentConfig`
`ChatWithSidebarChatController`
`ChatWithSidebarFeatureConfig`
`ChatWithSidebarGroupedProps`
`ChatWithSidebarMessageConfig`
`ChatWithSidebarModelConfig`
`ChatWithSidebarProps`
`ChatWithSidebarQuickActionsConfig`
`ChatWithSidebarSidebarConfig`
`ChatWithSidebarTabsConfig`
`ChatWithSidebarVoiceConfig`
`CodeBlockProps`
`ComposerContextValue`
`ConversationEmptyStateProps`
`ConversationScrollButtonProps`
`DropZoneOverlayProps`
`DynamicToolUIPart`	Dynamic tool call UI part
`ErrorBannerProps`
`FeedbackValue`
`InferenceBadgeProps`
`InferenceMode`	Where inference is happening
`InlineCitationProps`
`MessageActionsProps`
`MessageContextValue`
`MessageEditFormProps`
`MessageFeedbackProps`
`MessageProps`	`<Message>` props
`MessageRootProps`
`ModelAvatarProps`
`ModelOption`	A “provider/model” value and its display label.
`ModelSelectorProps`	Props for `<ModelSelector>`.
`OnToolCallArg`	`onToolCall` callback argument
`PartGroup`	Part group types for ordered rendering
`QuickAction`
`QuickActionsProps`
`ReasoningUIPart`	Chain-of-thought segment
`SkillBadgeProps`
`Source`
`SourcesProps`
`StepIndicatorProps`
`StepUIPart`
`StreamingMessageProps`	`<StreamingMessage>` props
`SuggestionProps`
`SuggestionsProps`
`TabSwitcherProps`
`TextUIPart`	Text segment of a message
`Thread`
`ThreadListContextValue`
`ToolOutput`	Tool execution output
`ToolResultUIPart`	Tool result UI part
`ToolState`	Tool state (pending, running, complete)
`ToolUIPart`	Tool invocation UI part
`UIMessage`	Normalized UI message
`UIMessagePart`	UI message segment (text, tool, reasoning)
`UpgradeCTAProps`
`UploadedFile`
`UploadsPanelProps`
`UseAgentOptions`	`useAgent` options
`UseAgentResult`	`useAgent` result
`UseChatOptions`	`useChat` options
`UseChatResult`	`useChat` result
`UseCompletionOptions`	`useCompletion` options
`UseCompletionResult`	`useCompletion` result
`UseStreamingOptions`	`useStreaming` options
`UseStreamingResult`	`useStreaming` result
`UseThreadsOptions`
`UseThreadsResult`
`UseVoiceInputOptions`	`useVoiceInput` options
`UseVoiceInputResult`	`useVoiceInput` result

veryfront/agent — Server-side agent runtime that powers chat
veryfront/tool — Define tools that agents can call

Getting Started

Basics

AI

Infrastructure

Production

Reference

veryfront/chat

veryfront/chat

Import

Examples

Basic chat (preset)

Custom layout (composition)

Per-message control (compound)

Type Reference

`UseChatOptions`

`UseChatResult`

`UseAgentOptions`

`UseAgentResult`

Exports

Components

Functions

Classes

Types

Getting Started

Basics

AI

Infrastructure

Production

Reference

​veryfront/chat

​Import

​Examples

​Basic chat (preset)

​Custom layout (composition)

​Per-message control (compound)

​Type Reference

​UseChatOptions

​UseChatResult

​UseAgentOptions

​UseAgentResult

​Exports

​Components

​Functions

​Classes

​Types

​Related

veryfront/chat

Import

Examples

Basic chat (preset)

Custom layout (composition)

Per-message control (compound)

Type Reference

`UseChatOptions`

`UseChatResult`

`UseAgentOptions`

`UseAgentResult`

Exports

Components

Functions

Classes

Types

Related