Something went wrong.

Error Details

\n {this.state.error && this.state.error.toString()}\n

\n );\n }\n\n return this.props.children;\n }\n}\n\nfunction ComponentGenerator() {\n const [prompt, setPrompt] = useState(\"\");\n const [generatedCode, setGeneratedCode] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [parsedComponent, setParsedComponent] = useState(null);\n\n const generateComponent = async (e: React.FormEvent) => {\n e.preventDefault();\n setIsLoading(true);\n setParsedComponent(null);\n\n try {\n const response = await fetch(\"/generate-component\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt })\n });\n\n if (!response.ok) {\n throw new Error(\"Component generation failed\");\n }\n\n const { code } = await response.json();\n setGeneratedCode(code);\n\n // Attempt to parse and create the component\n try {\n // eslint-disable-next-line no-new-func\n const ComponentFunc = new Function('React', `return (${code})`)();\n setParsedComponent(() => ComponentFunc);\n } catch (parseError) {\n console.error(\"Component parsing error:\", parseError);\n setGeneratedCode(`// Error parsing component\nconst ErrorComponent = () => (\n

\n Failed to parse component. Please check the generated code.\n

\n)`);\n }\n } catch (error) {\n console.error(\"Error generating component:\", error);\n setGeneratedCode(`// Error generating component\nconst ErrorComponent = () => (\n

\n Failed to generate component. Please try again.\n

\n)`);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleCopyCode = () => {\n navigator.clipboard.writeText(generatedCode);\n alert(\"Code copied to clipboard!\");\n };\n\n return (\n

\n React Component Generator\n

\n \n \n\n {generatedCode && (\n

Generated Code

\n \n

\n \n {generatedCode}\n \n

\n \n

Live Preview

\n \n {parsedComponent ? (\n

\n {React.createElement(parsedComponent)}\n

\n ) : (\n

\n No component to preview\n

\n )}\n \n

\n )}\n

\n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) {\n ReactDOM.createRoot(root).render(\n \n \n \n );\n }\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate-component\") {\n const { prompt } = await request.json();\n\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const response = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"system\",\n content: `You are an expert React component generator. \n Generate a complete, functional React component based on the user's description.\n - Use modern React with functional components and hooks\n - Include necessary imports (import React from 'react')\n - Provide a fully working component\n - Use inline styles or tailwind if styling is needed\n - Handle basic interactions and state management\n - Ensure the component is self-contained and renders correctly\n - Return ONLY the component function, not the full file\n - Wrap the function in parentheses () => { ... }`\n },\n {\n role: \"user\",\n content: prompt\n }\n ],\n max_tokens: 1000\n });\n\n const generatedCode = response.choices[0].message.content.trim();\n\n return new Response(JSON.stringify({ code: generatedCode }), {\n headers: { \"Content-Type\": \"application/json\" }\n });\n } catch (error) {\n return new Response(JSON.stringify({ \n code: `() => {\n return (\n

\n Failed to generate component: ${error.message}\n

\n );\n}` \n }), { \n status: 500,\n headers: { \"Content-Type\": \"application/json\" }\n });\n }\n }\n\n return new Response(`\n \n \n \n React Component Generator\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}",[],[175],"files",[153,173],"counts",{"_186":32,"_187":161,"_188":32,"_189":190},"pulls","branches","forks","envVars",{"_191":32,"_192":32},"count","emptyCount","contents",[195,198],{"_102":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":108,"_104":196,"_99":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_98":197},["D",1737403116220],[155],{"_102":174,"_95":175,"_156":115,"_158":-5,"_159":138,"_160":137,"_162":108,"_104":199,"_99":177,"_164":178,"_166":179,"_168":22,"_169":-5,"_98":200},["D",1737403377379],[175],"upstreamProject",{"_102":145,"_95":203,"_111":204,"_112":-5,"_109":110,"_23":205},"cerebras_coder","An AI code assistant powered by Cerebras inference",{"_93":206,"_130":207},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_102":141,"_104":210,"_211":212,"_95":43,"_139":145,"_99":213,"_140":-5,"_142":-5,"_214":215,"_106":-5,"_150":22,"_109":110,"_149":206,"_16":147,"_148":203},["D",1744820713851],"updatedAt",["D",1754089495761],278,"lockfileKey","1755533807419-esm.town_v_stevekrouse_cerebras_coder@278-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":222,"_189":227},{"_102":103,"_95":96,"_104":223,"_106":-5,"_107":108,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":108,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":224,"_132":225,"_135":226,"_150":22},["D",1746279002028],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":32,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[],"actionData","errors"]

gokulnpc

UI

Environment variables