Skip to main content

​
Overview

AI chat blocks provide ready-to-use conversational interfaces for integrating AI capabilities into your application. These components support various features like voice input, model selection, file attachments, and compact interfaces suitable for different use cases.

​
Available Blocks

AI Chat with Voice Input

Chat interface with integrated voice input capability for hands-free interaction

AI Chat with Model Selection

Chat interface allowing users to choose between different AI models

AI Chat Compact Interface

Minimalist chat interface optimized for space-constrained layouts

AI Chat with File Attachments

Full-featured chat with support for attaching and sharing files

AI Elements Chat

Advanced chat interface with rich UI elements and interactions

​
Common Features

All AI chat blocks include:
  • Message History: Display conversation threads with proper formatting
  • Input Controls: Text input with send functionality
  • Responsive Design: Adapts to different screen sizes
  • Loading States: Visual feedback during AI processing

​
Use Cases

Implement AI-powered customer service chatbots that can handle common queries, provide instant responses, and escalate to human agents when needed.
Build interfaces for AI writing assistants, code generation tools, or creative content creation platforms.
Create chat interfaces that allow users to upload documents and ask questions about their content using file attachment capabilities.
Develop voice-enabled applications using the voice input variant for hands-free interaction.

​
Implementation Example

Here’s a basic example of integrating an AI chat block: 
import { AIChatWithVoiceInput } from '@/components/blocks/ai-01'

export default function ChatPage() {
  return (
    <div className="container mx-auto p-4">
      <AIChatWithVoiceInput 
        onSendMessage={(message) => {
          // Handle message sending
          console.log('Sending:', message)
        }}
        onVoiceInput={(audio) => {
          // Handle voice input
          console.log('Voice input:', audio)
        }}
      />
    </div>
  )
}
Most AI chat blocks require integration with an AI service API (OpenAI, Anthropic, etc.). Make sure to configure your API keys and endpoints before deployment.

​
Customization

Each AI chat block can be customized with:
  • Themes: Light/dark mode support
  • Styling: Tailwind CSS classes for consistent branding
  • Behavior: Custom message handlers and processing logic
  • Features: Enable/disable specific capabilities like voice or file uploads

Build docs developers (and LLMs) love

Get started for freeTalk to us