Skip to main content

Import

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

Examples

Basic chat

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

export default function Page() {
  const chat = useChat({ api: "/api/chat" });
  return <Chat {...chat} />;
}

Custom layout

import { ChatMessages, ChatInput, useChat } from "veryfront/chat";

export default function Page() {
  const chat = useChat({ api: "/api/chat" });
  return (
    <div>
      <ChatMessages messages={chat.messages} />
      <ChatInput value={chat.input} onChange={chat.setInput} onSubmit={chat.submit} />
    </div>
  );
}

Agent card with tool calls

import { AgentCard, useAgent } from "veryfront/chat";

function AgentUI() {
  const agent = useAgent({ agent: "assistant" });
  return (
    <AgentCard
      status={agent.status}
      messages={agent.messages}
      toolCalls={agent.toolCalls}
    />
  );
}

Type Reference

UseChatOptions

useChat options
PropertyTypeDescription
apistringChat 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?RequestCredentialsFetch credentials mode
onResponse?(response: Response) => voidRaw response callback
onFinish?(message: UIMessage) => voidCompletion callback
onError?(error: Error) => voidError callback
onToolCall?(arg: OnToolCallArg) => void | Promise<void>Tool call handler for client-side execution

UseChatResult

useChat result
PropertyTypeDescription
messagesUIMessage[]All messages in the conversation
inputstringCurrent input value
isLoadingbooleanWhether a request is in flight
error`Error \null`Last error (if any)
setInput(input: string) => voidSet input value
sendMessage(message: { text: string }) => Promise<void>Send a message programmatically
reload() => Promise<void>Re-send last user message
stop() => voidAbort current request
setMessages(messages: UIMessage[]) => voidReplace message history
addToolOutput(output: ToolOutput) => voidSubmit client-side tool result
data?unknownExtra data from server response
handleInputChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => voidBind to input onChange
handleSubmit(e: React.FormEvent) => Promise<void>Submit current input

UseAgentOptions

useAgent options
PropertyTypeDescription
agentstringAgent ID or endpoint
onToolCall?(toolCall: ToolCall) => voidCallback when tool is called
onToolResult?(toolCall: ToolCall, result: unknown) => voidCallback when tool result received
onError?(error: Error) => voidCallback when error occurs

UseAgentResult

useAgent result
PropertyTypeDescription
messagesMessage[]Message history
toolCallsToolCall[]Active tool calls
statusAgentStatusAgent status
thinking?stringThinking/reasoning text
invoke(input: string) => Promise<void>Invoke the agent
stop() => voidStop agent execution
isLoadingbooleanLoading state
error`Error \null`Error state

Exports

Components

NameDescription
AgentCardAgent status, tool calls, and messages
ChatFull chat UI (messages + input)
ChatComponentsCompound components for custom layouts
ChatFooterChat footer section
ChatHeaderChat header section
ChatInputText input with send button
ChatMessagesScrollable message list
MessageChat message bubble
StreamingMessageIncrementally rendered message

Functions

NameDescription
useAgentAgent interactions with tool call tracking
useAIErrorHandlerProgrammatic AI error handler
useChatuseChat hook for managing chat state - AI SDK v5 compatible
useCompletionuseCompletion hook for single text generation
useStreamingLow-level streaming hook
useVoiceInputVoice input (Web Speech API)

Classes

NameDescription
AIErrorBoundaryError boundary with retry

Types

NameDescription
AgentCardProps<AgentCard> props
AgentThemeAgent card theme config
AIErrorBoundaryProps<AIErrorBoundary> props
ChatProps<Chat> props
ChatThemeTheme System for Styled Components
DynamicToolUIPartDynamic tool call UI part
MessageProps<Message> props
OnToolCallArgonToolCall callback argument
ReasoningUIPartChain-of-thought segment
StreamingMessageProps<StreamingMessage> props
TextUIPartText segment of a message
ToolOutputTool execution output
ToolResultUIPartTool result UI part
ToolStateTool state (pending, running, complete)
ToolUIPartTool invocation UI part
UIMessageNormalized UI message
UIMessagePartUI message segment (text, tool, reasoning)
UseAgentOptionsuseAgent options
UseAgentResultuseAgent result
UseChatOptionsuseChat options
UseChatResultuseChat result
UseCompletionOptionsuseCompletion options
UseCompletionResultuseCompletion result
UseStreamingOptionsuseStreaming options
UseStreamingResultuseStreaming result
UseVoiceInputOptionsuseVoiceInput options
UseVoiceInputResultuseVoiceInput result