From a8ebf5ea735683b021c98db3209a7c72499f7be7 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Sep 2023 16:21:36 +0800
Subject: [PATCH] feat: add playground examples

---
 apps/www/src/content/examples/cards.md        |   4 +-
 apps/www/src/content/examples/dashboard.md    |   4 +-
 apps/www/src/content/examples/playground.md   |   5 +
 apps/www/src/examples/playground/Example.vue  | 319 ++++++++++++++++++
 .../playground/components/CodeViewer.vue      |  84 +++++
 .../components/MaxLengthSelector.vue          |  51 +++
 .../playground/components/ModelSelector.vue   |   6 +
 .../playground/components/PresetActions.vue   | 114 +++++++
 .../playground/components/PresetSave.vue      |  48 +++
 .../playground/components/PresetSelector.vue  |   6 +
 .../playground/components/PresetShare.vue     |  50 +++
 .../components/TemperatureSelector.vue        |  52 +++
 .../playground/components/TopPSelector.vue    |  51 +++
 .../src/examples/playground/data/models.ts    |  62 ++++
 .../src/examples/playground/data/presets.ts   |  47 +++
 15 files changed, 899 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/content/examples/playground.md
 create mode 100644 apps/www/src/examples/playground/Example.vue
 create mode 100644 apps/www/src/examples/playground/components/CodeViewer.vue
 create mode 100644 apps/www/src/examples/playground/components/MaxLengthSelector.vue
 create mode 100644 apps/www/src/examples/playground/components/ModelSelector.vue
 create mode 100644 apps/www/src/examples/playground/components/PresetActions.vue
 create mode 100644 apps/www/src/examples/playground/components/PresetSave.vue
 create mode 100644 apps/www/src/examples/playground/components/PresetSelector.vue
 create mode 100644 apps/www/src/examples/playground/components/PresetShare.vue
 create mode 100644 apps/www/src/examples/playground/components/TemperatureSelector.vue
 create mode 100644 apps/www/src/examples/playground/components/TopPSelector.vue
 create mode 100644 apps/www/src/examples/playground/data/models.ts
 create mode 100644 apps/www/src/examples/playground/data/presets.ts

diff --git a/apps/www/src/content/examples/cards.md b/apps/www/src/content/examples/cards.md
index c9b122c0..9ffb3990 100644
--- a/apps/www/src/content/examples/cards.md
+++ b/apps/www/src/content/examples/cards.md
@@ -1,5 +1,5 @@
 <script setup>
-import Cards from "@/examples/cards/Example.vue"
+import CardsExample from "@/examples/cards/Example.vue"
 </script>
 
-<Cards />
\ No newline at end of file
+<CardsExample />
\ No newline at end of file
diff --git a/apps/www/src/content/examples/dashboard.md b/apps/www/src/content/examples/dashboard.md
index 6ddd81d6..827c5150 100644
--- a/apps/www/src/content/examples/dashboard.md
+++ b/apps/www/src/content/examples/dashboard.md
@@ -1,5 +1,5 @@
 <script setup>
-import Dashboard from "@/examples/dashboard/Example.vue"
+import DashboardExample from "@/examples/dashboard/Example.vue"
 </script>
 
