AI Playground

An interactive environment for testing AI models with real-time parameter adjustments.

Preview

The AI Playground provides a comprehensive interface for interacting with various AI models, with real-time parameter adjustments and response streaming.

Example Usage

import { AIPlayground } from "@hanzo/ui"

export function PlaygroundExample() {
  return (
    <AIPlayground
      models={["gpt-4", "claude-3", "gemini-pro"]}
      defaultModel="gpt-4"
      onResponse={(response) => console.log(response)}
    />
  )
}

Features

• Model Selection - Switch between different AI models
• Parameter Tuning - Adjust temperature, max tokens, top-p, and more
• System Prompts - Configure system messages
• Response Streaming - Real-time response streaming
• History - Keep track of conversations
• Export/Import - Save and load sessions

Installation

CLI

npx hanzo-ui@latest add ai-playground

Manual

npm install @hanzo/ui

Then import the component:

import { AIPlayground } from "@hanzo/ui"

Usage

Basic Usage

import { AIPlayground } from "@hanzo/ui"

export default function Page() {
  return <AIPlayground />
}

With Configuration

import { AIPlayground } from "@hanzo/ui"

export default function Page() {
  return (
    <AIPlayground
      models={[
        { id: "gpt-4", name: "GPT-4" },
        { id: "claude-3", name: "Claude 3" },
        { id: "gemini-pro", name: "Gemini Pro" }
      ]}
      defaultModel="gpt-4"
      defaultParameters={{
        temperature: 0.7,
        maxTokens: 2048,
        topP: 1,
        frequencyPenalty: 0,
        presencePenalty: 0
      }}
      systemPrompt="You are a helpful assistant."
      onResponse={(response) => {
        console.log("AI Response:", response)
      }}
      onError={(error) => {
        console.error("AI Error:", error)
      }}
    />
  )
}

With Custom Providers

import { AIPlayground, OpenAIProvider, AnthropicProvider } from "@hanzo/ui"

const providers = [
  new OpenAIProvider({ apiKey: process.env.OPENAI_API_KEY }),
  new AnthropicProvider({ apiKey: process.env.ANTHROPIC_API_KEY })
]

export default function Page() {
  return (
    <AIPlayground
      providers={providers}
      defaultProvider="openai"
    />
  )
}

API Reference

Props

Model Interface

interface Model {
  id: string
  name: string
  provider: string
  description?: string
  maxTokens?: number
  capabilities?: string[]
}

Parameters Interface

interface Parameters {
  temperature?: number
  maxTokens?: number
  topP?: number
  topK?: number
  frequencyPenalty?: number
  presencePenalty?: number
  stopSequences?: string[]
}

Examples

With Dark Mode

<div className="dark">
  <AIPlayground theme="dark" />
</div>

Compact Mode

<AIPlayground variant="compact" />

Custom Styling

<AIPlayground
  className="custom-playground"
  inputClassName="custom-input"
  responseClassName="custom-response"
/>

Keyboard Shortcuts

Accessibility

The AI Playground is fully accessible with:

• Keyboard navigation
• Screen reader support
• ARIA labels
• Focus management
• High contrast mode support