Skip to main content
The chat components provide a complete conversational AI interface with message rendering, input handling, history management, and tool execution capabilities.

​
Core components

​
ChatList

Displays a scrollable list of chat messages with loading states and tool results.
​
messages
Message[]
required
Array of messages from the AI SDK. Each message contains id, role, content, and optional parts for tool invocations.
​
isLoading
boolean
required
Indicates if the AI is currently generating a response.
​
loadingSubmit
boolean
Shows a “Thinking…” indicator when a new message is being submitted.
​
reload
function
required
Function to regenerate the last AI response. Signature: (chatRequestOptions?: any) => Promise<string | null | undefined>
​
addToolResult
function
Callback to add tool execution results back to the conversation. Signature: (args: { toolCallId: string; result: string }) => void
import ChatList from "@/components/chat/chat-list";
import { useChat } from "@ai-sdk/react";

export function ChatScreen() {
  const { messages, isLoading, reload, addToolResult } = useChat();

  return (
    <ChatList
      messages={messages}
      isLoading={isLoading}
      reload={reload}
      addToolResult={addToolResult}
    />
  );
}

​
ChatMessage

Renders individual chat messages with support for text content, tool invocations, and action buttons.
​
message
Message
required
Message object containing id, role (“user” | “assistant”), content, and optional parts array for structured content.
​
isLast
boolean
required
Whether this is the last message in the conversation. Controls visibility of regenerate button.
​
isLoading
boolean
required
Indicates if the AI is currently generating content.
​
reload
function
required
Function to regenerate this message.
​
addToolResult
function
Callback for tool execution results.
Messages with role: "user" are styled differently and aligned to the right. Assistant messages include copy and regenerate buttons.
import ChatMessage from "@/components/chat/chat-message";

<ChatMessage
  message={{
    id: "msg-1",
    role: "assistant",
    content: "Hello! How can I help you today?"
  }}
  isLast={true}
  isLoading={false}
  reload={reload}
/>

​
ChatInput

Multi-line text input with submit button and microphone icon.
​
value
string
required
Current input text value.
​
onChangeText
function
required
Callback when input text changes. Signature: (text: string) => void
​
onSubmit
function
required
Callback when user submits the message.
​
isLoading
boolean
required
Disables submit button when true.
import { ChatInput } from "@/components/chat/chat-input";
import { useState } from "react";

export function ChatScreen() {
  const [input, setInput] = useState("");
  const { isLoading, append } = useChat();

  const handleSubmit = () => {
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <ChatInput
      value={input}
      onChangeText={setInput}
      onSubmit={handleSubmit}
      isLoading={isLoading}
    />
  );
}

​
ChatHeader

Top navigation bar with history, title, and new chat buttons.
​
onHistoryPress
function
required
Callback when history button is pressed.
​
onNewChatPress
function
required
Callback when new chat button is pressed.
​
chatTitle
string
Title displayed in the center. Defaults to “New Chat” if not provided.
import { ChatHeader } from "@/components/chat/chat-header";
import { useState } from "react";

export function ChatScreen() {
  const [showHistory, setShowHistory] = useState(false);

  return (
    <ChatHeader
      onHistoryPress={() => setShowHistory(true)}
      onNewChatPress={handleNewChat}
      chatTitle="Solana Trading"
    />
  );
}

​
Feature components

​
SuggestionCards

Horizontal scrollable list of suggested prompts with tool logos.
​
onSuggestionPress
function
required
Callback when a suggestion is tapped. Receives the suggestion text as parameter. Signature: (suggestion: string) => void
import { SuggestionCards } from "@/components/chat/suggestion-cards";

export function WelcomeScreen() {
  const { append } = useChat();

  return (
    <SuggestionCards
      onSuggestionPress={(text) => {
        append({ role: "user", content: text });
      }}
    />
  );
}
Built-in suggestions include Jupiter swap, Rainfi lending, Lulo deposits, and Jupiter staking prompts.

​
HistoryOverlay

Slide-in panel for browsing conversation history with search and delete functionality.
​
visible
boolean
required
Controls overlay visibility.
​
onClose
function
required
Callback when overlay is closed.
​
onSelectConversation
function
required
Callback when a conversation is selected. Signature: (conversationId: string) => void
​
onNewChat
function
required
Callback when new chat button is pressed.
​
onDeleteChat
function
required
Callback when a chat is deleted. Signature: (chatId: string) => void
​
conversations
ChatMetadata[]
required
Array of conversation metadata objects with id, title, lastMessage, messageCount, and updatedAt timestamp.
​
currentChatId
string | null
required
ID of the currently active chat for highlighting.
import { HistoryOverlay } from "@/components/chat/history-overlay";
import { useState } from "react";

export function ChatScreen() {
  const [historyVisible, setHistoryVisible] = useState(false);
  const [conversations, setConversations] = useState([]);
  const [currentChatId, setCurrentChatId] = useState(null);

  return (
    <HistoryOverlay
      visible={historyVisible}
      onClose={() => setHistoryVisible(false)}
      onSelectConversation={(id) => {
        loadConversation(id);
        setHistoryVisible(false);
      }}
      onNewChat={createNewChat}
      onDeleteChat={deleteConversation}
      conversations={conversations}
      currentChatId={currentChatId}
    />
  );
}

​
ToolManager

Displays tool invocation cards with execution buttons and results.
​
toolInvocation
ToolInvocation
required
Object containing toolCallId, toolName, args, and optional result.
​
addToolResult
function
Callback to add execution results. Signature: (args: { toolCallId: string; result: string }) => void
import ToolManager from "@/components/chat/tool-manager";

<ToolManager
  toolInvocation={{
    toolCallId: "call-123",
    toolName: "TRADE",
    args: {
      inputToken: "SOL",
      outputToken: "USDC",
      amount: 0.001
    }
  }}
  addToolResult={addToolResult}
/>
ToolManager automatically displays appropriate logos for DeFi protocols like Jupiter, Lulo, Rainfi, and DexScreener.

​
Type definitions

interface Message {
  id: string;
  role: "user" | "assistant" | "system";
  content: string;
  parts?: MessagePart[];
}

interface MessagePart {
  type: "text" | "tool-invocation";
  text?: string;
  toolInvocation?: ToolInvocation;
}

useChat

AI SDK React hook for chat functionality

useSolanaAgent

Hook for Solana agent and tool execution

Build docs developers (and LLMs) love

Get started for freeTalk to us