[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","pranavjawale","name","Pranavbot","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","24f5b6b6-14db-4d6d-aba5-15eabbc8f1bf","main.ts","fileId","99032bb2-ac59-11f1-ab56-1607ee4eb77e","parentId","branchId","d13a252c-290d-497b-becb-e43d46f6e98b","branchVersion",10,"latest",true,"createdAt",["D",1789023628753],9,"fileType","http","content","// ============================================================\n// VAL.TOWN HTTP VAL — \"Design Arena\" style AI site builder agent\n// ============================================================\n// SETUP:\n// 1. Create a new HTTP val on val.town, paste this in.\n// 2. In val.town → Settings → Environment Variables, add:\n// TELEGRAM_TOKEN (from BotFather)\n// GROQ_API_KEY (from console.groq.com)\n// TAVILY_API_KEY (from tavily.com — free tier)\n// NETLIFY_TOKEN (from Netlify → User settings → Applications)\n// 3. Copy your val's public URL (shown at the top of the val page).\n// 4. Set the Telegram webhook by visiting this URL once in your browser:\n// https://api.telegram.org/bot/setWebhook?url=\n// 5. Message your bot on Telegram: \"make me a bakery website\"\n// ============================================================\n\nasync function sha1Hex(text: string): Promise {\n const bytes = new TextEncoder().encode(text);\n const hashBuffer = await crypto.subtle.digest(\"SHA-1\", bytes);\n return Array.from(new Uint8Array(hashBuffer))\n .map((b) => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\nexport default async function (req: Request): Promise {\n if (req.method !== \"POST\") return new Response(\"OK\");\n\n const update = await req.json();\n const message = update.message;\n if (!message || !message.text) return new Response(\"OK\");\n\n const chatId = message.chat.id;\n const prompt: string = message.text;\n\n const TELEGRAM_TOKEN = Deno.env.get(\"TELEGRAM_TOKEN\");\n const GROQ_API_KEY = Deno.env.get(\"GROQ_API_KEY\");\n const TAVILY_API_KEY = Deno.env.get(\"TAVILY_API_KEY\");\n const NETLIFY_TOKEN = Deno.env.get(\"NETLIFY_TOKEN\");\n\n async function sendTelegram(text: string) {\n await fetch(`https://api.telegram.org/bot${TELEGRAM_TOKEN}/sendMessage`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n chat_id: chatId,\n text,\n disable_web_page_preview: true,\n }),\n });\n }\n\n // Ignore anything that isn't a real build request (basic guard)\n if (prompt.startsWith(\"/start\")) {\n await sendTelegram(\n \"Hey! Tell me what you want built, e.g. 'make me a portfolio site for a photographer' and I'll send back 4 live design options.\"\n );\n return new Response(\"OK\");\n }\n\n await sendTelegram(\n \"Got it! Pulling the latest design trends and building 4 options for you... ~30-60s ⏳\"\n );\n\n // ---- 1. Freshness layer: search for current trends before generating ----\n let searchContext = \"\";\n try {\n const tavilyRes = await fetch(\"https://api.tavily.com/search\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n api_key: TAVILY_API_KEY,\n query: \"latest web design trends 2026 modern UI patterns\",\n max_results: 5,\n }),\n });\n const tavilyData = await tavilyRes.json();\n searchContext = (tavilyData.results || [])\n .map((r: any) => `${r.title}: ${r.content}`)\n .join(\"\\n\")\n .slice(0, 2000);\n } catch {\n searchContext = \"\"; // fail gracefully — still generates without it\n }\n\n // ---- 2. Generate 4 style variants in parallel via Groq ----\n const styles = [\n { name: \"Minimal\", desc: \"clean minimalist design, generous whitespace, subtle typography, muted palette\" },\n { name: \"Bold Brutalist\", desc: \"brutalist web design, high contrast, thick borders, oversized bold typography\" },\n { name: \"Glassmorphism\", desc: \"glassmorphism style, frosted glass cards, soft gradients, blur effects\" },\n { name: \"Editorial\", desc: \"editorial magazine layout, elegant serif headlines, strong grid structure\" },\n ];\n\n async function generateVariant(style: (typeof styles)[0]) {\n const systemPrompt = `You are an expert frontend developer. Generate a COMPLETE single-file HTML page (inline CSS and JS only, CDN links allowed) for the user's request.\nStyle direction: ${style.desc}.\nRecent design context for inspiration (don't copy verbatim): ${searchContext}\nReturn ONLY raw HTML — no markdown fences, no explanation, no commentary.`;\n\n try {\n const attempt = async () => {\n const res = await fetch(\"https://api.groq.com/openai/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${GROQ_API_KEY}`,\n },\n body: JSON.stringify({\n model: \"openai/gpt-oss-120b\",\n messages: [\n { role: \"system\", content: systemPrompt },\n { role: \"user\", content: prompt },\n ],\n temperature: 0.8,\n }),\n });\n return res.json();\n };\n\n let data = await attempt();\n if (data.error) {\n // Likely a transient rate-limit from firing 4 requests at once —\n // wait a moment and try one more time before giving up.\n await new Promise((r) => setTimeout(r, 2000));\n data = await attempt();\n }\n\n if (data.error) {\n return {\n name: style.name,\n html: `

Generation failed

${data.error.message ?? \"Unknown error\"}

`,\n };\n }\n\n let html = data.choices?.[0]?.message?.content ?? \"

Generation failed

\";\n html = html.replace(/```html/g, \"\").replace(/```/g, \"\").trim();\n return { name: style.name, html };\n } catch (err) {\n return { name: style.name, html: `

Generation failed

${String(err)}

` };\n }\n }\n\n const variants = await Promise.all(styles.map(generateVariant));\n\n // ---- 3. Deploy each variant to Netlify as its own site ----\n // Uses the \"file digest\" method (create site -> declare file hash -> upload\n // raw bytes) instead of a zip upload. The zip-upload endpoint has a known\n // Netlify quirk where index.html sometimes gets served with the wrong\n // content-type (renders as plain text instead of HTML). This method sets\n // the content-type explicitly per file, so it always renders correctly.\n async function deployToNetlify(html: string): Promise {\n // 1. Create a new empty site\n const siteRes = await fetch(\"https://api.netlify.com/api/v1/sites\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${NETLIFY_TOKEN}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({}),\n });\n const siteData = await siteRes.json();\n const siteId = siteData.id;\n const siteUrl = siteData.ssl_url || siteData.url;\n\n // 2. Tell Netlify what file(s) this deploy contains, by hash\n const hash = await sha1Hex(html);\n const deployRes = await fetch(\n `https://api.netlify.com/api/v1/sites/${siteId}/deploys`,\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${NETLIFY_TOKEN}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ files: { \"/index.html\": hash } }),\n }\n );\n const deployData = await deployRes.json();\n\n // 3. Upload the actual file content (Netlify only asks for files it\n // doesn't already have, listed in `required`)\n if (deployData.required?.includes(hash)) {\n await fetch(\n `https://api.netlify.com/api/v1/deploys/${deployData.id}/files/index.html`,\n {\n method: \"PUT\",\n headers: {\n Authorization: `Bearer ${NETLIFY_TOKEN}`,\n \"Content-Type\": \"text/html\",\n },\n body: html,\n }\n );\n }\n\n return siteUrl || \"deploy failed\";\n }\n\n const links = await Promise.all(variants.map((v) => deployToNetlify(v.html)));\n\n // ---- 4. Send results back ----\n let reply = \"Here are your 4 options:\\n\\n\";\n variants.forEach((v, i) => {\n reply += `${i + 1}. ${v.name} — ${links[i]}\\n`;\n });\n reply += \"\\nOpen each link to preview. Tell me which number you like and I'll refine it further.\";\n\n await sendTelegram(reply);\n\n return new Response(\"OK\");\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1789023628753],"children",[],[35],"f916da87-a4fb-40d5-a4d0-9e38b6ada865",["D",1788963624391],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","b06013a6-81b3-49dd-80cf-634d329e0e67","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f453e-0d63-723f-98e1-1ec926ebd78e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Pranav Jawale","avatar","https://lh3.googleusercontent.com/a/ACg8ocLX5l6cRGJzG_8cO8o0z7FAiO7O8oLS4HKggBrqERpW3xDe6A=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":150,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":19,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":151,"_95":152,"_97":153,"_99":53},[147],"files",[147],"counts",{"_136":77,"_137":138,"_139":77,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":135},[35],"pulls","branches",1,"forks",{"_143":145,"_146":77},"connections",{"_143":77,"_144":77},"count","unfilledCount",4,"emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":148,"_18":149},[],[35],["D",1788963624391],{"_11":12,"_115":111},{"_11":12,"_108":109,"_110":111,"_70":71,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_131":187,"_188":189,"_190":191,"_192":53,"_193":53,"_194":53,"_195":44,"_196":-5,"_197":-7,"_198":-7,"_199":77,"_200":53,"_201":53,"_202":-5,"_203":53,"_204":53,"_205":53,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":16,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code