mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
f21b520d17
- Update snippet.mdx to reference correct component name (code-snippet-demo) - Create proper working demo for CodeSnippet component with TypeScript example - Fix syntax highlighting by updating to Shiki v3 API with bundledLanguages - Add language validation to prevent unsupported language errors - Improve error handling with HTML escaping fallback - Rebuild registry with updated component
13 lines
2.7 KiB
JSON
13 lines
2.7 KiB
JSON
{
|
|
"name": "ai-models-demo",
|
|
"registryDependencies": [
|
|
"ai-models"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "ai-models-demo.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { AIModels } from \"@/registry/default/ui/ai-models\"\n\nconst models = [\n // OpenAI Models\n {\n id: \"gpt-4-turbo-preview\",\n name: \"GPT-4 Turbo\",\n provider: \"OpenAI\",\n description: \"Latest GPT-4 with 128K context\",\n },\n {\n id: \"gpt-4\",\n name: \"GPT-4\",\n provider: \"OpenAI\",\n description: \"Standard GPT-4 with 8K context\",\n },\n {\n id: \"gpt-3.5-turbo\",\n name: \"GPT-3.5 Turbo\",\n provider: \"OpenAI\",\n description: \"Fast and cost-effective\",\n },\n\n // Anthropic Models\n {\n id: \"claude-3-opus-20240229\",\n name: \"Claude 3 Opus\",\n provider: \"Anthropic\",\n description: \"Most capable Claude model\",\n },\n {\n id: \"claude-3-sonnet-20240229\",\n name: \"Claude 3 Sonnet\",\n provider: \"Anthropic\",\n description: \"Balanced performance and speed\",\n },\n {\n id: \"claude-3-haiku-20240307\",\n name: \"Claude 3 Haiku\",\n provider: \"Anthropic\",\n description: \"Fastest Claude model\",\n },\n\n // Google Models\n {\n id: \"gemini-pro\",\n name: \"Gemini Pro\",\n provider: \"Google\",\n description: \"Multimodal AI model\",\n },\n {\n id: \"gemini-pro-vision\",\n name: \"Gemini Pro Vision\",\n provider: \"Google\",\n description: \"Gemini with vision capabilities\",\n },\n\n // Open Source Models\n {\n id: \"mixtral-8x7b-instruct\",\n name: \"Mixtral 8x7B\",\n provider: \"Mistral AI\",\n description: \"Open source mixture of experts\",\n },\n {\n id: \"llama-2-70b-chat\",\n name: \"LLaMA 2 70B\",\n provider: \"Meta\",\n description: \"Open source large language model\",\n },\n]\n\nexport default function AIModelsDemo() {\n const [selectedModel, setSelectedModel] = useState(\"gpt-4-turbo-preview\")\n\n const currentModel = models.find((m) => m.id === selectedModel)\n\n return (\n <div className=\"flex flex-col gap-4\">\n <AIModels\n models={models}\n selectedModel={selectedModel}\n onModelSelect={setSelectedModel}\n />\n\n {currentModel && (\n <div className=\"rounded-lg border p-4\">\n <h3 className=\"mb-2 font-semibold\">{currentModel.name}</h3>\n <p className=\"mb-2 text-sm text-muted-foreground\">\n Provider: {currentModel.provider}\n </p>\n <p className=\"text-sm text-muted-foreground\">\n {currentModel.description}\n </p>\n </div>\n )}\n </div>\n )\n}\n"
|
|
}
|
|
],
|
|
"type": "components:example"
|
|
} |