Skip to content

Commit 55d9eba

Browse files
samselikoffsamselikoff
committed
Usage examples for prompt
1 parent 99aec33 commit 55d9eba

7 files changed

Lines changed: 125 additions & 8 deletions

File tree

‎app/api/generateCode/route.ts‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { shadcnComponents } from "@/utils/Shadcn";
1+
// import { shadcnComponents } from "@/utils/Shadcn";
2+
import shadcnDocs from "@/utils/shadcn-docs";
23
import {
34
TogetherAIStream,
45
TogetherAIStreamPayload,
@@ -13,14 +14,40 @@ You are an expert frontend React engineer who is also a great UI/UX designer. Fo
1314
- Make sure the React app is interactive and functional by creating state when needed and having no required props
1415
- Use TypeScript as the language for the React component
1516
- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). Make sure to use a consistent color palette.
16-
- 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.
17-
- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
1817
- 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 \`\`\`.
18+
19+
- 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} />\`
20+
21+
22+
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.
23+
24+
Here are the components that are available, along with how to use them:
25+
26+
${shadcnDocs
27+
.map(
28+
(component) => `
29+
<component>
30+
<name>
31+
${component.name}
32+
</name>
33+
<usage>
34+
${component.usage}
35+
</component>
36+
`,
37+
)
38+
.join("\n")}
39+
40+
NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
1941
`;
20-
// - The assistant can ONLY use these 2 prebuilt components from the \`shadcn\` library if needed:
21-
// - \`import { Button } from '@/components/ui/button';\`
22-
// - \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`
23-
// - 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.
42+
43+
console.log(systemPrompt);
44+
45+
// - 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.
46+
// // - The assistant can ONLY use these 2 prebuilt components from the \`shadcn\` library if needed:
47+
// // - \`import { Button } from '@/components/ui/button';\`
48+
// // - \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`
49+
// // - 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.
50+
2451
// - Here are all the prebuilt components ${JSON.stringify(shadcnComponents.button + shadcnComponents.alert)}
2552

2653
export async function POST(req: Request) {

‎app/page.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ import {
6060
tooltip,
6161
useToast,
6262
utils,
63-
} from "@/utils/Shadcn";
63+
} from "@/utils/shadcn-v1";
6464

6565
export default function Home() {
6666
let [status, setStatus] = useState<
@@ -251,6 +251,7 @@ export default function Home() {
251251
name="prompt"
252252
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"
253253
placeholder="Build me a calculator app..."
254+
defaultValue="Build me a calculator app"
254255
/>
255256
</div>
256257
<button

‎utils/shadcn-docs/avatar.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export const name = "Avatar";
2+
3+
export const usage = `
4+
import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar";
5+
6+
export function Demo() {
7+
return (
8+
<Avatar>
9+
<AvatarImage src="https://github.com/nutlope.png" />
10+
<AvatarFallback>CN</AvatarFallback>
11+
</Avatar>
12+
)
13+
}
14+
`;

‎utils/shadcn-docs/button.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const name = "Button";
2+
3+
export const usage = `
4+
import { Button } from "/components/ui/button"
5+
6+
export function Demo() {
7+
return (
8+
<div>
9+
<Button>A normal button</Button>
10+
<Button variant='secondary'>Button</Button>
11+
<Button variant='destructive'>Button</Button>
12+
<Button variant='outline'>Button</Button>
13+
<Button variant='ghost'>Button</Button>
14+
<Button variant='link'>Button</Button>
15+
</div>
16+
)
17+
}
18+
`;

‎utils/shadcn-docs/card.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export const name = "Card";
2+
3+
export const usage = `
4+
import {
5+
Card,
6+
CardContent,
7+
CardDescription,
8+
CardFooter,
9+
CardHeader,
10+
CardTitle,
11+
} from "/components/ui/card"
12+
13+
<Card>
14+
<CardHeader>
15+
<CardTitle>Card Title</CardTitle>
16+
<CardDescription>Card Description</CardDescription>
17+
</CardHeader>
18+
<CardContent>
19+
<p>Card Content</p>
20+
</CardContent>
21+
<CardFooter>
22+
<p>Card Footer</p>
23+
</CardFooter>
24+
</Card>
25+
`;

‎utils/shadcn-docs/checkbox.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
export const name = "Checkbox";
2+
3+
export const usage = `
4+
import {
5+
Card,
6+
CardContent,
7+
CardDescription,
8+
CardFooter,
9+
CardHeader,
10+
CardTitle,
11+
} from "/components/ui/card"
12+
13+
<Card>
14+
<CardHeader>
15+
<CardTitle>Card Title</CardTitle>
16+
<CardDescription>Card Description</CardDescription>
17+
</CardHeader>
18+
<CardContent>
19+
<p>Card Content</p>
20+
</CardContent>
21+
<CardFooter>
22+
<p>Card Footer</p>
23+
</CardFooter>
24+
</Card>
25+
`;

‎utils/shadcn-docs/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as Avatar from "./avatar";
2+
import * as Button from "./button";
3+
import * as Card from "./card";
4+
5+
const shadcnDocs = [Avatar, Button, Card];
6+
7+
export default shadcnDocs;

0 commit comments

Comments
 (0)