shadcn/app/public/registry/styles/default/ai-playground-custom.json

{
  "name": "ai-playground-custom",
  "registryDependencies": [
    "ai-playground"
  ],
  "files": [
    {
      "name": "ai-playground-custom.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  AIPlayground,\n  type PlaygroundConfig,\n} from \"@/registry/default/ui/ai-playground\"\nimport { Alert, AlertDescription } from \"@/registry/default/ui/alert\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function AIPlaygroundCustomExample() {\n  const [apiKey, setApiKey] = React.useState(\"\")\n  const [showApiKeyInput, setShowApiKeyInput] = React.useState(false)\n\n  // Custom message handler that integrates with OpenAI API\n  const handleSendMessage = async (\n    message: string,\n    config: PlaygroundConfig\n  ) => {\n    // This is a mock implementation - in production, you would:\n    // 1. Send the request to your backend API\n    // 2. Your backend would handle the OpenAI API call securely\n    // 3. Return the response to the frontend\n\n    if (!apiKey && config.model.startsWith(\"gpt\")) {\n      throw new Error(\"Please provide an OpenAI API key to use GPT models\")\n    }\n\n    // Simulate API call\n    await new Promise((resolve) => setTimeout(resolve, 1500))\n\n    // Mock response based on the model\n    const responses: Record<string, string> = {\n      \"gpt-4\": `[GPT-4 Response] I understand you said: \"${message}\". This is a sophisticated response demonstrating advanced reasoning capabilities.`,\n      \"gpt-4-turbo\": `[GPT-4 Turbo] Processing your request: \"${message}\". This model offers faster response times with similar quality.`,\n      \"gpt-3.5-turbo\": `[GPT-3.5 Turbo] Got it! You mentioned: \"${message}\". This is a cost-effective solution for most use cases.`,\n      \"claude-3-opus\": `[Claude 3 Opus] I see you're asking about: \"${message}\". Let me provide a thoughtful and nuanced response.`,\n      \"claude-3-sonnet\": `[Claude 3 Sonnet] Understanding your query: \"${message}\". Here's a balanced and practical answer.`,\n      \"claude-3-haiku\": `[Claude 3 Haiku] Quick response to: \"${message}\". Efficient and concise output.`,\n      \"llama-3-70b\": `[Llama 3 70B] Open-source response to: \"${message}\". Powerful capabilities without API restrictions.`,\n      \"llama-3-8b\": `[Llama 3 8B] Compact model processing: \"${message}\". Suitable for edge deployment.`,\n      \"mixtral-8x7b\": `[Mixtral 8x7B] Mixture of experts analyzing: \"${message}\". Combining specialized knowledge domains.`,\n      \"gemini-pro\": `[Gemini Pro] Multi-modal understanding of: \"${message}\". Integrated reasoning across modalities.`,\n    }\n\n    const response =\n      responses[config.model] || `Processed: \"${message}\" with ${config.model}`\n\n    // Add configuration details to response\n    const configDetails = `\n\nConfiguration applied:\n- Temperature: ${config.temperature} (${config.temperature < 0.5 ? \"More focused\" : config.temperature > 1.0 ? \"More creative\" : \"Balanced\"})\n- Max Tokens: ${config.maxTokens}\n- System Prompt: \"${config.systemPrompt.slice(0, 50)}${config.systemPrompt.length > 50 ? \"...\" : \"\"}\"`\n\n    return response + configDetails\n  }\n\n  return (\n    <div className=\"w-full space-y-4\">\n      {/* API Key Section (for demo purposes) */}\n      <Alert>\n        <AlertDescription>\n          This is a demo implementation. In production, API keys should be\n          handled securely on the backend.\n        </AlertDescription>\n      </Alert>\n\n      {showApiKeyInput && (\n        <div className=\"flex gap-2\">\n          <input\n            type=\"password\"\n            placeholder=\"Enter API Key (optional for demo)\"\n            value={apiKey}\n            onChange={(e) => setApiKey(e.target.value)}\n            className=\"flex-1 px-3 py-2 border rounded-md\"\n          />\n          <Button onClick={() => setShowApiKeyInput(false)}>Save</Button>\n        </div>\n      )}\n\n      {/* AI Playground with Custom Handler */}\n      <AIPlayground\n        onSendMessage={handleSendMessage}\n        defaultSystemPrompt=\"You are a helpful AI assistant with expertise in software development, creative writing, and problem-solving.\"\n        defaultModel=\"claude-3-opus\"\n      />\n\n      {/* Additional Controls */}\n      <div className=\"flex justify-center gap-2 text-sm text-muted-foreground\">\n        <button\n          onClick={() => setShowApiKeyInput(!showApiKeyInput)}\n          className=\"hover:underline\"\n        >\n          {showApiKeyInput ? \"Hide\" : \"Configure\"} API Key\n        </button>\n        <span>•</span>\n        <a href=\"#\" className=\"hover:underline\">\n          View Documentation\n        </a>\n        <span>•</span>\n        <a href=\"#\" className=\"hover:underline\">\n          Report Issue\n        </a>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "type": "components:example"
}