Hi

\"}); // by default emails the owner of the val\n ```\n\n Email only works on the server. If the val includes client-side code, use dynamic imports to import this module in the server function, e.g.:\n `const { email } = await import \"https://esm.town/v/std/email\");`\n \n\n\nImmediately before generating code, think step-by-step in a ```thinking code fence about how to respond based on the existing code and the prompt:\n 1. If there's existing code, generate a val based on that code. If not, generate a new val based on one of the templates below. State only whether it is an edit to the code or a new val.\n 2. List the changes that are required.\n 3. Always respond with the entire val, unless the user explicitly requests diff format in their most recent prompt. State only which format the response will be in.\n\nFollow the requirements above and respond by generating code in a format based on whether or not the user explicitly requests diff format in their most recent prompt:\n\n * If the user does not explicitly request diff format in their prompt, generate the entire val:\n Use as the basis for generating code if it is provided.\n Write code that is complete and directly runnable.\n DO NOT omit code or use comments such as \"more content here\" or \"code remains unchanged.\"\n Write the code in ```val code fences.\n Include the val type as metadata on the code fence, e.g.: ```val type=script\n If this is a new val, decide what val type is appropriate based on the user's prompt. Default to choosing http type vals unless the user has requested specific functionality that requires a different type.\n\n * If the user requests diff format in their prompt, follow these steps:\n Write a valid unified diff with change hunk headers. The file headers can be omitted.\n Base the diff off of the tags below.\n Use the ```diff language code fence.\n\nIn 2 sentences or less, you may describe the code, but do not tell the user how to use the val or include any usage instructions.\n\nUse one of the following templates when creating new vals.\nWhen updating existing code, use these templates only as a reference.\n\nIf you create a new http type val, use the following template:\n\n\n\nIf you create a new script val, use the following template:\n\n\n\nIf you create a new cron val, use the following template:\n\n\n\nFor your reference, the Interval type has the following shape:\n\n```\ninterface Interval {\n lastRunAt: Date | undefined;\n}\n```\n\nAlthough cron type vals can have custom intervals,\ncron type vals that you generate run once per day.\nYou cannot change the frequency for the user.\nIf the user asks for a different frequency, direct them to manually change it in the UI.\n\nIf you create a new email val, use the following template:\n\n\n\nFor your reference, the Email type has the following shape:\n\n```\ninterface Email {\n from: string;\n to: string[];\n subject: string | undefined;\n text: string | undefined;\n html: string | undefined;\n attachments: File[];\n}\n```\n\nIf there is existing code, it will be provided below in tags. Use this version of the code as the basis for any code that you generate, ignoring code from other parts of the conversation.",[],[152,183],[152],{"_107":194,"_100":195,"_153":196,"_155":-5,"_156":139,"_157":138,"_159":160,"_109":197,"_104":198,"_163":188,"_165":199,"_166":27,"_167":-5,"_168":200,"_103":201},"31c42972-da9d-11ef-a56e-e6cdfca9ef9f","README.md","d095c526-da73-11ef-889c-e6cdfca9ef9f",["D",1737755415135],8,"# OpenTownie\n\nIt's like Townie but built entirely as a new Val Town Project.\n\nThis is just a super basic prototype, but excited to continue prototyping townie-like features in userspace, so we can all collaborate \nin the open on it.\n\nThis version currently uses DeepSeek r1 which is quite smart and cheap! \n\n## Getting Started\n\n1. Create a [Val Town API token](https://www.val.town/settings/api) with Val read and write permissions\n2. Paste the token into the input box and get started\n\n## Forking the Project\n\nYou'll need to get an **Open Router API key**. \nWe choose Open Router so we could easily switch between\nall models. We soon want to make it so you can choose your \nmodel from a dropdown, but we're having trouble formatting the api calls such that they work on all providers. Maybe we need to switch to the vercel sdk",[],[195],{"_107":203,"_100":204,"_153":205,"_155":-5,"_156":139,"_157":206,"_159":160,"_109":207,"_104":208,"_163":209,"_165":210,"_166":27,"_167":-5,"_168":211,"_103":212},"786afaba-da96-11ef-b943-e6cdfca9ef9f","index","d1c2fa50-da6d-11ef-aabe-e6cdfca9ef9f",84,["D",1737752527195],33,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ValTown } from \"https://esm.sh/@valtown/sdk\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { generateCodeAnthropic, makeFullPrompt } from \"./backend/generateCode\";\n\nfunction App() {\n const [messages, setMessages] = useState<{ content: string; role: string }[]>([]);\n const [inputMessage, setInputMessage] = useState(\"make a todo app\");\n const [createdValLink, setCreatedValLink] = useState(null);\n const [bearerToken, _setBearerToken] = useState(localStorage.getItem(\"val-town-bearer\"));\n\n function setBearerToken(token: string) {\n _setBearerToken(token);\n localStorage.setItem(\"val-town-bearer\", token);\n }\n\n const sendMessage = async (e) => {\n e.preventDefault();\n if (!inputMessage.trim()) return;\n\n const newMessage = { content: inputMessage, role: \"user\" };\n const updatedMessages = [...messages, newMessage];\n setMessages(updatedMessages);\n setInputMessage(\"\");\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n headers: { \"authorization\": \"Bearer \" + bearerToken },\n body: JSON.stringify({ messages: updatedMessages }),\n });\n const valCreationResponse = await response.json();\n setMessages([\n ...updatedMessages,\n { content: valCreationResponse.links.endpoint, role: \"assistant\" },\n ]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n msg.role === \"assistant\"\n ? \n : (\n

