AI Components

PreviousNext

Advanced AI-powered components for building intelligent interfaces

Build intelligent, interactive interfaces with our collection of AI-powered components. These components are designed to integrate seamlessly with popular AI providers and models.

Features

  • 🤖 Multiple AI Providers - Support for OpenAI, Anthropic, Google AI, and more
  • 🔄 Real-time Streaming - Stream responses for better user experience
  • 🎨 Fully Customizable - Style with Tailwind CSS to match your design
  • 🔌 Easy Integration - Drop-in components that work out of the box
  • 📱 Responsive Design - Works perfectly on all devices
  • ♿ Accessible - Built with accessibility in mind

Available Components

Core AI Components

  • AI Playground - Interactive AI model testing environment
  • AI Chat - Complete chat interface with streaming support
  • AI Assistant - Full-featured AI assistant component

Specialized Components

  • AI Actions - Pre-built AI action components
  • AI Models - Model selection and management
  • AI Vision - Image analysis and computer vision
  • AI Agents - Multi-agent system components
  • AI Tools - Tool use and function calling interfaces

Getting Started

Install the AI components package:

npm install @hanzo/ui

Import and use components:

import { AIChat } from "@hanzo/ui"

export function MyApp() {
  return (
    <AIChat
      provider="openai"
      model="gpt-4"
      apiKey={process.env.OPENAI_API_KEY}
    />
  )
}

Configuration

All AI components support configuration through props or a central config:

import { configureAI } from "@hanzo/ui"

configureAI({
  defaultProvider: "openai",
  defaultModel: "gpt-4",
  streaming: true,
  temperature: 0.7
})

Examples

Check out our examples to see the AI components in action.