/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import ReactDOM from "https://esm.sh/react-dom@18.2.0"; import { LiveProvider, LiveEditor, LiveError, LivePreview } from "https://esm.sh/react-live@4.1.0"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter@15.5.0"; import { atomDark } from "https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/styles/prism"; // Error Boundary Component class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } render() { if (this.state.hasError) { return (

Something went wrong.

Error Details

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

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

Failed to parse component. Please check the generated code.

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

Failed to generate component. Please try again.

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

React Component Generator

{generatedCode && (

Generated Code

{generatedCode}

Live Preview

{parsedComponent ? (

{React.createElement(parsedComponent)}

) : (

No component to preview

)}

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

Failed to generate component: ${error.message}

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

`, { headers: { "Content-Type": "text/html" } }); } if (typeof document !== "undefined") { client(); }

UI