\n \n \n \n","label",[105,70],"pulls","branches","forks","envVars",{"_203":42,"_205":26},"connections",{"_203":26,"_204":26},"count","unfilledCount","emptyCount",{"_35":290,"_13":289,"_68":283,"_45":-5,"_37":38,"_189":42,"_190":112,"_39":291,"_41":26,"_71":257,"_192":-5,"_72":24,"_194":-5,"_223":292,"_17":293},{"_35":280,"_13":281,"_68":282,"_45":283,"_37":38,"_189":284,"_190":112,"_39":285,"_41":78,"_71":239,"_192":286,"_72":24,"_194":-5,"_223":287,"_17":288},{"_35":276,"_13":268,"_68":263,"_45":-5,"_37":38,"_189":42,"_190":112,"_39":277,"_41":26,"_71":257,"_192":-5,"_72":24,"_194":-5,"_223":278,"_17":279},{"_35":269,"_13":270,"_68":271,"_45":263,"_37":38,"_189":42,"_190":112,"_39":272,"_41":26,"_71":239,"_192":273,"_72":24,"_194":-5,"_223":274,"_17":275},{"_35":260,"_13":261,"_68":262,"_45":263,"_37":38,"_189":42,"_190":112,"_39":264,"_41":26,"_71":239,"_192":265,"_72":24,"_194":-5,"_223":266,"_17":267},{"_35":255,"_13":105,"_68":188,"_45":-5,"_37":38,"_189":42,"_190":112,"_39":256,"_41":26,"_71":257,"_192":-5,"_72":24,"_194":-5,"_223":258,"_17":259},{"_35":187,"_13":70,"_68":69,"_45":188,"_37":38,"_189":94,"_190":112,"_39":252,"_41":78,"_71":21,"_192":193,"_72":24,"_194":-5,"_223":253,"_17":254},{"_35":243,"_13":244,"_68":245,"_45":188,"_37":38,"_189":246,"_190":112,"_39":247,"_41":248,"_71":239,"_192":249,"_72":24,"_194":-5,"_223":250,"_17":251},{"_35":235,"_13":236,"_68":237,"_45":188,"_37":38,"_189":42,"_190":112,"_39":238,"_41":26,"_71":239,"_192":240,"_72":24,"_194":-5,"_223":241,"_17":242},{"_35":226,"_13":227,"_68":228,"_45":-5,"_37":38,"_189":229,"_190":112,"_39":230,"_41":231,"_71":21,"_192":232,"_72":24,"_194":-5,"_223":233,"_17":234},{"_35":217,"_13":218,"_68":110,"_45":-5,"_37":38,"_189":219,"_190":112,"_39":220,"_41":78,"_71":221,"_192":222,"_72":24,"_194":-5,"_223":224,"_17":225},"5fc170ce-e2a2-11f0-a6f1-42dde27851f2","main.tsx",16,["D",1766784746751],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { generateCode } from \"./backend/generate-code.ts\";\nimport { createTables } from \"./database/migrations.ts\";\nimport {\n createProject,\n getCode,\n getNextVersionNumber,\n insertVersion,\n} from \"./database/queries.ts\";\n\nawait createTables();\n\nexport default async function cerebras_coder(req: Request): Promise {\n if (req.method === \"POST\") {\n try {\n let { prompt, currentCode, versionHistory, projectId, model, apiKey } =\n await req.json();\n const { code, time, totalTokens } = await generateCode(\n prompt,\n currentCode,\n model,\n apiKey,\n );\n // If no version history exists, create a new project\n let versionNumber = 0;\n if (!projectId) {\n projectId = await createProject(prompt);\n } else {\n // get last version number for this project id\n versionNumber = await getNextVersionNumber(projectId);\n }\n\n await insertVersion(projectId, versionNumber, prompt, code);\n\n return new Response(\n JSON.stringify({\n code,\n projectId,\n versionNumber,\n performance: {\n tokensPerSecond: totalTokens / time,\n totalTokens,\n time,\n },\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.log(error);\n return new Response(\"Server Error\", { status: 500 });\n }\n }\n\n // output url in format /p/:project/v/:version\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/p/\")) {\n const [, , project, , version] = url.pathname.split(\"/\");\n const code = await getCode(project, version);\n if (!code) {\n return new Response(\"Not found\", { status: 404 });\n }\n return new Response(code as string, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n }\n\n if (url.pathname.startsWith(\"/public/\")) {\n try {\n return serveFile(url.pathname, import.meta.url);\n } catch (e) {\n console.error(e);\n return new Response(\"Not found\", { status: 404 });\n }\n }\n\n return serveFile(\"/public/index.html\", import.meta.url);\n}","children",[],[218],"44ea74ce-e2a4-11f0-8526-42dde27851f2","README.md","7449384e-4151-11f0-b6fd-76b3cceeab13",18,["D",1766785560710],2,"# Cerebras Coder\n\nAn AI code assistant powered by [Cerebras](https://cerebras.ai/inference) that generates fully functional web applications in seconds.\n\nInspired by Hassan's [Llama Coder](https://llamacoder.together.ai/).\n\n## Features\n\n- **Multiple Model Support**: Choose from three powerful AI models:\n - **Qwen 3 235B Instruct** (235B parameters, ~1400 tokens/s)\n - **Z.ai GLM 4.6** (357B parameters, ~1000 tokens/s)\n - **OpenAI GPT OSS** (120B parameters, ~3000 tokens/s)\n\n- **Flexible API Key Management**:\n - Use the default hosted API key (no setup required)\n - Or use your own personal Cerebras API key for private usage\n\n- **Instant Code Generation**: Turn your ideas into fully functional apps in less than a second\n\n- **Live Preview**: See your code come to life in real-time\n\n- **Version History**: Track and revert to previous versions of your code\n\n- **Share Your Projects**: Generate shareable links to your creations\n\n## Setup\n\n### Option 1: Use Default API Key (No Setup Required)\nSimply open the application and start coding! The default API key is already configured.\n\n### Option 2: Use Your Personal API Key\n\n1. Sign up for [Cerebras](https://cloud.cerebras.ai/)\n2. Get your Cerebras API Key\n3. In the application, click the \"Default API Key\" button in the header\n4. Select \"Personal API Key\" from the dropdown\n5. Enter your API key in the modal\n6. Your key will be used for the current session only\n\n**Note**: Personal API keys are stored only in browser memory and are forgotten when you close or refresh the page.\n\n### For Developers\n\nTo deploy with your own default API key:\n\n1. Save your Cerebras API key in your project environment variable called `CEREBRAS_API_KEY`\n2. The application will use this key by default\n\n## Usage\n\n1. **Select a Model**: Click the model dropdown in the header to choose your preferred AI model\n2. **Choose API Key Mode**: Select between \"Default API Key\" or \"Personal API Key\"\n3. **Enter Your Prompt**: Type what you want to build (e.g., \"Build me a calculator app\")\n4. **Generate Code**: Click the prompt button or press Enter\n5. **View & Edit**: See your code in the editor and preview it live\n6. **Iterate**: Make changes by entering new prompts\n7. **Share**: Click the Share button to get a link to your project\n\n## Model Comparison\n\n| Model | Parameters | Speed | Best For |\n|-------|-----------|-------|----------|\n| Qwen 3 235B Instruct | 235B | ~1400 tokens/s | Balanced performance |\n| Z.ai GLM 4.6 | 357B | ~1000 tokens/s | Complex reasoning |\n| OpenAI GPT OSS | 120B | ~3000 tokens/s | Fast generation |\n\n## Technology Stack\n\n- **Frontend**: React, TypeScript, Tailwind CSS\n- **Backend**: Val Town\n- **AI**: Cerebras Cloud SDK\n- **Code Highlighting**: react-syntax-highlighter\n\n## License\n\nThis project is open source. Feel free to fork and customize it for your needs!",[],[227],"f241036c-4147-11f0-9647-76b3cceeab13","starter-prompts.js","c85b44a8-1bac-4ec0-9860-fc1f04959bfc",["D",1749043771058],"script","export default [\n {\n \"prompt\": \"todo list app persisted in local storage, pretty\",\n \"title\": \"Todo App\",\n \"code\":\n \"\\n\\n\\n \\n \\n Task Master\\n \\n\\n\\n

