ComponentCraft AI

Describe a mood, a theme, or a feeling. Get a fully designed and coded web component in return.

\n\n

\n \n

Live Preview

\n \n

AI Rationale

HTML

CSS

\n\n\n\n`;\n}\n\nexport default async function (req: Request) {\n const url = new URL(req.url);\n\n if (req.method === \"POST\") {\n try {\n const body = await req.json();\n const mood = body.mood;\n\n if (!mood || typeof mood !== \"string\" || mood.trim().length === 0) {\n return new Response(\n JSON.stringify({ error: \"A valid mood description is required.\" }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n const openai = new OpenAI();\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: COMPONENT_GENERATOR_PROMPT },\n { role: \"user\", content: `User mood description: \"${mood}\"` },\n ],\n temperature: 0.7,\n response_format: { type: \"json_object\" },\n });\n\n const content = completion.choices[0].message.content;\n\n // Validate that the AI returned valid JSON with the expected keys\n try {\n const parsedContent = JSON.parse(content);\n if (\n !parsedContent.html || !parsedContent.css || !parsedContent.rationale\n ) {\n throw new Error(\"Missing required keys in AI response.\");\n }\n } catch (e) {\n console.error(\"AI response validation failed:\", e.message);\n console.error(\"Received content:\", content);\n throw new Error(\n \"AI returned a malformed response. Please try refining your request.\",\n );\n }\n\n return new Response(content, {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"ComponentCraft AI Error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message || \"An internal error occurred.\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Serve HTML for GET requests\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/realtime/Vibe/code/main.ts","extension","actionData","errors"]