-<Dashboard />
\ No newline at end of file
+<DashboardExample />
\ No newline at end of file
diff --git a/apps/www/src/content/examples/playground.md b/apps/www/src/content/examples/playground.md
new file mode 100644
index 00000000..cd0d5a89
--- /dev/null
+++ b/apps/www/src/content/examples/playground.md
@@ -0,0 +1,5 @@
+<script setup>
+import PlaygroundExample from "@/examples/playground/Example.vue"
+</script>
+
+<PlaygroundExample />
\ No newline at end of file
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
new file mode 100644
index 00000000..48c9b341
--- /dev/null
+++ b/apps/www/src/examples/playground/Example.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import CodeViewer from './components/CodeViewer.vue'
+import MaxLengthSelector from './components/MaxLengthSelector.vue'
+import ModelSelector from './components/ModelSelector.vue'
+import PresetActions from './components/PresetActions.vue'
+import PresetSave from './components/PresetSave.vue'
+import PresetSelector from './components/PresetSelector.vue'
+import PresetShare from './components/PresetShare.vue'
+import TemperatureSelector from './components/TemperatureSelector.vue'
+import TopPSelector from './components/TopPSelector.vue'
+
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/default/ui/tabs'
+import { Separator } from '@/lib/registry/default/ui/separator'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/lib/registry/default/ui/hover-card'
+import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-clock'
+</script>
+
+<template>
+  <div class="md:hidden">
+    <Image
+      src="/examples/playground-light.png"
+      width="{1280}"
+      height="{916}"
+      alt="Playground"
+      class="block dark:hidden"
+    />
+    <Image
+      src="/examples/playground-dark.png"
+      width="{1280}"
+      height="{916}"
+      alt="Playground"
+      class="hidden dark:block"
+    />
+  </div>
+  <div class="hidden h-full flex-col md:flex">
+    <div class="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
+      <h2 class="text-lg font-semibold">
+        Playground
+      </h2>
+      <div class="ml-auto flex w-full space-x-2 sm:justify-end">
+        <PresetSelector presets="{presets}" />
+        <PresetSave />
+        <div class="hidden space-x-2 md:flex">
+          <CodeViewer />
+          <PresetShare />
+        </div>
+        <PresetActions />
+      </div>
+    </div>
+    <Separator />
+    <Tabs default-value="complete" class="flex-1">
+      <div class="container h-full py-6">
+        <div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
+          <div class="hidden flex-col space-y-4 sm:flex md:order-2">
+            <div class="grid gap-2">
+              <HoverCard :open-delay="200">
+                <HoverCardTrigger as-child>
+                  <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                    Mode
+                  </span>
+                </HoverCardTrigger>
+                <HoverCardContent class="w-[320px] text-sm" side="left">
+                  Choose the interface that best suits your task. You can
+                  provide: a simple prompt to complete, starting and ending
+                  text to insert a completion within, or some text with
+                  instructions to edit it.
+                </HoverCardContent>
+              </HoverCard>
+              <TabsList class="grid grid-cols-3">
+                <TabsTrigger value="complete">
+                  <span class="sr-only">Complete</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    class="h-5 w-5"
+                  >
+                    <rect
+                      x="4"
+                      y="3"
+                      width="12"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="7"
+                      width="12"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="11"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="15"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="8.5"
+                      y="11"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="8.5"
+                      y="15"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="13"
+                      y="11"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </TabsTrigger>
+                <TabsTrigger value="insert">
+                  <span class="sr-only">Insert</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    class="h-5 w-5"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      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"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="15"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="8.5"
+                      y="15"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="13"
+                      y="15"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </TabsTrigger>
+                <TabsTrigger value="edit">
+                  <span class="sr-only">Edit</span>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    class="h-5 w-5"
+                  >
+                    <rect
+                      x="4"
+                      y="3"
+                      width="12"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="7"
+                      width="12"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="11"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="4"
+                      y="15"
+                      width="4"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <rect
+                      x="8.5"
+                      y="11"
+                      width="3"
+                      height="2"
+                      rx="1"
+                      fill="currentColor"
+                    />
+                    <path
+                      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"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </TabsTrigger>
+              </TabsList>
+            </div>
+            <ModelSelector :types="types" :models="models" />
+            <TemperatureSelector :default-value="[0.56]" />
+            <MaxLengthSelector :default-value="[256]" />
+            <TopPSelector :default-value="[0.9]" />
+          </div>
+          <div class="md:order-1">
+            <TabsContent value="complete" class="mt-0 border-0 p-0">
+              <div class="flex h-full flex-col space-y-4">
+                <Textarea
+                  placeholder="Write a tagline for an ice cream shop"
+                  class="min-h-[400px] flex-1 p-4 md:min-h-[700px] lg:min-h-[700px]"
+                />
+                <div class="flex items-center space-x-2">
+                  <Button>Submit</Button>
+                  <Button variant="secondary">
+                    <span class="sr-only">Show history</span>
+                    <CounterClockwiseClockIcon class="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="insert" class="mt-0 border-0 p-0">
+              <div class="flex flex-col space-y-4">
+                <div class="grid h-full grid-rows-2 gap-6 lg:grid-cols-2 lg:grid-rows-1">
+                  <Textarea
+                    placeholder="We're writing to [inset]. Congrats from OpenAI!"
+                    class="h-full min-h-[300px] lg:min-h-[700px] xl:min-h-[700px]"
+                  />
+                  <div class="rounded-md border bg-muted" />
+                </div>
+                <div class="flex items-center space-x-2">
+                  <Button>Submit</Button>
+                  <Button variant="secondary">
+                    <span class="sr-only">Show history</span>
+                    <CounterClockwiseClockIcon class="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="edit" class="mt-0 border-0 p-0">
+              <div class="flex flex-col space-y-4">
+                <div class="grid h-full gap-6 lg:grid-cols-2">
+                  <div class="flex flex-col space-y-4">
+                    <div class="flex flex-1 flex-col space-y-2">
+                      <Label for="input">Input</Label>
+                      <Textarea
+                        id="input"
+                        placeholder="We is going to the market."
+                        class="flex-1 lg:min-h-[580px]"
+                      />
+                    </div>
+                    <div class="flex flex-col space-y-2">
+                      <Label for="instructions">Instructions</Label>
+                      <Textarea
+                        id="instructions"
+                        placeholder="Fix the grammar."
+                      />
+                    </div>
+                  </div>
+                  <div class="mt-[21px] min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
+                </div>
+                <div class="flex items-center space-x-2">
+                  <Button>Submit</Button>
+                  <Button variant="secondary">
+                    <span class="sr-only">Show history</span>
+                    <CounterClockwiseClockIcon class="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+          </div>
+        </div>
+      </div>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/www/src/examples/playground/components/CodeViewer.vue b/apps/www/src/examples/playground/components/CodeViewer.vue
new file mode 100644
index 00000000..74beb9ab
--- /dev/null
+++ b/apps/www/src/examples/playground/components/CodeViewer.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="secondary">
+        View code
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[625px]">
+      <DialogHeader>
+        <DialogTitle>View code</DialogTitle>
+        <DialogDescription>
+          You can use the following code to start integrating your current
+          prompt and settings into your application.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4">
+        <div class="rounded-md bg-black p-6">
+          <pre>
+              <code class="grid gap-1 text-sm text-muted-foreground [&_span]:h-4">
+                <span>
+                  <span class="text-sky-300">import</span> os
+                </span>
+                <span>
+                  <span class="text-sky-300">import</span> openai
+                </span>
+                <span />
+                <span>
+                  openai.api_key = os.getenv(
+                  <span class="text-green-300">
+                    &quot;OPENAI_API_KEY&quot;
+                  </span>
+                  )
+                </span>
+                <span />
+                <span>response = openai.Completion.create(</span>
+                <span>
+                  model=
+                  <span class="text-green-300">&quot;davinci&quot;</span>,
+                </span>
+                <span>
+                  prompt=<span class="text-amber-300">&quot;&quot;</span>,
+                </span>
+                <span>
+                  temperature=<span class="text-amber-300">0.9</span>,
+                </span>
+                <span>
+                  max_tokens=<span class="text-amber-300">5</span>,
+                </span>
+                <span>
+                  top_p=<span class="text-amber-300">1</span>,
+                </span>
+                <span>
+                  frequency_penalty=<span class="text-amber-300">0</span>,
+                </span>
+                <span>
+                  presence_penalty=<span class="text-green-300">0</span>,
+                </span>
+                <span>)</span>
+              </code>
+            </pre>
+        </div>
+        <div>
+          <p class="text-sm text-muted-foreground">
+            Your API Key can be found here. You should use environment
+            variables or a secret management tool to expose your key to your
+            applications.
+          </p>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/examples/playground/components/MaxLengthSelector.vue b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
new file mode 100644
index 00000000..add60af4
--- /dev/null
+++ b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SliderRootProps } from 'radix-vue'
+import { ref } from 'vue'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/lib/registry/default/ui/hover-card'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Slider } from '@/lib/registry/default/ui/slider'
+
+const props = defineProps<{
+  defaultValue: SliderRootProps['defaultValue']
+}>()
+
+const value = ref(props.defaultValue)
+</script>
+
+<template>
+  <div class="grid gap-2 pt-2">
+    <HoverCard :open-delay="200">
+      <HoverCardTrigger as-child>
+        <div class="grid gap-4">
+          <div class="flex items-center justify-between">
+            <Label for="maxlength">Maximum Length</Label>
+            <span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              {{ value?.[0] }}
+            </span>
+          </div>
+          <Slider
+            id="maxlength"
+            v-model="value"
+            :max="4000"
+            :step="10"
+            class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            aria-label="Maximum Length"
+          />
+        </div>
+      </HoverCardTrigger>
+      <HoverCardContent
+        align="start"
+        class="w-[260px] text-sm"
+        side="left"
+      >
+        The maximum number of tokens to generate. Requests can use up to 2,048
+        or 4,000 tokens, shared between prompt and completion. The exact limit
+        varies by model.
+      </HoverCardContent>
+    </HoverCard>
+  </div>
+</template>
diff --git a/apps/www/src/examples/playground/components/ModelSelector.vue b/apps/www/src/examples/playground/components/ModelSelector.vue
new file mode 100644
index 00000000..e039c4f9
--- /dev/null
+++ b/apps/www/src/examples/playground/components/ModelSelector.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/apps/www/src/examples/playground/components/PresetActions.vue b/apps/www/src/examples/playground/components/PresetActions.vue
new file mode 100644
index 00000000..ca727270
--- /dev/null
+++ b/apps/www/src/examples/playground/components/PresetActions.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
+
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/lib/registry/default/ui/alert-dialog'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/lib/registry/default/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Switch } from '@/lib/registry/default/ui/switch'
+
+// import { toast } from "@/lib/registry/default/ui/use-toast"
+
+const open = ref(false)
+const showDeleteDialog = ref(false)
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="secondary">
+        <span class="sr-only">Actions</span>
+        <DotsHorizontalIcon class="h-4 w-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem @select="open = true">
+        Content filter preferences
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        class="text-red-600"
+        @select="showDeleteDialog = true"
+      >
+        Delete preset
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+  <Dialog v-model:open="open">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Content filter preferences</DialogTitle>
+        <DialogDescription>
+          The content filter flags text that may violate our content policy.
+          It&apos;s powered by our moderation endpoint which is free to use
+          to moderate your OpenAI API traffic. Learn more.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="py-6">
+        <h4 class="text-sm text-muted-foreground">
+          Playground Warnings
+        </h4>
+        <div class="flex items-start justify-between space-x-4 pt-3">
+          <Switch id="show" name="show" :default-checked="true" />
+          <Label class="grid gap-1 font-normal" for="show">
+            <span class="font-semibold">
+              Show a warning when content is flagged
+            </span>
+            <span class="text-sm text-muted-foreground">
+              A warning will be shown when sexual, hateful, violent or
+              self-harm content is detected.
+            </span>
+          </Label>
+        </div>
+      </div>
+      <DialogFooter>
+        <Button variant="secondary" @click="open = false">
+          Close
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+  <AlertDialog v-model:open="showDeleteDialog">
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This preset will no longer be
+          accessible by you or others you&apos;ve shared it with.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <Button
+          variant="destructive"
+          @click="showDeleteDialog = false"
+        >
+          Delete
+        </Button>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
diff --git a/apps/www/src/examples/playground/components/PresetSave.vue b/apps/www/src/examples/playground/components/PresetSave.vue
new file mode 100644
index 00000000..9a6f9e9b
--- /dev/null
+++ b/apps/www/src/examples/playground/components/PresetSave.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="secondary">
+        Save
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[475px]">
+      <DialogHeader>
+        <DialogTitle>Save preset</DialogTitle>
+        <DialogDescription>
+          This will save the current playground state as a preset which you
+          can access later or share with others.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="grid gap-4 py-4">
+        <div class="grid gap-2">
+          <Label for="name">Name</Label>
+          <Input id="name" auto-focus />
+        </div>
+        <div class="grid gap-2">
+          <Label for="description">Description</Label>
+          <Input id="description" />
+        </div>
+      </div>
+      <DialogFooter>
+        <Button type="submit">
+          Save
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/www/src/examples/playground/components/PresetSelector.vue b/apps/www/src/examples/playground/components/PresetSelector.vue
new file mode 100644
index 00000000..e039c4f9
--- /dev/null
+++ b/apps/www/src/examples/playground/components/PresetSelector.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div />
+</template>
diff --git a/apps/www/src/examples/playground/components/PresetShare.vue b/apps/www/src/examples/playground/components/PresetShare.vue
new file mode 100644
index 00000000..5c2e4ea8
--- /dev/null
+++ b/apps/www/src/examples/playground/components/PresetShare.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import CopyIcon from '~icons/radix-icons/copy'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="secondary">
+        Share
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent align="end" class="w-[520px]">
+      <div class="flex flex-col space-y-2 text-center sm:text-left">
+        <h3 class="text-lg font-semibold">
+          Share preset
+        </h3>
+        <p class="text-sm text-muted-foreground">
+          Anyone who has this link and an OpenAI account will be able to view
+          this.
+        </p>
+      </div>
+      <div class="flex items-center space-x-2 pt-4">
+        <div class="grid flex-1 gap-2">
+          <Label for="link" class="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            default-value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
+            read-only
+            class="h-9"
+          />
+        </div>
+        <Button type="submit" size="sm" class="px-3">
+          <span class="sr-only">Copy</span>
+          <CopyIcon class="h-4 w-4" />
+        </Button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/www/src/examples/playground/components/TemperatureSelector.vue b/apps/www/src/examples/playground/components/TemperatureSelector.vue
new file mode 100644
index 00000000..f9f0607d
--- /dev/null
+++ b/apps/www/src/examples/playground/components/TemperatureSelector.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { SliderRootProps } from 'radix-vue'
+
+import { ref } from 'vue'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/lib/registry/default/ui/hover-card'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Slider } from '@/lib/registry/default/ui/slider'
+
+const props = defineProps<{
+  defaultValue: SliderRootProps['defaultValue']
+}>()
+
+const value = ref(props.defaultValue)
+</script>
+
+<template>
+  <div class="grid gap-2 pt-2">
+    <HoverCard :open-delay="200">
+      <HoverCardTrigger as-child>
+        <div class="grid gap-4">
+          <div class="flex items-center justify-between">
+            <Label for="temperature">Temperature</Label>
+            <span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              {{ value?.[0] }}
+            </span>
+          </div>
+          <Slider
+            id="temperature"
+            v-model="value"
+            :max="1"
+            :step="0.1"
+            class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            aria-label="Temperature"
+          />
+        </div>
+      </HoverCardTrigger>
+      <HoverCardContent
+        align="start"
+        class="w-[260px] text-sm"
+        side="left"
+      >
+        Controls randomness: lowering results in less random completions. As
+        the temperature approaches zero, the model will become deterministic
+        and repetitive.
+      </HoverCardContent>
+    </HoverCard>
+  </div>
+</template>
diff --git a/apps/www/src/examples/playground/components/TopPSelector.vue b/apps/www/src/examples/playground/components/TopPSelector.vue
new file mode 100644
index 00000000..a75bf0a2
--- /dev/null
+++ b/apps/www/src/examples/playground/components/TopPSelector.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SliderRootProps } from 'radix-vue'
+
+import { ref } from 'vue'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/lib/registry/default/ui/hover-card'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Slider } from '@/lib/registry/default/ui/slider'
+
+const props = defineProps<{
+  defaultValue: SliderRootProps['defaultValue']
+}>()
+
+const value = ref(props.defaultValue)
+</script>
+
+<template>
+  <div class="grid gap-2 pt-2">
+    <HoverCard :open-delay="200">
+      <HoverCardTrigger as-child>
+        <div class="grid gap-4">
+          <div class="flex items-center justify-between">
+            <Label for="top-p">Top P</Label>
+            <span class="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
+              {{ value?.[0] }}
+            </span>
+          </div>
+          <Slider
+            id="top-p"
+            v-model="value"
+            :max="1"
+            :step="0.1"
+            class="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            aria-label="Top P"
+          />
+        </div>
+      </HoverCardTrigger>
+      <HoverCardContent
+        align="start"
+        class="w-[260px] text-sm"
+        side="left"
+      >
+        Control diversity via nucleus sampling: 0.5 means half of all
+        likelihood-weighted options are considered.
+      </HoverCardContent>
+    </HoverCard>
+  </div>
+</template>
diff --git a/apps/www/src/examples/playground/data/models.ts b/apps/www/src/examples/playground/data/models.ts
new file mode 100644
index 00000000..5d6c6905
--- /dev/null
+++ b/apps/www/src/examples/playground/data/models.ts
@@ -0,0 +1,62 @@
+export const types = ['GPT-3', 'Codex'] as const
+
+export type ModelType = (typeof types)[number]
+
+export interface Model<Type = string> {
+  id: string
+  name: string
+  description: string
+  strengths?: string
+  type: Type
+}
+
+export const models: Model<ModelType>[] = [
+  {
+    id: 'c305f976-8e38-42b1-9fb7-d21b2e34f0da',
+    name: 'text-davinci-003',
+    description:
+      '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.',
+    type: 'GPT-3',
+    strengths:
+      'Complex intent, cause and effect, creative generation, search, summarization for audience',
+  },
+  {
+    id: '464a47c3-7ab5-44d7-b669-f9cb5a9e8465',
+    name: 'text-curie-001',
+    description: 'Very capable, but faster and lower cost than Davinci.',
+    type: 'GPT-3',
+    strengths:
+      'Language translation, complex classification, sentiment, summarization',
+  },
+  {
+    id: 'ac0797b0-7e31-43b6-a494-da7e2ab43445',
+    name: 'text-babbage-001',
+    description: 'Capable of straightforward tasks, very fast, and lower cost.',
+    type: 'GPT-3',
+    strengths: 'Moderate classification, semantic search',
+  },
+  {
+    id: ' be638fb1-973b-4471-a49c-290325085802',
+    name: 'text-ada-001',
+    description:
+      'Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.',
+    type: 'GPT-3',
+    strengths:
+      'Parsing text, simple classification, address correction, keywords',
+  },
+  {
+    id: 'b43c0ea9-5ad4-456a-ae29-26cd77b6d0fb',
+    name: 'code-davinci-002',
+    description:
+      'Most capable Codex model. Particularly good at translating natural language to code. In addition to completing code, also supports inserting completions within code.',
+    type: 'Codex',
+  },
+  {
+    id: 'bbd57291-4622-4a21-9eed-dd6bd786fdd1',
+    name: 'code-cushman-001',
+    description:
+      'Almost as capable as Davinci Codex, but slightly faster. This speed advantage may make it preferable for real-time applications.',
+    type: 'Codex',
+    strengths: 'Real-time application where low-latency is preferable',
+  },
+]
diff --git a/apps/www/src/examples/playground/data/presets.ts b/apps/www/src/examples/playground/data/presets.ts
new file mode 100644
index 00000000..0e260e07
--- /dev/null
+++ b/apps/www/src/examples/playground/data/presets.ts
@@ -0,0 +1,47 @@
+export interface Preset {
+  id: string
+  name: string
+}
+
+export const presets: Preset[] = [
+  {
+    id: '9cb0e66a-9937-465d-a188-2c4c4ae2401f',
+    name: 'Grammatical Standard English',
+  },
+  {
+    id: '61eb0e32-2391-4cd3-adc3-66efe09bc0b7',
+    name: 'Summarize for a 2nd grader',
+  },
+  {
+    id: 'a4e1fa51-f4ce-4e45-892c-224030a00bdd',
+    name: 'Text to command',
+  },
+  {
+    id: 'cc198b13-4933-43aa-977e-dcd95fa30770',
+    name: 'Q&A',
+  },
+  {
+    id: 'adfa95be-a575-45fd-a9ef-ea45386c64de',
+    name: 'English to other languages',
+  },
+  {
+    id: 'c569a06a-0bd6-43a7-adf9-bf68c09e7a79',
+    name: 'Parse unstructured data',
+  },
+  {
+    id: '15ccc0d7-f37a-4f0a-8163-a37e162877dc',
+    name: 'Classification',
+  },
+  {
+    id: '4641ef41-1c0f-421d-b4b2-70fe431081f3',
+    name: 'Natural language to Python',
+  },
+  {
+    id: '48d34082-72f3-4a1b-a14d-f15aca4f57a0',
+    name: 'Explain code',
+  },
+  {
+    id: 'dfd42fd5-0394-4810-92c6-cc907d3bfd1a',
+    name: 'Chat',
+  },
+]