\\n

Task Master

\\n Manage your tasks efficiently\\n

\\n

\\n \\n \\n

\\n

\\n Built on Cerebras Coder\\n

\\n

\\n\\n \\n\\n\",\n \"performance\": {\n \"tokensPerSecond\": 2298.56,\n \"totalTokens\": 1032,\n \"time\": 0.45,\n },\n },\n {\n \"prompt\": \"weather dashboard for nyc using open-meteo API for NYC with icons\",\n \"title\": \"Weather App\",\n \"code\":\n \"\\n\\n\\n \\n \\n NYC Weather\\n \\n \\n\\n\\n

\\n

NYC Weather

\\n

Humidity: %

\\n

Wind: mph

\\n \\n

\\n

\\n Built on Cerebras Coder\\n

\\n\\n \\n\\n\",\n \"performance\": {\n \"tokensPerSecond\": 3411.28,\n \"totalTokens\": 2172,\n \"time\": 0.64,\n },\n },\n {\n \"prompt\": \"two column interactive markdown editor with live preview and default text to explain markdown features\",\n \"title\": \"Markdown Editor\",\n \"code\":\n \"\\n\\n\\n \\n \\n \\n Markdown Editor\\n \\n\\n\\n

\\n

Markdown Editor

\\n

\\n \\n