\n {msg.content}\n

\n )\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n // console.log(req);\n if (req.method === \"POST\") {\n // get bearer token\n const bearerToken = req.headers.get(\"authorization\")?.replace(\"Bearer \", \"\");\n if (!bearerToken) {\n return Response.json(\"Please provide a bearer token\", { status: 401 });\n }\n\n const vt = new ValTown({ bearerToken });\n\n const { messages } = await req.json();\n if (!messages) {\n return Response.json(\"Please provide `messages` in the request body\", { status: 400 });\n }\n\n const { code, type } = await generateCodeAnthropic(messages);\n const valCreationResponse = await vt.vals.create({\n code,\n type,\n privacy: \"unlisted\",\n name: \"opentownie_\" + Math.random().toString(36).substring(2, 15),\n });\n\n return Response.json(valCreationResponse);\n }\n\n return new Response(\n `\n \n \n Echo Bot Chat\n \n \n \n

\n \n \n View Source\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody { \n font-family: Arial, sans-serif; \n max-width: 600px; \n margin: 0 auto; \n padding: 20px;\n}\n.chat-container {\n border: 1px solid #ddd;\n height: 500px;\n display: flex;\n flex-direction: column;\n}\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 10px;\n}\n.message {\n margin: 5px 0;\n padding: 10px;\n border-radius: 5px;\n}\n.user {\n background-color: #e6f2ff;\n align-self: flex-end;\n text-align: right;\n}\n.bot {\n background-color: #f0f0f0;\n align-self: flex-start;\n}\n.val-link {\n background-color: #e0ffe0;\n}\n.input-area {\n display: flex;\n padding: 10px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n margin-right: 10px;\n}\nbutton {\n padding: 10px 20px;\n}\n.val-link a {\n color: blue;\n text-decoration: underline;\n}\n`;",[],[204],"files",[150,170,181,193,202],"counts",{"_217":31,"_218":162,"_219":220,"_221":162},"pulls","branches","forks",2,"envVars","contents",[224,227,230],{"_107":151,"_100":152,"_153":154,"_155":-5,"_156":139,"_157":158,"_159":160,"_109":225,"_104":162,"_163":164,"_165":-5,"_166":27,"_167":-5,"_103":226},["D",1737737529279],[152],{"_107":194,"_100":195,"_153":196,"_155":-5,"_156":139,"_157":138,"_159":160,"_109":228,"_104":198,"_163":188,"_165":199,"_166":27,"_167":-5,"_103":229},["D",1737755415135],[195],{"_107":203,"_100":204,"_153":205,"_155":-5,"_156":139,"_157":206,"_159":160,"_109":231,"_104":208,"_163":209,"_165":210,"_166":27,"_167":-5,"_103":232},["D",1737752527195],[204],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":239,"_243":244,"_502":31,"_503":160},{"_107":108,"_100":101,"_109":240,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":-5,"_120":27,"_121":-5,"_122":31,"_14":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_21":241,"_136":242,"_147":27},["D",1737734970287],{"_98":99,"_134":135},{"_104":138,"_100":42,"_107":139,"_140":108,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":101,"_146":99},"history",[245,250,258,265,272,280,285,294,302,311,320,329,338,347,356,361,370,378,385,393,401,408,417,426,435,444,452,460,469,478,486,494],{"_153":196,"_104":138,"_109":246,"_156":139,"_213":247},["D",1737755415135],[248],{"_107":194,"_156":139,"_153":196,"_100":195,"_165":199,"_163":188,"_104":198,"_155":-5,"_109":246,"_157":138,"_167":-5,"_159":160,"_166":27,"_103":249},[195],{"_153":196,"_104":251,"_109":252,"_156":139,"_213":253},88,["D",1737755414976],[254],{"_107":255,"_156":139,"_153":196,"_100":195,"_165":199,"_163":188,"_104":256,"_155":-5,"_109":252,"_157":251,"_167":-5,"_159":27,"_166":27,"_103":257},"31abc670-da9d-11ef-a56e-e6cdfca9ef9f",7,[195],{"_153":196,"_104":259,"_109":260,"_156":139,"_213":261},87,["D",1737755414745],[262],{"_107":263,"_156":139,"_153":196,"_100":195,"_165":199,"_163":188,"_104":158,"_155":-5,"_109":260,"_157":259,"_167":-5,"_159":27,"_166":27,"_103":264},"3188c8c8-da9d-11ef-8dd9-e6cdfca9ef9f",[195],{"_153":196,"_104":266,"_109":267,"_156":139,"_213":268},86,["D",1737755414123],[269],{"_107":270,"_156":139,"_153":196,"_100":195,"_165":199,"_163":188,"_104":187,"_155":-5,"_109":267,"_157":266,"_167":-5,"_159":27,"_166":27,"_103":271},"3129d93a-da9d-11ef-b4e7-e6cdfca9ef9f",[195],{"_153":196,"_104":273,"_109":274,"_156":139,"_213":275},85,["D",1737755412781],[276],{"_107":277,"_156":139,"_153":196,"_100":195,"_165":199,"_163":188,"_104":278,"_155":-5,"_109":274,"_157":273,"_167":-5,"_159":27,"_166":27,"_103":279},"305cce86-da9d-11ef-bc0f-e6cdfca9ef9f",4,[195],{"_153":205,"_104":206,"_109":281,"_156":139,"_213":282},["D",1737752527195],[283],{"_107":203,"_156":139,"_153":205,"_100":204,"_165":210,"_163":209,"_104":208,"_155":-5,"_109":281,"_157":206,"_167":-5,"_159":160,"_166":27,"_103":284},[204],{"_153":205,"_104":286,"_109":287,"_156":139,"_213":288},83,["D",1737752437936],[289],{"_107":290,"_156":139,"_153":205,"_100":204,"_165":291,"_163":209,"_104":292,"_155":-5,"_109":287,"_157":286,"_167":-5,"_159":27,"_166":27,"_103":293},"4337c74c-da96-11ef-b4f4-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ValTown } from \"https://esm.sh/@valtown/sdk\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { generateCodeAnthropic, makeFullPrompt } from \"./backend/generateCode\";\n\nfunction App() {\n const [messages, setMessages] = useState<{ content: string; role: string }[]>([]);\n const [inputMessage, setInputMessage] = useState(\"make a todo app\");\n const [createdValLink, setCreatedValLink] = useState(null);\n const [bearerToken, _setBearerToken] = useState(localStorage.getItem(\"val-town-bearer\"));\n\n function setBearerToken(token: string) {\n _setBearerToken(token);\n localStorage.setItem(\"val-town-bearer\", token);\n }\n\n const sendMessage = async (e) => {\n e.preventDefault();\n if (!inputMessage.trim()) return;\n\n const newMessage = { content: inputMessage, role: \"user\" };\n const updatedMessages = [...messages, newMessage];\n setMessages(updatedMessages);\n setInputMessage(\"\");\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n headers: { \"authorization\": \"Bearer \" + bearerToken },\n body: JSON.stringify({ messages: updatedMessages }),\n });\n const valCreationResponse = await response.json();\n setMessages([\n ...updatedMessages,\n { content: valCreationResponse.links.endpoint, role: \"assistant\" },\n ]);\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n

\n {msg.content}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n \n \n View Source\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody { \n font-family: Arial, sans-serif; \n max-width: 600px; \n margin: 0 auto; \n padding: 20px;\n}\n.chat-container {\n border: 1px solid #ddd;\n height: 500px;\n display: flex;\n flex-direction: column;\n}\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 10px;\n}\n.message {\n margin: 5px 0;\n padding: 10px;\n border-radius: 5px;\n}\n.user {\n background-color: #e6f2ff;\n align-self: flex-end;\n text-align: right;\n}\n.bot {\n background-color: #f0f0f0;\n align-self: flex-start;\n}\n.val-link {\n background-color: #e0ffe0;\n}\n.input-area {\n display: flex;\n padding: 10px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n margin-right: 10px;\n}\nbutton {\n padding: 10px 20px;\n}\n.val-link a {\n color: blue;\n text-decoration: underline;\n}\n`;",24,[204],{"_153":173,"_104":371,"_109":372,"_156":139,"_213":373},73,["D",1737751950292],[374],{"_107":375,"_156":139,"_153":173,"_100":172,"_165":376,"_163":177,"_104":309,"_155":154,"_109":372,"_157":371,"_167":-5,"_159":27,"_166":27,"_103":377},"20900ca0-da95-11ef-8044-e6cdfca9ef9f","import OpenAI from \"https://esm.sh/openai\";\n\nfunction parseValResponse(response: string) {\n const codeBlockRegex = /```val type=(\\w+)\\n([\\s\\S]*?)```/;\n const match = response.match(codeBlockRegex);\n\n if (!match) {\n return null;\n }\n\n return {\n type: match[1],\n code: match[2].trim(),\n };\n}\n\ninterface ValResponse {\n type: string;\n code: string;\n}\n\ninterface Message {\n role: string;\n content: string;\n}\n\nexport async function generateCodeAnthropic(messages: Message[]): Promise {\n const system = await (await fetch(`${import.meta.url.split(\"/\").slice(0, -1).join(\"/\")}/system_prompt.txt`)).text();\n\n const openai = new OpenAI({\n baseURL: \"https://openrouter.ai/api/v1\",\n apiKey: Deno.env.get(\"OPEN_ROUTER_KEY\"),\n });\n\n const completion = await openai.chat.completions.create({\n model: \"deepseek/deepseek-r1\",\n messages: [\n { role: \"system\", content: system },\n ...messages,\n ],\n });\n\n console.log(completion);\n return parseValResponse(completion.choices[0].message.content);\n}",[152,172],{"_153":173,"_104":379,"_109":380,"_156":139,"_213":381},72,["D",1737751949428],[382],{"_107":383,"_156":139,"_153":173,"_100":172,"_165":376,"_163":177,"_104":318,"_155":154,"_109":380,"_157":379,"_167":-5,"_159":27,"_166":27,"_103":384},"200ababe-da95-11ef-84eb-e6cdfca9ef9f",[152,172],{"_153":173,"_104":386,"_109":387,"_156":139,"_213":388},71,["D",1737751888215],[389],{"_107":390,"_156":139,"_153":173,"_100":172,"_165":391,"_163":177,"_104":327,"_155":154,"_109":387,"_157":386,"_167":-5,"_159":27,"_166":27,"_103":392},"fb8e9ade-da94-11ef-bfe5-e6cdfca9ef9f","import OpenAI from \"https://esm.sh/openai\";\n\nfunction parseValResponse(response: string) {\n const codeBlockRegex = /```val type=(\\w+)\\n([\\s\\S]*?)```/;\n const match = response.match(codeBlockRegex);\n\n if (!match) {\n return null;\n }\n\n return {\n type: match[1],\n code: match[2].trim(),\n };\n}\n\ninterface ValResponse {\n type: string;\n code: string;\n}\n\ninterface Message {\n role: string;\n content: string;\n}\n\nexport async function generateCodeAnthropic(messages: Message[]): Promise {\n const system = await (await fetch(`${import.meta.url.split(\"/\").slice(0, -1).join(\"/\")}/system_prompt.txt`)).text();\n console.log(\"system\", system);\n console.log(\"messages\", messages);\n const openai = new OpenAI({\n baseURL: \"https://openrouter.ai/api/v1\",\n apiKey: Deno.env.get(\"OPEN_ROUTER_KEY\"),\n });\n\n const completion = await openai.chat.completions.create({\n model: \"deepseek/deepseek-r1\",\n messages: [\n { role: \"system\", content: system },\n ...messages,\n ],\n });\n\n console.log(completion);\n return parseValResponse(completion.choices[0].message.content);\n}",[152,172],{"_153":173,"_104":394,"_109":395,"_156":139,"_213":396},70,["D",1737751715607],[397],{"_107":398,"_156":139,"_153":173,"_100":172,"_165":399,"_163":177,"_104":336,"_155":154,"_109":395,"_157":394,"_167":-5,"_159":27,"_166":27,"_103":400},"94accade-da94-11ef-af54-e6cdfca9ef9f","import OpenAI from \"https://esm.sh/openai\";\n\nfunction parseValResponse(response: string) {\n const codeBlockRegex = /```val type=(\\w+)\\n([\\s\\S]*?)```/;\n const match = response.match(codeBlockRegex);\n\n if (!match) {\n return null;\n }\n\n return {\n type: match[1],\n code: match[2].trim(),\n };\n}\n\ninterface ValResponse {\n type: string;\n code: string;\n}\n\ninterface Message {\n role: string;\n content: string;\n}\n\nexport async function generateCodeAnthropic(messages: Message[]): Promise {\n const system = await (await fetch(`${import.meta.url.split(\"/\").slice(0, -1).join(\"/\")}/system_prompt.txt`)).text();\n console.log(\"system\", system);\n console.log(\"messages\", messages);\n const openai = new OpenAI({\n baseURL: \"https://openrouter.ai/api/v1\",\n apiKey: Deno.env.get(\"OPEN_ROUTER_KEY\"),\n });\n\n const completion = await openai.chat.completions.create({\n model: \"anthropic/claude-3.5-sonnet\",\n messages: [\n { role: \"system\", content: system },\n ...messages,\n ],\n });\n\n console.log(completion);\n return parseValResponse(completion.choices[0].message.content);\n}",[152,172],{"_153":173,"_104":402,"_109":403,"_156":139,"_213":404},69,["D",1737751713859],[405],{"_107":406,"_156":139,"_153":173,"_100":172,"_165":399,"_163":177,"_104":345,"_155":154,"_109":403,"_157":402,"_167":-5,"_159":27,"_166":27,"_103":407},"93a24934-da94-11ef-8985-e6cdfca9ef9f",[152,172],{"_153":205,"_104":409,"_109":410,"_156":139,"_213":411},68,["D",1737751616661],[412],{"_107":413,"_156":139,"_153":205,"_100":204,"_165":414,"_163":209,"_104":415,"_155":-5,"_109":410,"_157":409,"_167":-5,"_159":27,"_166":27,"_103":416},"59b30dda-da94-11ef-afed-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ValTown } from \"https://esm.sh/@valtown/sdk\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { generateCodeAnthropic, makeFullPrompt } from \"./backend/generateCode\";\n\nfunction App() {\n const [messages, setMessages] = useState<{ text: string; role: string }[]>([]);\n const [inputMessage, setInputMessage] = useState(\"make a todo app\");\n const [createdValLink, setCreatedValLink] = useState(null);\n const [bearerToken, _setBearerToken] = useState(localStorage.getItem(\"val-town-bearer\"));\n\n function setBearerToken(token: string) {\n _setBearerToken(token);\n localStorage.setItem(\"val-town-bearer\", token);\n }\n\n const sendMessage = async (e) => {\n e.preventDefault();\n if (!inputMessage.trim()) return;\n\n const newMessage = { text: inputMessage, role: \"user\" };\n const updatedMessages = [...messages, newMessage];\n setMessages(updatedMessages);\n setInputMessage(\"\");\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n headers: { \"authorization\": \"Bearer \" },\n body: JSON.stringify({ messages: updatedMessages }),\n });\n const botReply = await response.json();\n setMessages(prev => [...prev, { text: botReply.message, role: \"assistant\" }]);\n\n if (botReply.valLink) {\n setCreatedValLink(botReply.valLink);\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n \n \n View Source\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody { \n font-family: Arial, sans-serif; \n max-width: 600px; \n margin: 0 auto; \n padding: 20px;\n}\n.chat-container {\n border: 1px solid #ddd;\n height: 500px;\n display: flex;\n flex-direction: column;\n}\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 10px;\n}\n.message {\n margin: 5px 0;\n padding: 10px;\n border-radius: 5px;\n}\n.user {\n background-color: #e6f2ff;\n align-self: flex-end;\n text-align: right;\n}\n.bot {\n background-color: #f0f0f0;\n align-self: flex-start;\n}\n.val-link {\n background-color: #e0ffe0;\n}\n.input-area {\n display: flex;\n padding: 10px;\n}\ninput {\n flex-grow: 1;\n padding: 10px;\n margin-right: 10px;\n}\nbutton {\n padding: 10px 20px;\n}\n.val-link a {\n color: blue;\n text-decoration: underline;\n}\n`;",20,[204],{"_153":173,"_104":445,"_109":446,"_156":139,"_213":447},64,["D",1737751371496],[448],{"_107":449,"_156":139,"_153":173,"_100":172,"_165":450,"_163":177,"_104":354,"_155":154,"_109":446,"_157":445,"_167":-5,"_159":27,"_166":27,"_103":451},"c79167da-da93-11ef-850e-e6cdfca9ef9f","import OpenAI from \"https://esm.sh/openai\";\n\nfunction parseValResponse(response: string) {\n const codeBlockRegex = /```val type=(\\w+)\\n([\\s\\S]*?)```/;\n const match = response.match(codeBlockRegex);\n\n if (!match) {\n return null;\n }\n\n return {\n type: match[1],\n code: match[2].trim(),\n };\n}\n\ninterface ValResponse {\n type: string;\n code: string;\n}\n\ninterface Message {\n role: string;\n content: string;\n}\n\nexport async function generateCodeAnthropic(messages: Message[]): Promise {\n const system = await (await fetch(`${import.meta.url.split(\"/\").slice(0, -1).join(\"/\")}/system_prompt.txt`)).text();\n console.log(\"messages\", messages);\n const openai = new OpenAI({\n baseURL: \"https://openrouter.ai/api/v1\",\n apiKey: Deno.env.get(\"OPEN_ROUTER_KEY\"),\n });\n\n const completion = await openai.chat.completions.create({\n model: \"anthropic/claude-3.5-sonnet\",\n messages: [\n { role: \"system\", content: system },\n ...messages,\n ],\n });\n\n console.log(completion);\n return parseValResponse(completion.choices[0].message.content);\n}",[152,172],{"_153":173,"_104":453,"_109":454,"_156":139,"_213":455},63,["D",1737751362537],[456],{"_107":457,"_156":139,"_153":173,"_100":172,"_165":458,"_163":177,"_104":368,"_155":154,"_109":454,"_157":453,"_167":-5,"_159":27,"_166":27,"_103":459},"c23ac42a-da93-11ef-9df2-e6cdfca9ef9f","import OpenAI from \"https://esm.sh/openai\";\n\nfunction parseValResponse(response: string) {\n const codeBlockRegex = /```val type=(\\w+)\\n([\\s\\S]*?)```/;\n const match = response.match(codeBlockRegex);\n\n if (!match) {\n return null;\n }\n\n return {\n type: match[1],\n code: match[2].trim(),\n };\n}\n\ninterface ValResponse {\n type: string;\n code: string;\n}\n\ninterface Message {\n role: string;\n content: string;\n}\n\nexport async function generateCodeAnthropic(messages: Message[]): Promise {\n const system = await (await fetch(`${import.meta.url.split(\"/\").slice(0, -1).join(\"/\")}/system_prompt.txt`)).text();\n console.log(messages);\n const openai = new OpenAI({\n baseURL: \"https://openrouter.ai/api/v1\",\n apiKey: Deno.env.get(\"OPEN_ROUTER_KEY\"),\n });\n\n const completion = await openai.chat.completions.create({\n model: \"anthropic/claude-3.5-sonnet\",\n messages: [\n { role: \"system\", content: system },\n ...messages,\n ],\n });\n\n console.log(completion);\n return parseValResponse(completion.choices[0].message.content);\n}",[152,172],{"_153":205,"_104":461,"_109":462,"_156":139,"_213":463},62,["D",1737751226130],[464],{"_107":465,"_156":139,"_153":205,"_100":204,"_165":466,"_163":209,"_104":467,"_155":-5,"_109":462,"_157":461,"_167":-5,"_159":27,"_166":27,"_103":468},"70ed6f32-da93-11ef-91fa-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ValTown } from \"https://esm.sh/@valtown/sdk\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { generateCodeAnthropic, makeFullPrompt } from \"./backend/generateCode\";\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [inputMessage, setInputMessage] = useState(\"make a todo app\");\n const [createdValLink, setCreatedValLink] = useState(null);\n const [bearerToken, _setBearerToken] = useState(localStorage.getItem(\"val-town-bearer\"));\n\n function setBearerToken(token) {\n _setBearerToken(token);\n localStorage.setItem(\"val-town-bearer\", token);\n }\n\n const sendMessage = async (e) => {\n e.preventDefault();\n if (!inputMessage.trim()) return;\n\n const newMessage = { text: inputMessage, sender: \"user\" };\n const updatedMessages = [...messages, newMessage];\n setMessages(updatedMessages);\n setInputMessage(\"\");\n\n try {\n const response = await fetch(\"/\", {\n method: \"POST\",\n headers: { \"authorization\": \"Bearer \" },\n body: JSON.stringify({ messages }),\n });\n const botReply = await response.json();\n setMessages(prev => [...prev, { text: botReply.message, sender: \"assistant\" }]);\n\n if (botReply.valLink) {\n setCreatedValLink(botReply.valLink);\n }\n } catch (error) {\n console.error(\"Error sending message:\", error);\n }\n };\n\n return (\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

\n {messages.map((msg, index) => (\n

\n {msg.text}\n

\n ))}\n {createdValLink && (\n

\n Created Val: {createdValLink}\n

\n )}\n

Hi

Hello

Chat App

History