Skip to content

Commit c9ae5fe

Browse files
NutlopeNutlope
committed
added some shadcn + system prompt
1 parent ffe22ad commit c9ae5fe

4 files changed

Lines changed: 477 additions & 19 deletions

File tree

‎README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,17 @@
1919
## Cloning & running
2020

2121
1. Clone the repo: `git clone https://github.com/Nutlope/llamacoder`
22-
2. Create a `.env` file and add your [Together AI API key]([Together AI](https://dub.sh/together-ai)): `TOGETHER_API_KEY=`
22+
2. Create a `.env` file and add your [Together AI API key](https://dub.sh/together-ai): `TOGETHER_API_KEY=`
2323
3. Run `npm install` and `npm run dev` to install dependencies and run locally
2424

2525
## Future Tasks
2626

27-
- [ ] Make it generate more consistent apps by only importing from a component library like shadcn
28-
- [ ] Look into a way to export the app or deploy it in a single click
27+
- [ ] Make it generate more consistent apps by only importing from a component library like shadcn, can checkout repos like openv0 for inspo
28+
- [ ] Look into a way to export the app or deploy it in a single click – try two things
29+
- The codesandbox way where I put the link in another way like the react docs, then I can infer the link and have people go check it out
30+
- The non-codesandbox way where i try to do it myself with a dynamic route by doing some hashing
2931
- [ ] New route for updateCode that only sends the latest generated code + the modify request
32+
- [ ] Add a bring your own key version in case traffic gets too high
3033
- [ ] Save previous versions so people can go back and forth between the generated ones
3134
- [ ] Support different kinds of apps/languages & scripts with Python, maybe w/ E2B
3235
- [ ] Fix bug where if a user edits the code, then does a change, it doesn't use the edited code

‎app/api/generateCode/route.ts‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,66 @@ You are an expert frontend React engineer.
1515
- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`).
1616
- Base React is available to be imported. To use hooks, first import it at the top of the artifact, e.g. \`import { useState } from "react"\`
1717
- The [email protected] library is available to be imported. e.g. \`import { Camera } from "lucide-react"\` & \`<Camera color="red" size={48} />\`
18-
- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`
18+
- The recharts charting library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Only use this when you need to for graphs.
19+
- The assistant can use prebuilt components from the \`shadcn/ui\` library after it is imported: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\`.
1920
- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
2021
- Do not make fetch calls to other websites in the code. Just use mock data locally.
2122
- Images from the web are not allowed, but you can use placeholder images by specifying the width and height like so \`<img src="/api/placeholder/400/320" alt="placeholder" />\`
22-
- Please ONLY return the React code, nothing else. It's very important for my job that you only return the React code. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`. Just return the React code by itself.
23+
- 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 \`\`\`.
24+
25+
Here is an example:
26+
27+
<example_1>
28+
29+
<user>
30+
Create a login form
31+
</user>
32+
33+
<assistant>
34+
import React, { useState } from 'react';
35+
import { Button } from "@/components/ui/button"
36+
import { Input } from "@/components/ui/input"
37+
import { Label } from "@/components/ui/label"
38+
const LoginForm = () => {
39+
const [username, setUsername] = useState('');
40+
const [password, setPassword] = useState('');
41+
const handleSubmit = (e) => {
42+
e.preventDefault();
43+
// Here you would typically handle the login logic
44+
console.log('Login attempted with:', { username, password });
45+
};
46+
return (
47+
<form onSubmit={handleSubmit} className="space-y-4 w-full max-w-sm mx-auto">
48+
<div className="space-y-2">
49+
<Label htmlFor="username">Username</Label>
50+
<Input
51+
id="username"
52+
type="text"
53+
value={username}
54+
onChange={(e) => setUsername(e.target.value)}
55+
required
56+
/>
57+
</div>
58+
<div className="space-y-2">
59+
<Label htmlFor="password">Password</Label>
60+
<Input
61+
id="password"
62+
type="password"
63+
value={password}
64+
onChange={(e) => setPassword(e.target.value)}
65+
required
66+
/>
67+
</div>
68+
<Button type="submit" className="w-full">
69+
Log In
70+
</Button>
71+
</form>
72+
);
73+
};
74+
export default LoginForm;
75+
</assistant>
76+
77+
</example_1>
2378
`;
2479

2580
export async function POST(req: Request) {

‎app/page.tsx‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,18 @@ import {
2121
import { AnimatePresence, motion } from "framer-motion";
2222
import { FormEvent, useEffect, useState } from "react";
2323
import LoadingDots from "../components/loading-dots";
24+
import Hello from "@/components/Shadcn";
25+
import {
26+
button,
27+
Button,
28+
card,
29+
fullStyles,
30+
input,
31+
label,
32+
tailwindConfig,
33+
tsconfig,
34+
utils,
35+
} from "@/utils/Shadcn";
2436

2537
export default function Home() {
2638
let [status, setStatus] = useState<
@@ -334,7 +346,6 @@ export default function Home() {
334346
<button
335347
onClick={() => {
336348
location.reload();
337-
338349
// TODO: Cancel stream and reset this state
339350
// setMessages([]);
340351
// setStatus("initial");
@@ -367,28 +378,42 @@ export default function Home() {
367378
"https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
368379
],
369380
editorHeight: "80vh",
370-
showTabs: false,
381+
showTabs: true,
371382
}}
372383
files={{
373384
"App.tsx": generatedCode,
385+
"styles.css": fullStyles,
386+
"tailwind.config.ts": tailwindConfig,
387+
"tsconfig.json": tsconfig,
388+
"/lib/utils.ts": utils,
389+
"/components/ui/button.tsx": button,
390+
"/components/ui/card.tsx": card,
391+
"/components/ui/label.tsx": label,
392+
"/components/ui/input.tsx": input,
374393
"/public/index.html": `<!DOCTYPE html>
375-
<html lang="en">
376-
<head>
377-
<meta charset="UTF-8">
378-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
379-
<title>Document</title>
380-
<script src="https://cdn.tailwindcss.com"></script>
381-
</head>
382-
<body>
383-
<div id="root"></div>
384-
</body>
385-
</html>`,
394+
<html lang="en">
395+
<head>
396+
<meta charset="UTF-8">
397+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
398+
<title>Document</title>
399+
<script src="https://cdn.tailwindcss.com"></script>
400+
</head>
401+
<body>
402+
<div id="root"></div>
403+
</body>
404+
</html>`,
386405
}}
387406
template="react-ts"
388407
customSetup={{
389408
dependencies: {
390409
"lucide-react": "0.263.1",
391-
recharts: "latest",
410+
// "lucide-react": "^0.424.0",
411+
recharts: "2.12.7",
412+
"@radix-ui/react-label": "^2.1.0",
413+
"tailwind-merge": "latest",
414+
"@radix-ui/react-slot": "^1.1.0",
415+
"class-variance-authority": "^0.7.0",
416+
clsx: "^2.1.1",
392417
},
393418
}}
394419
/>

0 commit comments

Comments
 (0)