\n Powered by Llama3.3-70B on Cerebras\n

\n \n);\n\nfunction Hero({\n prompt,\n setPrompt,\n handleSubmit,\n handleStarterPromptClick,\n}: {\n prompt: string;\n setPrompt: React.Dispatch>;\n handleSubmit: (e: React.FormEvent) => void;\n handleStarterPromptClick: (promptItem: PromptItem) => void;\n}) {\n const inIframe = window.self !== window.top;\n return (\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\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 }),\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: \"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 (direction === \"forward\" && currentVersionIndex < versions.length - 1) {\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 = `${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\n \n \n \n \n Fork on{\" \"}\n \n \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 make more edits.\n

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

\n \n

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

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

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

\n \n

\n \n )}\n\n {code\n ? undefined\n : (\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 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 \n Version: {versionHistory.currentVersionIndex + 1} / {versionHistory.versions.length}\n handleVersionChange(\"forward\")}\n disabled={versionHistory.currentVersionIndex === versionHistory.versions.length - 1}\n >\n →\n \n

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

\n {performance.tokensPerSecond.toFixed(2)} 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}",[],[112,206],{"_105":213,"_97":214,"_151":215,"_153":201,"_154":137,"_155":156,"_157":119,"_107":216,"_102":33,"_159":217,"_161":218,"_162":27,"_163":-5,"_164":219,"_100":220},"6e44b90c-f68b-11ef-a5d5-569c3dd06744","index.html","feec5f58-383e-4937-94fc-2de762ece2a8",["D",1740826418208],"file","\n \n \n \n \n CerebrasCoder\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n

\n \n \n \n",[],[112,214],{"_105":222,"_97":223,"_151":224,"_153":201,"_154":137,"_155":156,"_157":119,"_107":225,"_102":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":227,"_100":228},"6e44bccc-f68b-11ef-a5d5-569c3dd06744","starter-prompts.js","2b570124-030f-4f2e-a282-9530f9caf525",["D",1740826418208],"export default [\n {\n \"prompt\": \"todo list app persisted in local storage, pretty\",\n \"title\": \"Todo App\",\n \"code\": \"\\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 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 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]",[],[112,223],[112],{"_105":231,"_97":232,"_151":233,"_153":-5,"_154":137,"_155":234,"_157":119,"_107":235,"_102":236,"_159":237,"_161":238,"_162":27,"_163":-5,"_164":239,"_100":240},"4ada6448-f68c-11ef-b9b5-569c3dd06744","Calculator","82254022-f68b-11ef-b099-569c3dd06744",9,["D",1740826788336],7,"http","\n\n\n \n \n Time App\n \n\n\n

Time App

\n Your time management companion\n

Timer

\n \n \n \n \n

00:00

Stopwatch

\n \n \n \n

00:00:00

\n Built on Cerebras Coder\n

\n\n \n\n",[],[232],{"_105":242,"_97":243,"_151":244,"_153":-5,"_154":137,"_155":136,"_157":119,"_107":245,"_102":246,"_159":237,"_161":247,"_162":27,"_163":-5,"_164":248,"_100":249},"18382686-f68e-11ef-997c-569c3dd06744","Call","f0fd2658-f68c-11ef-ba08-569c3dd06744",["D",1740827562379],3,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { renderToString } from \"npm:react-dom@18.2.0/server\";\n\nexport default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}\n\n\n \n \n Calendar App\n \n\n\n

Calendar App

\n Your calendar companion\n

\n \n \n

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

Add Event

\n \n \n \n

Events

\n \n

\n\n \n\n",[],[243],{"_105":251,"_97":252,"_151":253,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":254,"_102":33,"_159":217,"_161":255,"_162":27,"_163":-5,"_164":256,"_100":257},"6e44cc26-f68b-11ef-a5d5-569c3dd06744","README.md","50bf8562-ff93-4078-a491-15860f4a7e6b",["D",1740826418208],"# cerebras_coder\n\nThis is an AI code assistant powered by [Cerebras](https://cerebras.ai/inference), running llama3.3-70b.\n\nInspired by Hassan's [Llama Coder](https://llamacoder.together.ai/).\n\n# Setup\n\n1. Sign up for [Cerebras](https://cloud.cerebras.ai/)\n2. Get a Cerebras API Key\n3. Save it in your project env variable called `CEREBRAS_API_KEY`",[],[252],{"_105":259,"_97":206,"_151":117,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":260,"_102":33,"_159":237,"_161":261,"_162":27,"_163":-5,"_164":262,"_100":263},"6e44cd70-f68b-11ef-a5d5-569c3dd06744",["D",1740826418208],"import { generateCode } from \"./backend/generate-code\";\nimport { createTables } from \"./database/migrations\";\nimport { createProject, getCode, getNextVersionNumber, insertVersion } from \"./database/queries\";\n\nasync function servePublicFile(path: string): Promise {\n const url = new URL(\"./public/\" + path, import.meta.url);\n const text = await (await fetch(url, {\n headers: {\n \"User-Agent\": \"\", // to transpile TS to JS\n },\n })).text();\n const contentType = path.endsWith(\".html\") ? \"text/html\" : \"text/javascript\";\n return new Response(text, {\n headers: {\n \"Content-Type\": contentType,\n },\n });\n}\n\nawait createTables();\n\nexport default async function cerebras_coder(req: Request): Promise {\n if (req.method === \"POST\") {\n let { prompt, currentCode, versionHistory, projectId } = await req.json();\n\n const { code, time, totalTokens } = await generateCode(prompt, currentCode);\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 }\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 return servePublicFile(url.pathname.replace(\"/public/\", \"./\"));\n }\n\n return servePublicFile(\"index.html\");\n}",[],[206],"files",[148,166,176,182,190,199,204,212,221,230,241,250,258],"counts",{"_268":33,"_269":156,"_270":33,"_271":156},"pulls","branches","forks","envVars","contents",[],{"_105":205,"_97":206,"_151":207,"_153":201,"_154":137,"_155":156,"_157":119,"_107":275,"_102":33,"_159":171,"_161":209,"_162":27,"_163":-5,"_100":276},["D",1740826418208],[112,206],"upstream",{"_105":279,"_97":280,"_113":281,"_114":-5,"_111":112,"_21":282},"f5b9c1c0-eae7-11ef-9d6a-e6cdfca9ef9f","cerebras_coder_archived","Archived cerebas_coder",{"_95":283,"_132":284},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_95":96,"_97":98,"_99":43,"_102":-7,"_100":101,"_103":289,"_146":293,"_264":333,"_217":334,"_272":336,"_277":337,"_346":27,"_347":-5},{"_105":106,"_97":98,"_107":290,"_109":-5,"_110":27,"_111":112,"_113":-5,"_114":-5,"_12":115,"_116":117,"_118":119,"_120":-5,"_121":33,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":291,"_134":292},["D",1740826418208],{"_95":96,"_132":133},{"_102":136,"_97":43,"_105":137,"_138":106,"_139":140,"_141":142,"_143":112,"_144":145},[294,300,309,321,324,327,330],{"_105":149,"_97":150,"_151":152,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":158,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":295,"_100":299},[296],{"_105":167,"_97":168,"_151":169,"_153":152,"_154":137,"_155":156,"_157":119,"_107":170,"_102":33,"_159":171,"_161":172,"_162":27,"_163":-5,"_164":297,"_100":298},[],[150,168],[150],{"_105":177,"_97":178,"_151":179,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":180,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":301,"_100":308},[302,305],{"_105":183,"_97":184,"_151":185,"_153":179,"_154":137,"_155":156,"_157":119,"_107":186,"_102":33,"_159":171,"_161":187,"_162":27,"_163":-5,"_164":303,"_100":304},[],[178,184],{"_105":191,"_97":192,"_151":193,"_153":179,"_154":137,"_155":156,"_157":119,"_107":194,"_102":33,"_159":171,"_161":195,"_162":27,"_163":-5,"_164":306,"_100":307},[],[178,192],[178],{"_105":200,"_97":112,"_151":201,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":202,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":310,"_100":320},[311,314,317],{"_105":205,"_97":206,"_151":207,"_153":201,"_154":137,"_155":156,"_157":119,"_107":208,"_102":33,"_159":171,"_161":209,"_162":27,"_163":-5,"_164":312,"_100":313},[],[112,206],{"_105":213,"_97":214,"_151":215,"_153":201,"_154":137,"_155":156,"_157":119,"_107":216,"_102":33,"_159":217,"_161":218,"_162":27,"_163":-5,"_164":315,"_100":316},[],[112,214],{"_105":222,"_97":223,"_151":224,"_153":201,"_154":137,"_155":156,"_157":119,"_107":225,"_102":33,"_159":171,"_161":226,"_162":27,"_163":-5,"_164":318,"_100":319},[],[112,223],[112],{"_105":231,"_97":232,"_151":233,"_153":-5,"_154":137,"_155":234,"_157":119,"_107":235,"_102":236,"_159":237,"_161":238,"_162":27,"_163":-5,"_164":322,"_100":323},[],[232],{"_105":242,"_97":243,"_151":244,"_153":-5,"_154":137,"_155":136,"_157":119,"_107":245,"_102":246,"_159":237,"_161":247,"_162":27,"_163":-5,"_164":325,"_100":326},[],[243],{"_105":251,"_97":252,"_151":253,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":254,"_102":33,"_159":217,"_161":255,"_162":27,"_163":-5,"_164":328,"_100":329},[],[252],{"_105":259,"_97":206,"_151":117,"_153":-5,"_154":137,"_155":156,"_157":119,"_107":260,"_102":33,"_159":237,"_161":261,"_162":27,"_163":-5,"_164":331,"_100":332},[],[206],[294,296,300,302,305,309,311,314,317,321,324,327,330],{"_105":205,"_97":206,"_151":207,"_153":201,"_154":137,"_155":156,"_157":119,"_107":275,"_102":33,"_159":171,"_161":209,"_162":27,"_163":-5,"_100":335},[112,206],[],{"_105":140,"_107":338,"_339":340,"_97":43,"_138":279,"_102":341,"_139":-5,"_141":-5,"_342":343,"_130":27,"_111":112,"_344":283,"_345":280},["D",1739546745267],"updatedAt",["D",1744821233355],29,"lockfileKey","1744821239062-esm.town_v_stevekrouse_cerebras_coder_archived@29-main","userHandle","projectName","showCompareCallout","pull","routes/_app","actionData","errors"]

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

Share your project

Latest Version

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

Task Master

NYC Weather

Markdown Editor

Time App

Timer

Stopwatch

Calendar App

Add Event

Events

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

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