Skip to content

Commit 2b6ef57

Browse files
NutlopeNutlope
committed
trying somehting
1 parent 7de803e commit 2b6ef57

3 files changed

Lines changed: 137 additions & 48 deletions

File tree

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,24 @@
2222
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

25-
## Future Tasks
25+
## Actively working on
2626

2727
- [ ] Make it generate more consistent apps by only importing from a component library like shadcn
2828
- [x] Partially working
2929
- [x] Need to figure out a way to use the @
3030
- [x] Need to import all the CSS stuff (main CSS file + tailwind css file)
3131
- [x] Need to add in all the shadcn components
3232
- [ ] Test properly and see how it goes
33-
- [ ] A/B test a way to feed in shadcn docs so its fully up to date on available components
34-
- [ ] Look into a way to export the app or deploy it in a single click – try two things
33+
- [ ] Look into a way to export the app or deploy it in a single click – try two things:
3534
- [ ] 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
3635
- [ ] The non-codesandbox way where i try to do it myself with a dynamic route by doing some hashing
36+
37+
## Future Tasks
38+
3739
- [ ] New route for updateCode that only sends the latest generated code + the modify request
40+
- [ ] A/B test a way to feed in shadcn docs so its fully up to date on available components
41+
- [ ] Could be nice to show a "featured apps" sections on the site like artifactbin.com
42+
- [ ] Add dark mode
3843
- [ ] Add a bring your own key version in case traffic gets too high
3944
- [ ] Save previous versions so people can go back and forth between the generated ones
4045
- [ ] Support different kinds of apps/languages & scripts with Python, maybe w/ E2B

‎app/api/generateCode/route.ts‎

