{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "playground",
  "type": "registry:block",
  "title": "Playground",
  "description": "Interactive playground template for building AI tools, code editors, or configuration interfaces. Features a split-panel layout with input controls and live output preview.",
  "dependencies": [
    "lucide-react",
    "radix-ui",
    "sonner"
  ],
  "registryDependencies": [
    "button",
    "dialog",
    "hover-card",
    "label",
    "slider",
    "command",
    "popover",
    "alert-dialog",
    "dropdown-menu",
    "switch",
    "input",
    "textarea",
    "separator",
    "tabs"
  ],
  "files": [
    {
      "path": "examples/playground/components/code-viewer.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger\n} from \"@/components/ui/dialog\";\n\nexport function CodeViewer() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"secondary\">View code</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>View code</DialogTitle>\n          <DialogDescription>\n            You can use the following code to start integrating your current prompt and settings\n            into your application.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-4\">\n          <div className=\"rounded-md bg-black p-6\">\n            <pre>\n              <code className=\"grid gap-1 text-sm text-white [&_span]:h-4\">\n                <span>\n                  <span className=\"text-sky-300\">import</span> os\n                </span>\n                <span>\n                  <span className=\"text-sky-300\">import</span> openai\n                </span>\n                <span />\n                <span>\n                  openai.api_key = os.getenv(\n                  <span className=\"text-green-300\">&quot;OPENAI_API_KEY&quot;</span>)\n                </span>\n                <span />\n                <span>response = openai.Completion.create(</span>\n                <span>\n                  {\" \"}\n                  model=\n                  <span className=\"text-green-300\">&quot;davinci&quot;</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  prompt=<span className=\"text-amber-300\">&quot;&quot;</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  temperature=<span className=\"text-amber-300\">0.9</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  max_tokens=<span className=\"text-amber-300\">5</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  top_p=<span className=\"text-amber-300\">1</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  frequency_penalty=<span className=\"text-amber-300\">0</span>,\n                </span>\n                <span>\n                  {\" \"}\n                  presence_penalty=<span className=\"text-green-300\">0</span>,\n                </span>\n                <span>)</span>\n              </code>\n            </pre>\n          </div>\n          <div>\n            <p className=\"text-muted-foreground text-sm\">\n              Your API Key can be found here. You should use environment variables or a secret\n              management tool to expose your key to your applications.\n            </p>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/code-viewer.tsx"
    },
    {
      "path": "examples/playground/components/maxlength-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\n\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\n\ninterface MaxLengthSelectorProps {\n  defaultValue: SliderPrimitive.SliderProps[\"defaultValue\"];\n}\n\nexport function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {\n  const [value, setValue] = React.useState(defaultValue);\n\n  return (\n    <div className=\"grid gap-2 pt-2\">\n      <HoverCard openDelay={200}>\n        <HoverCardTrigger asChild>\n          <div className=\"grid gap-4\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"maxlength\">Maximum Length</Label>\n              <span className=\"text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm\">\n                {value}\n              </span>\n            </div>\n            <Slider\n              id=\"maxlength\"\n              max={4000}\n              defaultValue={value}\n              step={10}\n              onValueChange={setValue}\n              aria-label=\"Maximum Length\"\n            />\n          </div>\n        </HoverCardTrigger>\n        <HoverCardContent align=\"start\" className=\"w-[260px] text-sm\" side=\"left\">\n          The maximum number of tokens to generate. Requests can use up to 2,048 or 4,000 tokens,\n          shared between prompt and completion. The exact limit varies by model.\n        </HoverCardContent>\n      </HoverCard>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/maxlength-selector.tsx"
    },
    {
      "path": "examples/playground/components/model-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useMutationObserver } from \"@/hooks/use-mutation-observer\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList\n} from \"@/components/ui/command\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nimport { Model, ModelType } from \"../data/models\";\n\ninterface ModelSelectorProps extends PopoverPrimitive.PopoverProps {\n  types: readonly ModelType[];\n  models: Model[];\n}\n\nexport function ModelSelector({ models, types, ...props }: ModelSelectorProps) {\n  const [open, setOpen] = React.useState(false);\n  const [selectedModel, setSelectedModel] = React.useState<Model>(models[0]);\n  const [peekedModel, setPeekedModel] = React.useState<Model>(models[0]);\n\n  return (\n    <div className=\"grid gap-3\">\n      <HoverCard openDelay={200}>\n        <HoverCardTrigger asChild>\n          <Label htmlFor=\"model\">Model</Label>\n        </HoverCardTrigger>\n        <HoverCardContent align=\"start\" className=\"w-[260px] text-sm\" side=\"left\">\n          The model which will generate the completion. Some models are suitable for natural\n          language tasks, others specialize in code. Learn more.\n        </HoverCardContent>\n      </HoverCard>\n      <Popover open={open} onOpenChange={setOpen} {...props}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-label=\"Select a model\"\n            className=\"w-full justify-between\">\n            {selectedModel ? selectedModel.name : \"Select a model...\"}\n            <ChevronsUpDown className=\"text-muted-foreground\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"w-[250px] p-0\">\n          <HoverCard>\n            <HoverCardContent side=\"left\" align=\"start\" forceMount className=\"min-h-[280px]\">\n              <div className=\"grid gap-2\">\n                <h4 className=\"leading-none font-medium\">{peekedModel.name}</h4>\n                <div className=\"text-muted-foreground text-sm\">{peekedModel.description}</div>\n                {peekedModel.strengths ? (\n                  <div className=\"mt-4 grid gap-2\">\n                    <h5 className=\"text-sm leading-none font-medium\">Strengths</h5>\n                    <ul className=\"text-muted-foreground text-sm\">{peekedModel.strengths}</ul>\n                  </div>\n                ) : null}\n              </div>\n            </HoverCardContent>\n            <Command loop>\n              <CommandList className=\"h-(--cmdk-list-height) max-h-[400px]\">\n                <CommandInput placeholder=\"Search Models...\" />\n                <CommandEmpty>No Models found.</CommandEmpty>\n                <HoverCardTrigger />\n                {types.map((type) => (\n                  <CommandGroup key={type} heading={type}>\n                    {models\n                      .filter((model) => model.type === type)\n                      .map((model) => (\n                        <ModelItem\n                          key={model.id}\n                          model={model}\n                          isSelected={selectedModel?.id === model.id}\n                          onPeek={(model) => setPeekedModel(model)}\n                          onSelect={() => {\n                            setSelectedModel(model);\n                            setOpen(false);\n                          }}\n                        />\n                      ))}\n                  </CommandGroup>\n                ))}\n              </CommandList>\n            </Command>\n          </HoverCard>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\ninterface ModelItemProps {\n  model: Model;\n  isSelected: boolean;\n  onSelect: () => void;\n  onPeek: (model: Model) => void;\n}\n\nfunction ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useMutationObserver(ref, (mutations) => {\n    mutations.forEach((mutation) => {\n      if (\n        mutation.type === \"attributes\" &&\n        mutation.attributeName === \"aria-selected\" &&\n        ref.current?.getAttribute(\"aria-selected\") === \"true\"\n      ) {\n        onPeek(model);\n      }\n    });\n  });\n\n  return (\n    <CommandItem\n      key={model.id}\n      onSelect={onSelect}\n      ref={ref}\n      className=\"data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground\">\n      {model.name}\n      <Check className={cn(\"ml-auto\", isSelected ? \"opacity-100\" : \"opacity-0\")} />\n    </CommandItem>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/model-selector.tsx"
    },
    {
      "path": "examples/playground/components/preset-actions.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\nimport {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle\n} from \"@/components/ui/dialog\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"@/components/ui/dropdown-menu\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport function PresetActions() {\n  const [open, setIsOpen] = React.useState(false);\n  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);\n\n  return (\n    <>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"secondary\" size=\"icon\">\n            <span className=\"sr-only\">Actions</span>\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuItem onSelect={() => setIsOpen(true)}>\n            Content filter preferences\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem onSelect={() => setShowDeleteDialog(true)} className=\"text-red-600\">\n            Delete preset\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n      <Dialog open={open} onOpenChange={setIsOpen}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Content filter preferences</DialogTitle>\n            <DialogDescription>\n              The content filter flags text that may violate our content policy. It&apos;s powered\n              by our moderation endpoint which is free to use to moderate your OpenAI API traffic.\n              Learn more.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"py-6\">\n            <h4 className=\"text-muted-foreground text-sm\">Playground Warnings</h4>\n            <div className=\"flex items-start justify-between gap-4 pt-3\">\n              <Switch name=\"show\" id=\"show\" defaultChecked={true} />\n              <Label className=\"grid gap-1 font-normal\" htmlFor=\"show\">\n                <span className=\"font-semibold\">Show a warning when content is flagged</span>\n                <span className=\"text-muted-foreground text-sm\">\n                  A warning will be shown when sexual, hateful, violent or self-harm content is\n                  detected.\n                </span>\n              </Label>\n            </div>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"secondary\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n            <AlertDialogDescription>\n              This action cannot be undone. This preset will no longer be accessible by you or\n              others you&apos;ve shared it with.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <Button\n              variant=\"destructive\"\n              onClick={() => {\n                setShowDeleteDialog(false);\n                toast.success(\"This preset has been deleted.\");\n              }}>\n              Delete\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/preset-actions.tsx"
    },
    {
      "path": "examples/playground/components/preset-save.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport function PresetSave() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"secondary\">Save</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Save preset</DialogTitle>\n          <DialogDescription>\n            This will save the current playground state as a preset which you can access later or\n            share with others.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"grid gap-6 py-4\">\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"name\">Name</Label>\n            <Input id=\"name\" autoFocus />\n          </div>\n          <div className=\"grid gap-3\">\n            <Label htmlFor=\"description\">Description</Label>\n            <Textarea id=\"description\" />\n          </div>\n        </div>\n        <DialogFooter>\n          <Button type=\"submit\">Save</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/preset-save.tsx"
    },
    {
      "path": "examples/playground/components/preset-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport { Check, ChevronsUpDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nimport { Preset } from \"../data/presets\";\n\ninterface PresetSelectorProps extends PopoverPrimitive.PopoverProps {\n  presets: Preset[];\n}\n\nexport function PresetSelector({ presets, ...props }: PresetSelectorProps) {\n  const [open, setOpen] = React.useState(false);\n  const [selectedPreset, setSelectedPreset] = React.useState<Preset>();\n\n  return (\n    <Popover open={open} onOpenChange={setOpen} {...props}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-label=\"Load a preset...\"\n          aria-expanded={open}\n          className=\"flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]\">\n          {selectedPreset ? selectedPreset.name : \"Load a preset...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[300px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search presets...\" />\n          <CommandList>\n            <CommandEmpty>No presets found.</CommandEmpty>\n            <CommandGroup heading=\"Examples\">\n              {presets.map((preset) => (\n                <CommandItem\n                  key={preset.id}\n                  onSelect={() => {\n                    setSelectedPreset(preset);\n                    setOpen(false);\n                  }}>\n                  {preset.name}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      selectedPreset?.id === preset.id ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n            <CommandSeparator />\n            <CommandGroup>\n              <CommandItem>More examples</CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/preset-selector.tsx"
    },
    {
      "path": "examples/playground/components/preset-share.tsx",
      "content": "import { Copy } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nexport function PresetShare() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"secondary\">Share</Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"flex w-[520px] flex-col gap-4\">\n        <div className=\"flex flex-col gap-1 text-center sm:text-left\">\n          <h3 className=\"text-lg font-semibold\">Share preset</h3>\n          <p className=\"text-muted-foreground text-sm\">\n            Anyone who has this link and an OpenAI account will be able to view this.\n          </p>\n        </div>\n        <div className=\"relative flex-1\">\n          <Label htmlFor=\"link\" className=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            defaultValue=\"https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003\"\n            readOnly\n            className=\"h-9 pr-10\"\n          />\n          <Button\n            type=\"submit\"\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"absolute top-1 right-1 size-7\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy className=\"size-3.5\" />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/preset-share.tsx"
    },
    {
      "path": "examples/playground/components/temperature-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\n\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\n\ninterface TemperatureSelectorProps {\n  defaultValue: SliderPrimitive.SliderProps[\"defaultValue\"];\n}\n\nexport function TemperatureSelector({ defaultValue }: TemperatureSelectorProps) {\n  const [value, setValue] = React.useState(defaultValue);\n\n  return (\n    <div className=\"grid gap-2 pt-2\">\n      <HoverCard openDelay={200}>\n        <HoverCardTrigger asChild>\n          <div className=\"grid gap-4\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"temperature\">Temperature</Label>\n              <span className=\"text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm\">\n                {value}\n              </span>\n            </div>\n            <Slider\n              id=\"temperature\"\n              max={1}\n              defaultValue={value}\n              step={0.1}\n              onValueChange={setValue}\n              aria-label=\"Temperature\"\n            />\n          </div>\n        </HoverCardTrigger>\n        <HoverCardContent align=\"start\" className=\"w-[260px] text-sm\" side=\"left\">\n          Controls randomness: lowering results in less random completions. As the temperature\n          approaches zero, the model will become deterministic and repetitive.\n        </HoverCardContent>\n      </HoverCard>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/temperature-selector.tsx"
    },
    {
      "path": "examples/playground/components/top-p-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\n\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Slider } from \"@/components/ui/slider\";\n\ninterface TopPSelectorProps {\n  defaultValue: SliderPrimitive.SliderProps[\"defaultValue\"];\n}\n\nexport function TopPSelector({ defaultValue }: TopPSelectorProps) {\n  const [value, setValue] = React.useState(defaultValue);\n\n  return (\n    <div className=\"grid gap-2 pt-2\">\n      <HoverCard openDelay={200}>\n        <HoverCardTrigger asChild>\n          <div className=\"grid gap-4\">\n            <div className=\"flex items-center justify-between\">\n              <Label htmlFor=\"top-p\">Top P</Label>\n              <span className=\"text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm\">\n                {value}\n              </span>\n            </div>\n            <Slider\n              id=\"top-p\"\n              max={1}\n              defaultValue={value}\n              step={0.1}\n              onValueChange={setValue}\n              aria-label=\"Top P\"\n            />\n          </div>\n        </HoverCardTrigger>\n        <HoverCardContent align=\"start\" className=\"w-[260px] text-sm\" side=\"left\">\n          Control diversity via nucleus sampling: 0.5 means half of all likelihood-weighted options\n          are considered.\n        </HoverCardContent>\n      </HoverCard>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/components/top-p-selector.tsx"
    },
    {
      "path": "examples/playground/data/models.ts",
      "content": "export const types = [\"GPT-3\", \"Codex\"] as const\n\nexport type ModelType = (typeof types)[number]\n\nexport interface Model<Type = string> {\n  id: string\n  name: string\n  description: string\n  strengths?: string\n  type: Type\n}\n\nexport const models: Model<ModelType>[] = [\n  {\n    id: \"c305f976-8e38-42b1-9fb7-d21b2e34f0da\",\n    name: \"text-davinci-003\",\n    description:\n      \"Most capable GPT-3 model. Can do any task the other models can do, often with higher quality, longer output and better instruction-following. Also supports inserting completions within text.\",\n    type: \"GPT-3\",\n    strengths:\n      \"Complex intent, cause and effect, creative generation, search, summarization for audience\",\n  },\n  {\n    id: \"464a47c3-7ab5-44d7-b669-f9cb5a9e8465\",\n    name: \"text-curie-001\",\n    description: \"Very capable, but faster and lower cost than Davinci.\",\n    type: \"GPT-3\",\n    strengths:\n      \"Language translation, complex classification, sentiment, summarization\",\n  },\n  {\n    id: \"ac0797b0-7e31-43b6-a494-da7e2ab43445\",\n    name: \"text-babbage-001\",\n    description: \"Capable of straightforward tasks, very fast, and lower cost.\",\n    type: \"GPT-3\",\n    strengths: \"Moderate classification, semantic search\",\n  },\n  {\n    id: \"be638fb1-973b-4471-a49c-290325085802\",\n    name: \"text-ada-001\",\n    description:\n      \"Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.\",\n    type: \"GPT-3\",\n    strengths:\n      \"Parsing text, simple classification, address correction, keywords\",\n  },\n  {\n    id: \"b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb\",\n    name: \"code-davinci-002\",\n    description:\n      \"Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.\",\n    type: \"Codex\",\n  },\n  {\n    id: \"bbd57291-4622-4a21-9eed-dd6bd786fdd1\",\n    name: \"code-cushman-001\",\n    description:\n      \"Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.\",\n    type: \"Codex\",\n    strengths: \"Real-time application where low-latency is preferable\",\n  },\n]\n",
      "type": "registry:block",
      "target": "app/playground/data/models.ts"
    },
    {
      "path": "examples/playground/data/presets.ts",
      "content": "export interface Preset {\n  id: string\n  name: string\n}\n\nexport const presets: Preset[] = [\n  {\n    id: \"9cb0e66a-9937-465d-a188-2c4c4ae2401f\",\n    name: \"Grammatical Standard English\",\n  },\n  {\n    id: \"61eb0e32-2391-4cd3-adc3-66efe09bc0b7\",\n    name: \"Summarize for a 2nd grader\",\n  },\n  {\n    id: \"a4e1fa51-f4ce-4e45-892c-224030a00bdd\",\n    name: \"Text to command\",\n  },\n  {\n    id: \"cc198b13-4933-43aa-977e-dcd95fa30770\",\n    name: \"Q&A\",\n  },\n  {\n    id: \"adfa95be-a575-45fd-a9ef-ea45386c64de\",\n    name: \"English to other languages\",\n  },\n  {\n    id: \"c569a06a-0bd6-43a7-adf9-bf68c09e7a79\",\n    name: \"Parse unstructured data\",\n  },\n  {\n    id: \"15ccc0d7-f37a-4f0a-8163-a37e162877dc\",\n    name: \"Classification\",\n  },\n  {\n    id: \"4641ef41-1c0f-421d-b4b2-70fe431081f3\",\n    name: \"Natural language to Python\",\n  },\n  {\n    id: \"48d34082-72f3-4a1b-a14d-f15aca4f57a0\",\n    name: \"Explain code\",\n  },\n  {\n    id: \"dfd42fd5-0394-4810-92c6-cc907d3bfd1a\",\n    name: \"Chat\",\n  },\n]\n",
      "type": "registry:block",
      "target": "app/playground/data/presets.ts"
    },
    {
      "path": "examples/playground/page.tsx",
      "content": "import { RotateCcw } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nimport { CodeViewer } from \"./components/code-viewer\";\nimport { MaxLengthSelector } from \"./components/maxlength-selector\";\nimport { ModelSelector } from \"./components/model-selector\";\nimport { PresetActions } from \"./components/preset-actions\";\nimport { PresetSave } from \"./components/preset-save\";\nimport { PresetSelector } from \"./components/preset-selector\";\nimport { PresetShare } from \"./components/preset-share\";\nimport { TemperatureSelector } from \"./components/temperature-selector\";\nimport { TopPSelector } from \"./components/top-p-selector\";\nimport { models, types } from \"./data/models\";\nimport { presets } from \"./data/presets\";\n\nexport default function PlaygroundPage() {\n  return (\n    <div>\n      <div className=\"flex flex-col items-start justify-between gap-2 p-4 py-4 sm:flex-row sm:items-center sm:gap-0 md:h-16\">\n        <h2 className=\"text-lg font-semibold\">Playground</h2>\n        <div className=\"ml-auto flex w-full gap-2 sm:justify-end\">\n          <PresetSelector presets={presets} />\n          <PresetSave />\n          <div className=\"hidden gap-2 md:flex\">\n            <CodeViewer />\n            <PresetShare />\n          </div>\n          <PresetActions />\n        </div>\n      </div>\n      <Separator />\n      <Tabs defaultValue=\"complete\" className=\"flex h-[calc(100vh-4.5rem)] flex-1 flex-col\">\n        <div className=\"flex flex-1 flex-col p-4\">\n          <div className=\"grid flex-1 items-stretch gap-6 md:grid-cols-[1fr_200px]\">\n            <div className=\"hidden flex-col gap-6 sm:flex md:order-2\">\n              <div className=\"grid gap-3\">\n                <HoverCard openDelay={200}>\n                  <HoverCardTrigger asChild>\n                    <span className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n                      Mode\n                    </span>\n                  </HoverCardTrigger>\n                  <HoverCardContent className=\"w-[320px] text-sm\" side=\"left\">\n                    Choose the interface that best suits your task. You can provide: a simple prompt\n                    to complete, starting and ending text to insert a completion within, or some\n                    text with instructions to edit it.\n                  </HoverCardContent>\n                </HoverCard>\n                <TabsList className=\"grid w-full grid-cols-3\">\n                  <TabsTrigger value=\"complete\">\n                    <span className=\"sr-only\">Complete</span>\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"none\">\n                      <rect x=\"4\" y=\"3\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"7\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"11\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"15\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"8.5\" y=\"11\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"8.5\" y=\"15\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"13\" y=\"11\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                    </svg>\n                  </TabsTrigger>\n                  <TabsTrigger value=\"insert\">\n                    <span className=\"sr-only\">Insert</span>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      className=\"h-5 w-5\">\n                      <path\n                        fillRule=\"evenodd\"\n                        clipRule=\"evenodd\"\n                        d=\"M14.491 7.769a.888.888 0 0 1 .287.648.888.888 0 0 1-.287.648l-3.916 3.667a1.013 1.013 0 0 1-.692.268c-.26 0-.509-.097-.692-.268L5.275 9.065A.886.886 0 0 1 5 8.42a.889.889 0 0 1 .287-.64c.181-.17.427-.267.683-.269.257-.002.504.09.69.258L8.903 9.87V3.917c0-.243.103-.477.287-.649.183-.171.432-.268.692-.268.26 0 .509.097.692.268a.888.888 0 0 1 .287.649V9.87l2.245-2.102c.183-.172.432-.269.692-.269.26 0 .508.097.692.269Z\"\n                        fill=\"currentColor\"></path>\n                      <rect x=\"4\" y=\"15\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"8.5\" y=\"15\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"13\" y=\"15\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                    </svg>\n                  </TabsTrigger>\n                  <TabsTrigger value=\"edit\">\n                    <span className=\"sr-only\">Edit</span>\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 20 20\"\n                      fill=\"none\"\n                      className=\"h-5 w-5\">\n                      <rect x=\"4\" y=\"3\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"7\" width=\"12\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"11\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"4\" y=\"15\" width=\"4\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <rect x=\"8.5\" y=\"11\" width=\"3\" height=\"2\" rx=\"1\" fill=\"currentColor\"></rect>\n                      <path\n                        d=\"M17.154 11.346a1.182 1.182 0 0 0-1.671 0L11 15.829V17.5h1.671l4.483-4.483a1.182 1.182 0 0 0 0-1.671Z\"\n                        fill=\"currentColor\"></path>\n                    </svg>\n                  </TabsTrigger>\n                </TabsList>\n              </div>\n              <ModelSelector types={types} models={models} />\n              <TemperatureSelector defaultValue={[0.56]} />\n              <MaxLengthSelector defaultValue={[256]} />\n              <TopPSelector defaultValue={[0.9]} />\n            </div>\n            <div className=\"flex flex-1 flex-col *:data-[slot=tab-content]:flex-1 md:order-1\">\n              <TabsContent value=\"complete\" className=\"mt-0 border-0 p-0\">\n                <div className=\"flex h-full flex-col gap-4\">\n                  <Textarea\n                    placeholder=\"Write a tagline for an ice cream shop\"\n                    className=\"flex-1 p-4\"\n                  />\n                  <div className=\"flex items-center gap-2\">\n                    <Button>Submit</Button>\n                    <Button variant=\"secondary\">\n                      <span className=\"sr-only\">Show history</span>\n                      <RotateCcw />\n                    </Button>\n                  </div>\n                </div>\n              </TabsContent>\n              <TabsContent value=\"insert\" className=\"mt-0 flex flex-col gap-4 border-0 p-0\">\n                <div className=\"grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1\">\n                  <Textarea\n                    placeholder=\"We're writing to [inset]. Congrats from OpenAI!\"\n                    className=\"h-full p-4\"\n                  />\n                  <div className=\"bg-muted rounded-md border\"></div>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Button>Submit</Button>\n                  <Button variant=\"secondary\">\n                    <span className=\"sr-only\">Show history</span>\n                    <RotateCcw />\n                  </Button>\n                </div>\n              </TabsContent>\n              <TabsContent value=\"edit\" className=\"mt-0 flex flex-col gap-4 border-0 p-0\">\n                <div className=\"grid h-full gap-6 lg:grid-cols-2\">\n                  <div className=\"flex flex-col gap-4\">\n                    <div className=\"flex flex-1 flex-col gap-2\">\n                      <Label htmlFor=\"input\" className=\"sr-only\">\n                        Input\n                      </Label>\n                      <Textarea\n                        id=\"input\"\n                        placeholder=\"We is going to the market.\"\n                        className=\"flex-1 p-4\"\n                      />\n                    </div>\n                    <div className=\"flex flex-col gap-2\">\n                      <Label htmlFor=\"instructions\">Instructions</Label>\n                      <Textarea id=\"instructions\" placeholder=\"Fix the grammar.\" />\n                    </div>\n                  </div>\n                  <div className=\"bg-muted rounded-md border\" />\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <Button>Submit</Button>\n                  <Button variant=\"secondary\">\n                    <span className=\"sr-only\">Show history</span>\n                    <RotateCcw />\n                  </Button>\n                </div>\n              </TabsContent>\n            </div>\n          </div>\n        </div>\n      </Tabs>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "app/playground/page.tsx"
    }
  ]
}