\\n

Built on Cerebras Coder

\\n

\\n\\n \\n\\n\",\n \"performance\": {\n \"tokensPerSecond\": 4092.96,\n \"totalTokens\": 1677,\n \"time\": 0.41,\n },\n },\n];",[],[105,236],"0c35fd84-fd5b-11f0-9f4d-42dde27851f2","index.ts","c5e2799e-44ad-4e4f-9a68-40e082030bab",24,["D",1769722793706],9,"/** @jsxImportSource react */\nimport React, { useEffect, useState } from \"react\";\nimport { createRoot } from \"react-dom/client\";\n\n// These imports use ?external=react, so they will now correctly share the React instance above\nimport { PrismLight as SyntaxHighlighter } from \"https://esm.sh/react-syntax-highlighter@15.5.0?external=react\";\nimport jsx from \"https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/languages/prism/jsx?external=react\";\nimport python from \"https://esm.sh/react-syntax-highlighter@15.5.0/dist/esm/languages/prism/python?external=react\";\n\nimport STARTER_PROMPTS from \"./starter-prompts.js\";\n\n// Register the languages you need\nSyntaxHighlighter.registerLanguage(\"jsx\", jsx);\nSyntaxHighlighter.registerLanguage(\"python\", python);\n\n// random 4 prompts from STARTER_PROMPTS\nconst prompts = STARTER_PROMPTS.sort(() => Math.random() - 0.5).slice(0, 4);\n\ntype PromptItem = typeof prompts[number];\n\nconst MODELS = [\n {\n id: \"qwen-3-235b-a22b-instruct-2507\",\n name: \"Qwen 3 235B Instruct\",\n speed: \"~1400\",\n params: \"235B\",\n },\n { id: \"zai-glm-4.7\", name: \"Z.ai GLM 4.7\", speed: \"~1000\", params: \"357B\" },\n {\n id: \"gpt-oss-120b\",\n name: \"OpenAI GPT OSS\",\n speed: \"~3000\",\n params: \"120B\",\n },\n];\n\nconst PoweredBy = (\n { className, selectedModel }: {\n className?: string;\n selectedModel?: typeof MODELS[0];\n },\n) => (\n \n

