Back to Promptbook components gallery
Repository

LLM Chat

Interactive chat component that connects to LLM Execution Tools for AI-powered conversations. Internally manages messages, participants, and task progress while using the provided LLM tools to generate responses.

chatllmaiassistantconversationpromptbookexecution-tools
v0.100.1
Promptbook Team

Live Preview

Features

  • ✓Automatic LLM integration via LlmExecutionTools
  • ✓Internal state management for messages and participants
  • ✓Task progress tracking during LLM calls
  • ✓Loading states and error handling
  • ✓Participant generation from LLM tools
  • ✓All Chat component features (reset, voice, etc.)
  • ✓Support for any LLM provider (OpenAI, Azure, Anthropic, mocked, etc.)

Usage Examples

Basic LLM Chat

const llmTools = new MockedEchoLlmExecutionTools({ isVerbose: true });

<LlmChat
    llmTools={llmTools}
    placeholderMessageContent="Ask the AI anything..."
/>

LLM Chat with Change Handler

const llmTools = new OpenAiExecutionTools({ apiKey: 'your-key' });

<LlmChat
    llmTools={llmTools}
    onChange={(messages, participants) => {
        console.log('Chat updated:', messages.length, 'messages');
    }}
    placeholderMessageContent="Chat with OpenAI..."
/>

LLM Chat with Reset

const llmTools = new MockedEchoLlmExecutionTools();

<LlmChat
    llmTools={llmTools}
    onReset={async () => {
        console.log('Chat reset');
    }}
    placeholderMessageContent="Chat with reset button..."
/>

LLM Chat with Header

<LlmChat
    llmTools={llmTools}
    style={{ height: '500px' }}
>
    <div className="p-2 bg-blue-100">
        <h3>AI Assistant Chat</h3>
        <p>Powered by {llmTools.title}</p>
    </div>
</LlmChat>

Quick Actions

Download Component

Technical Details

Category

Chat

Dependencies

react: ^18.0.0 || ^19.0.0
@promptbook/components: 0.100.1

Props

llmToolsrequired
LlmExecutionTools
LLM execution tools for chatting with the model (e.g., MockedEchoLlmExecutionTools, OpenAI tools, etc.)
onChange
(messages: ReadonlyArray<ChatMessage>, participants: ReadonlyArray<ChatParticipant>) => void
Called when the chat state changes (messages, participants, etc.)
onReset
() => Promise<void>
Optional callback to reset/clear the chat - when provided, reset button will be shown
placeholderMessageContent
string
Placeholder text for the message input field
Default: "Write a message"
defaultMessage
string
Optional preset message content in the input field
children
ReactNode
Optional content to show in the chat header bar
className
string
Optional CSS class name for styling
style
CSSProperties
Optional inline CSS styles
isVoiceRecognitionButtonShown
boolean
Whether to show the voice recognition button
Default: false
voiceLanguage
string
Language code for voice recognition
Default: "en-US"
isVoiceCalling
boolean
Whether a voice call is currently active
Default: false
isExperimental
boolean
Whether experimental features are enabled (required for voice calling)
Default: false
isSaveButtonEnabled
boolean
Whether the save button is enabled and shown
Default: false
exportHeaderMarkdown
string
Optional markdown header to include at the top of exported files
onUseTemplate
() => void
Optional callback to create a new agent from the template - renders [Use this template] button when provided
voiceCallProps
object
Voice call configuration object with selectedModel, providerClients, etc.
Promptbook Components Gallery