Usage examples for prompt

app/api/generateCode/route.ts

@@ -1,4 +1,5 @@
-import { shadcnComponents } from "@/utils/Shadcn";
+// import { shadcnComponents } from "@/utils/Shadcn";
+import shadcnDocs from "@/utils/shadcn-docs";
 import {
   TogetherAIStream,
   TogetherAIStreamPayload,
@@ -13,14 +14,40 @@ You are an expert frontend React engineer who is also a great UI/UX designer. Fo
 - Make sure the React app is interactive and functional by creating state when needed and having no required props
 - Use TypeScript as the language for the React component
 - Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). Make sure to use a consistent color palette.
-- If the code calls for a button, use the provided \`Button\` component. Here's how to import it: \`import { Button } from '/components/ui/button';\` And here are the extra props available for use: \`\`\`type ExtraButtonProps = {variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined}\`\`\`. Use your best judgement and use an extra prop if it seems appropriate.
-- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
 - Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.
+
+- The [email protected] library is also available to be imported. If you need an icon, use one from lucide-react. Here's an example of importing and using one: import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
+
+
+There are some prestyled components available for use. Please use your best judgement to use any of these components if the app calls for one.
+
+Here are the components that are available, along with how to use them:
+
+${shadcnDocs
+  .map(
+    (component) => `
+  <component>
+  <name>
+  ${component.name}
+  </name>
+  <usage>
+  ${component.usage}
+  </component>
+`,
+  )
+  .join("\n")}
+
+NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
 `;
-// - The assistant can ONLY use these 2 prebuilt components from the \`shadcn\` library if needed:
-//   - \`import { Button } from '@/components/ui/button';\`
-//   - \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`
-// - ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed.
+
+console.log(systemPrompt);
+
+// - If the code calls for a button, use the provided \`Button\` component. Here's how to import it: \`import { Button } from '/components/ui/button';\` And here are the extra props available for use: \`\`\`type ExtraButtonProps = {variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined}\`\`\`. Use your best judgement and use an extra prop if it seems appropriate.
+// // - The assistant can ONLY use these 2 prebuilt components from the \`shadcn\` library if needed:
+// //   - \`import { Button } from '@/components/ui/button';\`
+// //   - \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`
+// // - ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed.
+
 // - Here are all the prebuilt components ${JSON.stringify(shadcnComponents.button + shadcnComponents.alert)}
 
 export async function POST(req: Request) {

app/page.tsx

@@ -60,7 +60,7 @@ import {
   tooltip,
   useToast,
   utils,
-} from "@/utils/Shadcn";
+} from "@/utils/shadcn-v1";
 
 export default function Home() {
   let [status, setStatus] = useState<
@@ -251,6 +251,7 @@ export default function Home() {
                     name="prompt"
                     className="w-full rounded-l-3xl bg-transparent px-6 py-5 text-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500"
                     placeholder="Build me a calculator app..."
+                    defaultValue="Build me a calculator app"
                   />
                 </div>
                 <button

utils/shadcn-docs/avatar.tsx

@@ -0,0 +1,14 @@
+export const name = "Avatar";
+
+export const usage = `
+import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar";
+ 
+export function Demo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/nutlope.png" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  )
+}
+`;

utils/shadcn-docs/button.tsx

@@ -0,0 +1,18 @@
+export const name = "Button";
+
+export const usage = `
+import { Button } from "/components/ui/button"
+ 
+export function Demo() {
+  return (
+    <div>
+      <Button>A normal button</Button>
+      <Button variant='secondary'>Button</Button>
+      <Button variant='destructive'>Button</Button>
+      <Button variant='outline'>Button</Button>
+      <Button variant='ghost'>Button</Button>
+      <Button variant='link'>Button</Button>
+    </div>
+  )
+}
+`;

utils/shadcn-docs/card.tsx

@@ -0,0 +1,25 @@
+export const name = "Card";
+
+export const usage = `
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "/components/ui/card"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+`;

utils/shadcn-docs/checkbox.tsx

@@ -0,0 +1,25 @@
+export const name = "Checkbox";
+
+export const usage = `
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "/components/ui/card"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+`;

utils/shadcn-docs/index.ts

@@ -0,0 +1,7 @@
+import * as Avatar from "./avatar";
+import * as Button from "./button";
+import * as Card from "./card";
+
+const shadcnDocs = [Avatar, Button, Card];
+
+export default shadcnDocs;