AI Playground

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)}
    />
  )
}

import { AIPlayground } from "@hanzo/ui"

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

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)
      }}
    />
  )
}

import { AIPlayground, AnthropicProvider, OpenAIProvider } 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" />
}

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

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

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

<AIPlayground variant="compact" />

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