\n Powered by {selectedModel?.name || \"Qwen-3-32B\"} on Cerebras\n

\n \n);\n\nfunction Hero({\n prompt,\n setPrompt,\n handleSubmit,\n handleStarterPromptClick,\n selectedModel,\n setSelectedModel,\n modelDropdownOpen,\n setModelDropdownOpen,\n apiKeyMode,\n setApiKeyMode,\n apiKeyDropdownOpen,\n setApiKeyDropdownOpen,\n setShowApiKeyModal,\n}: {\n prompt: string;\n setPrompt: React.Dispatch>;\n handleSubmit: (e: React.FormEvent) => void;\n handleStarterPromptClick: (promptItem: PromptItem) => void;\n selectedModel: typeof MODELS[0];\n setSelectedModel: React.Dispatch>;\n modelDropdownOpen: boolean;\n setModelDropdownOpen: React.Dispatch>;\n apiKeyMode: \"default\" | \"personal\";\n setApiKeyMode: React.Dispatch>;\n apiKeyDropdownOpen: boolean;\n setApiKeyDropdownOpen: React.Dispatch>;\n setShowApiKeyModal: React.Dispatch>;\n}) {\n const inIframe = window.self !== window.top;\n return (\n

\n setModelDropdownOpen(!modelDropdownOpen)}\n className=\"p-[1px] text-gray-400 bg-[linear-gradient(90deg,_#0EAEE9_0%,_#22C55E_29%,_#D948EF_59%,_#8B5CF6_100%)] hover:bg-[linear-gradient(180deg,_#0EAEE9_0%,_#22C55E_29%,_#D948EF_59%,_#8B5CF6_100%)] transition-all w-fit mx-auto rounded-full hover:text-gray-200\"\n >\n

\n Selected {selectedModel.name} on Cerebras\n \n \n \n

\n \n {modelDropdownOpen && (\n

\n {MODELS.map((model) => (\n {\n setSelectedModel(model);\n setModelDropdownOpen(false);\n }}\n className={`w-full text-left px-4 py-3 text-sm hover:bg-gray-800 transition-colors ${\n selectedModel.id === model.id\n ? \"bg-gray-800 text-white\"\n : \"text-gray-400\"\n }`}\n >\n

{model.name}

\n {model.params} • {model.speed} tokens/s\n

\n \n ))}\n

\n )}\n

\n setApiKeyDropdownOpen(!apiKeyDropdownOpen)}\n className=\"p-[1px] text-gray-400 bg-[linear-gradient(90deg,_#0EAEE9_0%,_#22C55E_29%,_#D948EF_59%,_#8B5CF6_100%)] hover:bg-[linear-gradient(180deg,_#0EAEE9_0%,_#22C55E_29%,_#D948EF_59%,_#8B5CF6_100%)] transition-all w-fit mx-auto rounded-full hover:text-gray-200\"\n >\n