Lines changed: 128 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,65 +16,149 @@ You are an expert frontend React engineer.
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} />\`
1818
- 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';\`.
19+
- The assistant can use prebuilt components from the \`shadcn\` library if needed, like: \`import { Alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert';\` and \`import { Button } from '@/components/ui/button';\`. Here are the acceptable list of components you can import:
20+
- \`@/components/ui/alert\`
21+
- \`@/components/ui/accordion\`
22+
- \`@/components/ui/avatar\`
23+
- \`@/components/ui/badge\`
24+
- \`@/components/ui/button\`
25+
- \`@/components/ui/card\`
26+
- \`@/components/ui/checkbox\`
27+
- \`@/components/ui/collapse\`
28+
- \`@/components/ui/context-menu\`
29+
- \`@/components/ui/dialog\`
30+
- \`@/components/ui/dropdown-menu\`
31+
- \`@/components/ui/input\`
32+
- \`@/components/ui/label\`
33+
- \`@/components/ui/menubar\`
34+
- \`@/components/ui/navigation-menu\`
35+
- \`@/components/ui/popover\`
36+
- \`@/components/ui/progress\`
37+
- \`@/components/ui/radio-group\`
38+
- \`@/components/ui/scroll-area\`
39+
- \`@/components/ui/select\`
40+
- \`@/components/ui/separator\`
41+
- \`@/components/ui/sheet\`
42+
- \`@/components/ui/skeleton\`
43+
- \`@/components/ui/slider\`
44+
- \`@/components/ui/switch\`
45+
- \`@/components/ui/tabs\`
46+
- \`@/components/ui/textarea\`
47+
- \`@/components/ui/toast\`
48+
- \`@/components/ui/toggle\`
49+
- \`@/components/ui/tooltip\`
2050
- NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
21-
- Do not make fetch calls to other websites in the code. Just use mock data locally.
51+
- Always add a little padding to components to make them look nicer
52+
- Use a consistent color palette for all the components that compliment each other
53+
- Do not make fetch calls to other websites in your code. Just use mock data locally.
2254
- 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" />\`
2355
- 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 \`\`\`.
2456
2557
Here is an example:
2658
27-
<example_1>
28-
2959
<user>
30-
Create a login form
60+
Make a quiz app about the olympics
3161
</user>
3262
3363
<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 });
64+
import React, { useState } from "react";
65+
import { Button } from "@/components/ui/button";
66+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
67+
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
68+
import { Label } from "@/components/ui/label";
69+
70+
interface Question {
71+
question: string;
72+
options: string[];
73+
answer: string;
74+
}
75+
76+
const questions: Question[] = [
77+
{
78+
question: "What is the Olympic motto?",
79+
options: ["Citius, Altius, Fortius", "Faster, Higher, Stronger", "United We Stand", "Friendship, Unity, Progress"],
80+
answer: "Citius, Altius, Fortius"
81+
},
82+
{
83+
question: "Which city hosted the first modern Olympic Games?",
84+
options: ["Athens", "Paris", "London", "Berlin"],
85+
answer: "Athens"
86+
},
87+
{
88+
question: "What is the name of the Olympic symbol?",
89+
options: ["The Olympic Rings", "The Olympic Torch", "The Olympic Flag", "The Olympic Oath"],
90+
answer: "The Olympic Rings"
91+
}
92+
];
93+
94+
const QuizApp = () => {
95+
const [currentQuestion, setCurrentQuestion] = useState(0);
96+
const [score, setScore] = useState(0);
97+
const [selectedOption, setSelectedOption] = useState("");
98+
const [quizCompleted, setQuizCompleted] = useState(false);
99+
100+
const handleNextQuestion = () => {
101+
if (selectedOption === questions[currentQuestion].answer) {
102+
setScore(score + 1);
103+
}
104+
105+
if (currentQuestion < questions.length - 1) {
106+
setCurrentQuestion(currentQuestion + 1);
107+
setSelectedOption("");
108+
} else {
109+
setQuizCompleted(true);
110+
}
45111
};
112+
113+
const handleSelectOption = (value: string) => {
114+
setSelectedOption(value);
115+
};
116+
117+
const handleRestartQuiz = () => {
118+
setCurrentQuestion(0);
119+
setScore(0);
120+
setSelectedOption("");
121+
setQuizCompleted(false);
122+
};
123+
46124
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>
125+
<div className="p-4 max-w-md mx-auto">
126+
<Card>
127+
<CardHeader>
128+
<CardTitle>Olympic Quiz</CardTitle>
129+
</CardHeader>
130+
<CardContent>
131+
{!quizCompleted ? (
132+
<>
133+
<p className="text-sm mb-4">Test your knowledge of the Olympics!</p>
134+
<p className="text-lg font-bold mb-2">{questions[currentQuestion].question}</p>
135+
<RadioGroup value={selectedOption} onValueChange={handleSelectOption} className="space-y-2">
136+
{questions[currentQuestion].options.map((option, index) => (
137+
<div key={index} className="flex items-center space-x-2">
138+
<RadioGroupItem value={option} id={\`option-\${index}\`} />
139+
<Label htmlFor={\`option-\${index}\`}>{option}</Label>
140+
</div>
141+
))}
142+
</RadioGroup>
143+
<Button className="mt-4 w-full" onClick={handleNextQuestion} disabled={!selectedOption}>
144+
{currentQuestion === questions.length - 1 ? "Finish Quiz" : "Next Question"}
145+
</Button>
146+
</>
147+
) : (
148+
<>
149+
<p className="text-lg font-bold mb-2">Quiz Complete!</p>
150+
<p className="text-sm mb-4">Your final score is {score} out of {questions.length}.</p>
151+
<Button className="mt-4 w-full" onClick={handleRestartQuiz}>Start Again</Button>
152+
</>
153+
)}
154+
</CardContent>
155+
</Card>
156+
</div>
72157
);
73158
};
74-
export default LoginForm;
75-
</assistant>
76159
77-
</example_1>
160+
export default QuizApp;
161+
</assistant>
78162
`;
79163

80164
export async function POST(req: Request) {

‎app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -413,7 +413,7 @@ export default function Home() {
413413
],
414414
wrapContent: false,
415415
editorHeight: "80vh",
416-
showTabs: true,
416+
showTabs: false,
417417
}}
418418
files={{
419419
"App.tsx": generatedCode,

0 commit comments

Comments
 (0)