AI Code Generator

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter"; import { tomorrow } from "https://esm.sh/react-syntax-highlighter/dist/esm/styles/prism"; // Updated LangChain-compatible imports import { OpenAI } from "https://esm.town/v/std/openai"; // Custom LangChain-like Workflow class CodeGenerationWorkflow { private openai: OpenAI; constructor() { this.openai = new OpenAI(); } private createPromptTemplate(template: string, inputVariables: string[]) { return { format: (inputs: Record) => { let formattedTemplate = template; inputVariables.forEach(variable => { formattedTemplate = formattedTemplate.replace(`{${variable}}`, inputs[variable]); }); return formattedTemplate; } }; } async generateBaseCode(prompt: string): Promise { const baseCodePrompt = this.createPromptTemplate(` You are an expert code generation AI. Generate clean, efficient TypeScript code for the following requirement: Requirement: {prompt} Provide a complete, production-ready implementation with best practices. `, ["prompt"]); const fullPrompt = baseCodePrompt.format({ prompt }); const completion = await this.openai.chat.completions.create({ messages: [{ role: "user", content: fullPrompt }], model: "gpt-4o-mini", max_tokens: 1500, temperature: 0.7 }); return completion.choices[0].message.content || "No code generated"; } async reviewCode(baseCode: string): Promise { const reviewPrompt = this.createPromptTemplate(` Review the following code and suggest improvements: {baseCode} Provide an enhanced version addressing: 1. Performance optimizations 2. Best practices 3. Potential security improvements 4. Code readability Return the improved code implementation. `, ["baseCode"]); const fullPrompt = reviewPrompt.format({ baseCode }); const completion = await this.openai.chat.completions.create({ messages: [{ role: "user", content: fullPrompt }], model: "gpt-4o-mini", max_tokens: 1500, temperature: 0.5 }); return completion.choices[0].message.content || baseCode; } async generateDocumentation(code: string): Promise { const docPrompt = this.createPromptTemplate(` Create comprehensive documentation for the following code: {code} Generate: - Detailed README.md - Inline code comments - Usage examples - Potential extension points `, ["code"]); const fullPrompt = docPrompt.format({ code }); const completion = await this.openai.chat.completions.create({ messages: [{ role: "user", content: fullPrompt }], model: "gpt-4o-mini", max_tokens: 1000, temperature: 0.3 }); return completion.choices[0].message.content || "No documentation generated"; } async runFullWorkflow(prompt: string): Promise<{ baseCode: string; reviewedCode: string; documentation: string; }> { const baseCode = await this.generateBaseCode(prompt); const reviewedCode = await this.reviewCode(baseCode); const documentation = await this.generateDocumentation(reviewedCode); return { baseCode, reviewedCode, documentation }; } } function App() { const [prompt, setPrompt] = useState(""); const [generationResult, setGenerationResult] = useState<{ baseCode: string; reviewedCode: string; documentation: string; } | null>(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setLoading(true); setError(null); try { const workflow = new CodeGenerationWorkflow(); const result = await workflow.runFullWorkflow(prompt); setGenerationResult(result); } catch (error) { console.error("Code generation error:", error); setError(error instanceof Error ? error.message : "An unknown error occurred"); } finally { setLoading(false); } } return (

{error && (

🚨 Error: {error}

)} {generationResult && (

🚀 Base Code

{generationResult.baseCode}

🔍 Reviewed Code

{generationResult.reviewedCode}

📄 Documentation

{generationResult.documentation}

)}

); } function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { return new Response( ` AI Code Generator

`, { headers: { "Content-Type": "text/html" } } ); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; background: #121212; color: #e0e0e0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } .prompt-form { display: flex; gap: 10px; margin-bottom: 20px; } .prompt-input { flex-grow: 1; padding: 10px; background: #1e1e1e; border: 1px solid #333; color: white; border-radius: 4px; } button { padding: 10px 20px; background: #4a4a4a; color: white; border: none; border-radius: 4px; cursor: pointer; } .generation-results { display: grid; gap: 20px; } .generation-step { background: #1e1e1e; border-radius: 8px; padding: 15px; } .performance { display: flex; gap: 15px; margin-bottom: 10px; color: #888; } .comments { color: #0f0; font-style: italic; } .error-message { background-color: #ff000022; color: #ff6b6b; padding: 10px; border-radius: 4px; margin-bottom: 20px; } `;

🤖 AI Code Generator

🚀 Base Code

🔍 Reviewed Code

📄 Documentation

lang_code