\n \n {apiKeyMode === \"default\"\n ? \"Default API Key\"\n : \"Personal API Key\"}\n \n \n \n \n

\n \n {apiKeyDropdownOpen && (\n

\n {\n setApiKeyMode(\"default\");\n setApiKeyDropdownOpen(false);\n }}\n className={`w-full text-left px-4 py-3 text-sm hover:bg-gray-800 transition-colors ${\n apiKeyMode === \"default\"\n ? \"bg-gray-800 text-white\"\n : \"text-gray-400\"\n }`}\n >\n

Default API Key

\n Hosted by Townie\n

\n \n {\n setApiKeyMode(\"personal\");\n setApiKeyDropdownOpen(false);\n setShowApiKeyModal(true);\n }}\n className={`w-full text-left px-4 py-3 text-sm hover:bg-gray-800 transition-colors ${\n apiKeyMode === \"personal\"\n ? \"bg-gray-800 text-white\"\n : \"text-gray-400\"\n }`}\n >\n

Personal API Key

\n Use your own key\n

\n \n

\n )}\n

\n Dream it. Code it.
\n Instantly.\n

\n\n

\n Turn your ideas into fully functional apps in{\" \"}\n \n less than a second\n \n

\n\n \n setPrompt(e.target.value)}\n placeholder=\"Build me a calculator app...\"\n className=\"w-full h-[52px] rounded-full bg-black border border-[#353535] py-6 px-8 placeholder:bg-clip-text placeholder:text-transparent placeholder:opacity-50 placeholder:bg-[linear-gradient(90.138deg,_#FFFFFF_0%,_rgba(255,_255,_255,_36%)_100%)] focus:focus:outline focus:outline-offset-2 focus:outline-[var(--deepblue)] text-2xl placeholder:text-2xl\"\n />\n \n \n \n \n \n \n \n \n\n Prompt\n \n \n\n

\n {prompts.map((promptItem) => (\n handleStarterPromptClick(promptItem)}\n className=\"text-xs rounded-full border border-[#353535] text-[#aaa] p-1 px-2 whitespace-nowrap hover:cursor-pointer hover:bg-gray-900 hover:translate-y-[-1px] hover:text-white transition-all\"\n >\n {promptItem.title}\n \n ))}\n

\n );\n}\n\nfunction App() {\n const previewRef = React.useRef(null);\n const [prompt, setPrompt] = useState(\"\");\n const [projectId, setProjectId] = useState(null);\n const [projectVersion, setProjectVersion] = useState(null);\n const [shareModalOpen, setShareModalOpen] = useState(false);\n const [selectedModel, setSelectedModel] = useState(MODELS[0]);\n const [modelDropdownOpen, setModelDropdownOpen] = useState(false);\n const [apiKeyMode, setApiKeyMode] = useState<\"default\" | \"personal\">(\n \"default\",\n );\n const [apiKeyDropdownOpen, setApiKeyDropdownOpen] = useState(false);\n const [personalApiKey, setPersonalApiKey] = useState(\"\");\n const [showApiKeyModal, setShowApiKeyModal] = useState(false);\n\n const [iframeKey, setIframeKey] = useState(0);\n const inIframe = window.self !== window.top;\n\n const [code, setCode] = useState(\"\");\n const [viewingCode, setViewingCode] = useState(false);\n const [loading, setLoading] = useState(false);\n const [performance, setPerformance] = useState<\n {\n tokensPerSecond: number;\n totalTokens: number;\n time: number;\n }\n >({\n tokensPerSecond: 0,\n totalTokens: 0,\n time: 0,\n });\n\n const handleClipboard = async (str: string) => {\n await navigator.clipboard.writeText(str);\n Toastify({\n text: \"Copied to clipboard!\",\n position: \"center\",\n duration: 3000,\n style: {\n background: \"linear-gradient(to right, #00b09b, #96c93d)\",\n borderRadius: \"20px\",\n },\n }).showToast();\n };\n\n const handleRefresh = () => {\n setIframeKey((prevKey) => prevKey + 1);\n };\n\n const [versionHistory, setVersionHistory] = useState<{\n currentVersionIndex: number;\n versions: {\n code: string;\n prompt: string;\n timestamp: number;\n }[];\n }>({\n currentVersionIndex: 0,\n versions: [],\n });\n\n function handleStarterPromptClick(promptItem: typeof prompts[number]) {\n setLoading(true);\n setTimeout(() => handleSubmit(promptItem.prompt), 0);\n }\n\n async function handleSubmit(e: React.FormEvent | string) {\n if (typeof e !== \"string\") {\n e.preventDefault();\n }\n setLoading(true);\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n body: JSON.stringify({\n prompt: typeof e === \"string\" ? e : prompt,\n currentCode: code,\n projectId,\n model: selectedModel.id,\n apiKey: apiKeyMode === \"personal\" ? personalApiKey : undefined,\n }),\n headers: { \"Content-Type\": \"application/json\" },\n });\n if (!response.ok) {\n throw new Error(\"Generation Error: \" + await response.text());\n }\n\n const result = await response.json();\n\n setProjectId(result.projectId);\n setProjectVersion(result.versionNumber);\n setCode(result.code);\n setPerformance(result.performance);\n setVersionHistory({\n currentVersionIndex: versionHistory.versions.length,\n versions: [...versionHistory.versions, {\n code: result.code,\n prompt,\n timestamp: Date.now(),\n }],\n });\n setPrompt(\"\");\n } catch (error) {\n Toastify({\n text:\n \"We may have hit our Cerebras Usage limits. Try again later or fork this and use your own API key.\",\n position: \"center\",\n duration: 3000,\n style: {\n background: \"linear-gradient(to right, #ff5f6d, #ffc371)\",\n borderRadius: \"20px\",\n },\n }).showToast();\n console.error(error);\n } finally {\n setLoading(false);\n }\n }\n\n function handleVersionChange(direction: \"back\" | \"forward\") {\n const { currentVersionIndex, versions } = versionHistory;\n if (direction === \"back\" && currentVersionIndex > 0) {\n const newIndex = currentVersionIndex - 1;\n setCode(versions[newIndex].code);\n setVersionHistory((prev) => ({\n ...prev,\n currentVersionIndex: newIndex,\n }));\n } else if (\n direction === \"forward\" && currentVersionIndex < versions.length - 1\n ) {\n const newIndex = currentVersionIndex + 1;\n setCode(versions[newIndex].code);\n setVersionHistory((prev) => ({\n ...prev,\n currentVersionIndex: newIndex,\n }));\n }\n }\n\n const projectURL = `${window.location.origin}/p/${projectId}`;\n const versionURL =\n `${window.location.origin}/p/${projectId}/v/${projectVersion}`;\n\n return (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n\n Cerebras Coder\n \n\n

\n Selected {selectedModel.name} on Cerebras\n \n \n \n

\n \n {modelDropdownOpen && (\n

{model.name}

\n {model.params} • {model.speed} tokens/s\n

\n \n ))}\n

\n )}\n

\n \n {apiKeyMode === \"default\"\n ? \"Default API Key\"\n : \"Personal API Key\"}\n \n \n \n \n

\n \n {apiKeyDropdownOpen && (\n

Default API Key

\n Hosted by Townie\n

Personal API Key

\n Use your own key\n

\n \n

\n )}\n

\n\n \n \n \n \n Fork on{\" \"}\n \n \n \n \n

\n\n {showApiKeyModal && (\n

\n Enter Your Personal API Key\n

\n setShowApiKeyModal(false)}\n >\n \n \n \n \n

\n Your API key will be used for this session only and will be\n forgotten when you close the browser window.\n

\n setPersonalApiKey(e.target.value)}\n placeholder=\"Enter your Cerebras API key...\"\n className=\"w-full h-12 rounded-lg bg-black border border-[#353535] px-4 focus:outline focus:outline-2 focus:outline-[var(--deepblue)] text-white\"\n />\n

\n {\n setShowApiKeyModal(false);\n setApiKeyMode(\"default\");\n }}\n className=\"px-6 py-2 rounded-lg border border-gray-600 text-gray-400 hover:bg-gray-800 transition-colors\"\n >\n Cancel\n \n {\n if (personalApiKey.trim()) {\n setShowApiKeyModal(false);\n }\n }}\n disabled={!personalApiKey.trim()}\n className=\"px-6 py-2 rounded-lg bg-white text-black font-medium hover:bg-opacity-90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n Save Key\n \n

\n )}\n\n {shareModalOpen && (\n

Share your project

\n setShareModalOpen(false)}\n >\n \n \n \n \n

Latest Version

\n This is a live link to your project. It will change if you\n make more edits.\n

\n handleClipboard(projectURL)}\n >\n \n {projectURL}\n \n

\n \n

\n Pinned version (`\n #{projectVersion}\n` )\n

\n This is a permalink to v{projectVersion}. It won't change if\n you make more edits.\n

\n handleClipboard(versionURL)}\n >\n \n {versionURL}\n \n

\n \n

\n \n )}\n\n {code ? undefined : (\n

\n \n

\n )}\n\n {code && (\n \n \n setPrompt(e.target.value)}\n className=\"w-full h-[52px] rounded-full bg-black border-2 border-[#e2e2e2] py-6 px-8 focus:focus:outline focus:outline-[var(--deepblue)] text-2xl placeholder:text-2xl\"\n />\n \n \n

\n Code\n handleClipboard(code)}\n className=\"size-7 flex items-center justify-center p-1 rounded-full bg-[#1b1b1b] hover:bg-gray-800\"\n >\n \n Copy code\n \n

\n \n {code}\n \n

\n\n

\n Preview\n

\n \n \n \n \n \n \n \n \n \n \n \n \n\n Refresh\n \n \n \n \n \n \n \n \n \n setShareModalOpen(true)}\n className=\"bg-white h-8 text-black font-medium flex items-center gap-1 shadow-button px-4 py-2 rounded-full hover:cursor-pointer hover:bg-opacity-90\"\n >\n \n \n \n\n Share\n \n

\n \n \n \n

\n handleVersionChange(\"back\")}\n disabled={versionHistory.currentVersionIndex === 0}\n >\n ←\n \n Version: {versionHistory.currentVersionIndex + 1} /{\" \"}\n {versionHistory.versions.length}\n handleVersionChange(\"forward\")}\n disabled={versionHistory.currentVersionIndex ===\n versionHistory.versions.length - 1}\n >\n →\n \n

\n \n \n \n \n \n

\n {performance.tokensPerSecond.toFixed(2)}{\" \"}\n tokens\n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n

\n {performance.totalTokens} token/s\n

\n\n

\n \n \n \n \n \n \n \n \n \n\n

\n {performance.time.toFixed(2)}s\n

\n \n )}\n\n \n \n );\n}\n\nconst valURL = \"https://www.val.town/x/stevekrouse/cerebras_coder\";\n\nconst ValTownSVG = ({ color }: { color?: string } = { color: \"white\" }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n);\n\nconst CopyIcon = () => (\n \n \n \n \n \n \n \n \n \n \n);\n\nfunction client() {\n const path = window.location.pathname;\n const root = createRoot(document.getElementById(\"root\")!);\n\n root.render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}",[],[105,244],["D",1769723064794],[],[105,70],"f24110fa-4147-11f0-9647-76b3cceeab13",["D",1749043771058],"directory",[212,213,214],[105],"f240ab9c-4147-11f0-9647-76b3cceeab13","queries.ts","ad829abb-d282-4be0-88a8-490ae2c8af92","881835ee-843d-433c-af12-980182eca66f",["D",1749043771058],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { ITERATIONS_TABLE, KEY, PROJECTS_TABLE, SCHEMA_VERSION } from \"./migrations.ts\";\n\nexport async function createProject(prompt: string) {\n const projectResult = await sqlite.execute(\n `INSERT INTO ${PROJECTS_TABLE} (initial_prompt) VALUES (?)`,\n [prompt],\n );\n const projectId = projectResult.lastInsertRowid as unknown as number;\n return projectId;\n}\n\nexport async function getNextVersionNumber(projectId: number) {\n const data = await sqlite.execute(\n `SELECT version_number FROM ${ITERATIONS_TABLE}\n WHERE project_id = ? ORDER BY version_number DESC LIMIT 1`,\n [projectId],\n );\n const currentVersion = data.rows[0]?.version_number as unknown as number || 0;\n return currentVersion + 1;\n}\n\nexport async function insertVersion(projectId: number, versionNumber: number, prompt: string, code: string) {\n await sqlite.execute(\n `INSERT INTO ${ITERATIONS_TABLE} \n (project_id, version_number, prompt, code) VALUES (?, ?, ?, ?)`,\n [projectId, versionNumber, prompt, code],\n );\n}\n\nexport async function getCodeInner(table: string, project: string, version?: string) {\n let data;\n if (version === undefined) {\n data = await sqlite.execute(\n `SELECT code FROM ${table}\n WHERE project_id = ?\n ORDER BY version_number desc\n LIMIT 1`,\n [parseInt(project)],\n );\n } else {\n data = await sqlite.execute(\n `SELECT code FROM ${table}\n WHERE project_id = ? AND version_number = ?\n LIMIT 1`,\n [parseInt(project), parseInt(version)],\n );\n }\n return data.rows[0]?.code;\n}\n\nexport async function getCode(project: string, version?: string) {\n // try to get code in the new table partition first\n const code = await getCodeInner(ITERATIONS_TABLE, project, version);\n return code ?? await getCodeInner(`${KEY}_iterations_${SCHEMA_VERSION}`, project, version);\n}",[],[268,261],"database","f240a944-4147-11f0-9647-76b3cceeab13","migrations.ts","cafb77f8-ab47-4d0e-8d53-8c587967eb8c",["D",1749043771058],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const KEY = \"cerebras_coder2\";\nexport const SCHEMA_VERSION = 5;\n\nexport const PROJECTS_TABLE = \"cerbras_coder_projects\";\nexport const ITERATIONS_TABLE = \"cerebras_coder_iterations\";\n\nexport async function createTables() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${PROJECTS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n initial_prompt TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${ITERATIONS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n project_id INTEGER NOT NULL,\n version_number INTEGER NOT NULL,\n prompt TEXT NOT NULL,\n code TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY(project_id) REFERENCES ${PROJECTS_TABLE}(id)\n )\n `);\n}",[],[268,270],"f240b43e-4147-11f0-9647-76b3cceeab13",["D",1749043771058],[209,210],[268],"4ad8f862-e2a2-11f0-acd3-42dde27851f2","generate-code.ts","a0d6bff4-3c85-4347-af7a-21b061ce9aec","fade4f9c-5cfa-4a6d-a8cd-8f7d70897b6c",15,["D",1766784711673],"import Cerebras from \"https://esm.sh/@cerebras/cerebras_cloud_sdk\";\nimport STARTER_PROMPTS from \"../public/starter-prompts.js\";\n\nfunction extractCodeFromFence(text: string): string {\n const htmlMatch = text.match(/```html\\n([\\s\\S]*?)\\n```/);\n return htmlMatch ? htmlMatch[1].trim() : text;\n}\n\nfunction filterThinkingTokens(text: string): string {\n // Find the last occurrence of \n const lastThinkEndIndex = text.lastIndexOf(\"\");\n\n if (lastThinkEndIndex === -1) {\n // No found, return the full text\n return text;\n }\n\n // Return everything after the last token\n return text.substring(lastThinkEndIndex + \"\".length).trim();\n}\n\nexport async function generateCode(\n prompt: string,\n currentCode: string,\n model?: string,\n apiKey?: string,\n) {\n const starterPrompt = STARTER_PROMPTS.find((p) => p.prompt === prompt);\n if (starterPrompt) {\n return {\n code: starterPrompt.code,\n time: starterPrompt.performance.time,\n totalTokens: starterPrompt.performance.totalTokens,\n };\n } else {\n const client = new Cerebras({\n apiKey: apiKey || Deno.env.get(\"CEREBRAS_API_KEY\"),\n });\n const completion = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `You are an advanced AI coding assistant that generates websites.\n Include all necessary HTML, CSS, and JavaScript in a single complete HTML file.\n Avoid use of alert or input. Make yourself a modal if you need it.\n Unless otherwise specified, use a UI libray. Be sure to install it via CDN.\n Make the app look like a polished, pretty, full website.\n You can use and tags to work through your reasoning and planning.\n After your thinking, wrap your final code in a single \\`\\`\\`html code fence.\n Do NOT explain how your code works or how to run.\n Keep the chatter to an absolute minimum.`,\n },\n currentCode\n ? {\n role: \"system\",\n content:\n `Current code to modify:\\n\\`\\`\\`html\\n${currentCode}\\n\\`\\`\\``,\n }\n : undefined,\n {\n role: \"user\",\n content: prompt,\n },\n ].filter(Boolean),\n model: model || \"qwen-3-32b\",\n });\n // First filter out thinking tokens, then extract code from fence\n const filteredContent = filterThinkingTokens(\n completion.choices[0].message.content,\n );\n return {\n code: extractCodeFromFence(filteredContent),\n time: completion.time_info.completion_time,\n totalTokens: completion.usage?.completion_tokens || 1,\n };\n }\n}",[],[289,281],"backend","f240a6ec-4147-11f0-9647-76b3cceeab13",["D",1749043771058],[207],[289],["D",1749043771058],["D",1789530642963],{"_11":12,"_153":75},{"_11":12,"_149":-5,"_74":75,"_30":73,"_150":151,"_152":24},{"_41":94,"_13":16,"_35":38,"_138":101,"_139":65,"_140":141,"_142":105,"_143":144,"_145":146,"_147":14,"_148":12},"ctx",{"_54":-5,"_174":332,"_333":334,"_335":336,"_337":24,"_338":24,"_339":24,"_340":112,"_341":-5,"_342":-7,"_343":-7,"_344":26,"_345":24,"_346":24,"_347":-5,"_348":24,"_349":24,"_350":24,"_351":-5},"ENV",{"_303":304,"_305":306,"_307":16,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Task Master

NYC Weather

Markdown Editor

\n Dream it. Code it. \n Instantly.\n

\n Enter Your Personal API Key\n

Share your project

Latest Version

\n Pinned version (\n #{projectVersion}\n )\n

\n Dream it. Code it.
\n Instantly.\n

\n Pinned version (`\n #{projectVersion}\n` )\n

History · index.html