[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_155":156,"_157":158},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_105":86,"_27":53,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","99032bb2-ac59-11f1-ab56-1607ee4eb77e","name","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\nimport JSZip from \"npm:jszip\";\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 {\n name: \"Minimal\",\n desc:\n \"clean minimalist design, generous whitespace, subtle typography, muted palette\",\n },\n {\n name: \"Bold Brutalist\",\n desc:\n \"brutalist web design, high contrast, thick borders, oversized bold typography\",\n },\n {\n name: \"Glassmorphism\",\n desc:\n \"glassmorphism style, frosted glass cards, soft gradients, blur effects\",\n },\n {\n name: \"Editorial\",\n desc:\n \"editorial magazine layout, elegant serif headlines, strong grid structure\",\n },\n ];\n\n async function generateVariant(style: (typeof styles)[0]) {\n const systemPrompt =\n `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 res = await fetch(\n \"https://api.groq.com/openai/v1/chat/completions\",\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n Authorization: `Bearer ${GROQ_API_KEY}`,\n },\n body: JSON.stringify({\n model: \"llama-3.3-70b-versatile\",\n messages: [\n { role: \"system\", content: systemPrompt },\n { role: \"user\", content: prompt },\n ],\n temperature: 0.8,\n }),\n },\n );\n const data = await res.json();\n console.log(\"GROQ RESPONSE:\", JSON.stringify(data));\n let html = data.choices?.[0]?.message?.content ??\n \"

Generation failed

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

Generation failed

\" };\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 async function deployToNetlify(html: string): Promise {\n const zip = new JSZip();\n zip.file(\"index.html\", html);\n const zipBlob = await zip.generateAsync({ type: \"uint8array\" });\n\n const res = await fetch(\"https://api.netlify.com/api/v1/sites\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${NETLIFY_TOKEN}`,\n \"Content-Type\": \"application/zip\",\n },\n body: zipBlob,\n });\n const data = await res.json();\n return data.ssl_url || data.url || \"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 +=\n \"\\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}","// ============================================================\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\nimport JSZip from \"npm:jszip\";\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 {\n name: \"Minimal\",\n desc:\n \"clean minimalist design, generous whitespace, subtle typography, muted palette\",\n },\n {\n name: \"Bold Brutalist\",\n desc:\n \"brutalist web design, high contrast, thick borders, oversized bold typography\",\n },\n {\n name: \"Glassmorphism\",\n desc:\n \"glassmorphism style, frosted glass cards, soft gradients, blur effects\",\n },\n {\n name: \"Editorial\",\n desc:\n \"editorial magazine layout, elegant serif headlines, strong grid structure\",\n },\n ];\n\n async function generateVariant(style: (typeof styles)[0]) {\n const systemPrompt =\n `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 res = await fetch(\n \"https://api.groq.com/openai/v1/chat/completions\",\n {\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 );\n const data = await res.json();\n console.log(\"GROQ RESPONSE:\", JSON.stringify(data));\n let html = data.choices?.[0]?.message?.content ??\n \"

Generation failed

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

Generation failed

\" };\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 async function deployToNetlify(html: string): Promise {\n const zip = new JSZip();\n zip.file(\"index.html\", html);\n const zipBlob = await zip.generateAsync({ type: \"uint8array\" });\n\n const res = await fetch(\"https://api.netlify.com/api/v1/sites\", {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${NETLIFY_TOKEN}`,\n \"Content-Type\": \"application/zip\",\n },\n body: zipBlob,\n });\n const data = await res.json();\n return data.ssl_url || data.url || \"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 +=\n \"\\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}","createdAt",["D",1789023128782],"branchVersion","branchId","d13a252c-290d-497b-becb-e43d46f6e98b","id","f916da87-a4fb-40d5-a4d0-9e38b6ada865","Pranavbot",["D",1788963624391],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","b06013a6-81b3-49dd-80cf-634d329e0e67","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f453e-0d63-723f-98e1-1ec926ebd78e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_104":100},"org",{"_96":95,"_97":98,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",10,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pranavjawale","handle","displayName","Pranav Jawale","avatar","https://lh3.googleusercontent.com/a/ACg8ocLX5l6cRGJzG_8cO8o0z7FAiO7O8oLS4HKggBrqERpW3xDe6A=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":151,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":152,"_80":153,"_82":154,"_84":25},"tree",[146],"files",[146],"counts",{"_134":62,"_135":136,"_137":62,"_138":139,"_140":141},"contents",[126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":130,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_27":133},"fb8ac4c9-c283-4903-a36f-c1e05c89f827","parentId","latest",["D",1789023128782],6,"label",[28],"pulls","branches",1,"forks","envVars",{"_142":144,"_145":62},"connections",{"_142":62,"_143":62},"count","unfilledCount",4,"emptyCount",{"_43":127,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_129":25,"_38":147,"_13":131,"_33":34,"_35":37,"_24":25,"_132":-5,"_148":149,"_27":150},["D",1789023128782],"children",[],[28],["D",1788963624391],{"_96":95,"_104":100},{"_96":95,"_97":98,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":188,"_189":190,"_191":192,"_193":25,"_194":25,"_195":25,"_196":58,"_197":-5,"_198":-7,"_199":-7,"_200":62,"_201":25,"_202":25,"_203":-5,"_204":25,"_205":25,"_206":25,"_207":-5},"ENV",{"_159":160,"_161":162,"_163":86,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187},"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"]

Diff · v7