[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_205":206,"_207":208},"routes/_app.x.$handle.$name",{"_97":96,"_33":46,"_105":87,"_28":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":27,"_120":121,"_122":25,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_33":46,"_39":47,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":27},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":20,"_36":38,"_39":40,"_41":14,"_42":43,"_24":27},"previous",{"_31":32,"_33":34,"_35":20,"_36":37},"deleted",true,"deletedHere",false,"path","frontend/index.html","latestPath","fileId","e8727252-14b1-11f0-8e83-569c3dd06744","name","index.html","fileType","content","\n\n\n \n \n AI Chat App\n \n \n\n\n

AI Chat Assistant

\n\n

\n Hello! I'm your AI assistant. How can I help you today?\n

\n\n

\n \n \n

\n\n

This is a demo AI chat application. Your conversations are not stored.

\n \n \n View Source\n \n

\n\n \n\n","\n\n\n \n \n AI Chat App\n \n \n \n\n\n

\n \n

AI Chat Assistant

\n\n

\n Hello! I'm your AI assistant. How can I help you today?\n

\n\n

\n \n \n

\n\n

This is a demo AI chat application. Your conversations are not stored.

\n \n \n View Source\n \n

\n\n \n\n","createdAt",["D",1744141734968],"branchVersion","branchId","ce9696ba-14b1-11f0-8a52-569c3dd06744","id","ce9643ea-14b1-11f0-8a52-569c3dd06744","chat",["D",1744141435618],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","c7d91915-4070-4350-8e28-6c792ff73b1c","pinnedFileId","e213d450-14b1-11f0-8844-569c3dd06744","pinPreview","pinMigrated","screenshotVersion",27,"likeCount",0,"orgId","9ee5b56c-6e87-47cb-98e4-c31219468b31","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":27},"branch",{"_13":86,"_33":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",42,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","loading","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaTFCT2UzVDJHbzF6RjhPTnpBd3p6VEJHZEQifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_33":46,"_39":201,"_48":-5,"_49":27,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":25,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":202,"_81":203,"_83":204,"_85":27},"tree",[163,165,168],"files",[163,164,165,166,167,168],"counts",{"_153":63,"_154":137,"_155":63,"_156":157,"_158":159},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":148,"_33":149,"_31":150,"_133":-5,"_42":43,"_41":137,"_135":25,"_39":151,"_13":63,"_35":146,"_36":-5,"_24":27,"_139":-5,"_28":152},{"_44":141,"_33":142,"_31":143,"_133":-5,"_42":43,"_41":144,"_135":25,"_39":145,"_13":63,"_35":146,"_36":-5,"_24":27,"_139":-5,"_28":147},{"_44":130,"_33":131,"_31":132,"_133":-5,"_42":43,"_41":134,"_135":27,"_39":136,"_13":137,"_35":20,"_36":138,"_24":27,"_139":-5,"_28":140},"57957e68-14b2-11f0-83fe-569c3dd06744","README.md","fc000a0a-14b1-11f0-abc2-569c3dd06744","parentId",13,"latest",["D",1744141665435],1,"# AI Chat App\n\nA simple AI chat application built on Val Town using the OpenAI API.\n\n## Features\n\n- Real-time chat interface with an AI assistant\n- Powered by OpenAI's GPT models\n- Modern, responsive design with Tailwind CSS\n- TypeScript for type safety and better developer experience\n- Markdown-like formatting for code blocks and other elements\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Backend API with Hono and OpenAI integration\n├── frontend/\n│ ├── index.html # Main HTML template\n│ └── index.ts # Frontend TypeScript\n└── README.md\n```\n\n## How It Works\n\n1. The frontend provides a chat interface where users can type messages\n2. Messages are sent to the backend API endpoint\n3. The backend uses the OpenAI API to generate responses\n4. Responses are formatted and displayed in the chat interface\n\n## Technologies Used\n\n- **TypeScript**: For type safety and better code organization\n- **Tailwind CSS**: For styling without custom CSS files\n- **Hono**: Lightweight web framework for the backend\n- **OpenAI API**: For generating AI responses\n\n## Requirements\n\nThis app requires an OpenAI API key to be set as an environment variable in Val Town.\n\n## Setup\n\n1. Fork this project in Val Town\n2. Add your OpenAI API key as an environment variable named `OPENAI_API_KEY`\n3. Run the project\n\n## Customization\n\nYou can customize the app by:\n- Changing the OpenAI model in the backend (currently using gpt-4o-mini)\n- Adjusting the max tokens parameter for longer or shorter responses\n- Modifying the Tailwind classes to change the appearance\n- Adding additional features like message history or user authentication","label",[131],"e87278e2-14b1-11f0-8e83-569c3dd06744","frontend","45fc8e16-4e53-4537-9244-732e405cf0c1",2,["D",1744141478996],"directory",[142],"e213dd1a-14b1-11f0-8844-569c3dd06744","backend","2f581298-1178-4a35-a677-b8ba521783d7",["D",1744141468311],[149],"pulls","branches","forks","envVars",{"_160":63,"_162":63},"connections",{"_160":63,"_161":63},"count","unfilledCount","emptyCount",{"_44":148,"_33":149,"_31":150,"_133":-5,"_42":43,"_41":137,"_135":25,"_39":198,"_13":63,"_35":146,"_36":-5,"_24":27,"_139":-5,"_170":199,"_28":200},{"_44":189,"_33":174,"_31":57,"_133":150,"_42":43,"_41":190,"_135":27,"_39":191,"_13":192,"_35":193,"_36":194,"_24":27,"_139":195,"_170":196,"_28":197},{"_44":141,"_33":142,"_31":143,"_133":-5,"_42":43,"_41":144,"_135":25,"_39":186,"_13":63,"_35":146,"_36":-5,"_24":27,"_139":-5,"_170":187,"_28":188},{"_44":182,"_33":34,"_31":32,"_133":143,"_42":43,"_41":14,"_135":27,"_39":183,"_13":144,"_35":20,"_36":38,"_24":27,"_139":-5,"_170":184,"_28":185},{"_44":173,"_33":174,"_31":175,"_133":143,"_42":43,"_41":176,"_135":27,"_39":177,"_13":63,"_35":178,"_36":179,"_24":27,"_139":-5,"_170":180,"_28":181},{"_44":130,"_33":131,"_31":132,"_133":-5,"_42":43,"_41":134,"_135":27,"_39":169,"_13":137,"_35":20,"_36":138,"_24":27,"_139":-5,"_170":171,"_28":172},["D",1744141665435],"children",[],[131],"329c00fa-14b2-11f0-83fe-569c3dd06744","index.ts","329c01ae-14b2-11f0-83fe-569c3dd06744",8,["D",1744141603423],"script","// Define types for our messages\ninterface Message {\n role: 'user' | 'assistant';\n content: string;\n}\n\ninterface ApiResponse {\n message: {\n role: string;\n content: string;\n };\n usage: {\n prompt_tokens: number;\n completion_tokens: number;\n total_tokens: number;\n };\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // DOM elements\n const chatContainer = document.getElementById('chat-container') as HTMLDivElement;\n const userInput = document.getElementById('user-input') as HTMLTextAreaElement;\n const sendButton = document.getElementById('send-button') as HTMLButtonElement;\n const viewSourceLink = document.getElementById('view-source') as HTMLAnchorElement;\n \n // Set the view source link\n viewSourceLink.href = window.location.href.replace('esm.town', 'val.town');\n \n // Message history for context\n const messageHistory: Message[] = [\n { role: 'assistant', content: 'Hello! I\\'m your AI assistant. How can I help you today?' }\n ];\n \n // Function to add a message to the chat\n function addMessage(role: 'user' | 'assistant', content: string, isLoading: boolean = false): HTMLDivElement {\n const messageDiv = document.createElement('div');\n messageDiv.className = `message ${role} ${isLoading ? 'loading' : ''}`;\n \n // Apply Tailwind classes\n if (role === 'user') {\n messageDiv.classList.add('bg-blue-100', 'ml-auto', 'rounded-bl-lg', 'rounded-tl-lg', 'rounded-tr-lg');\n } else {\n messageDiv.classList.add('bg-gray-100', 'mr-auto', 'rounded-br-lg', 'rounded-tl-lg', 'rounded-tr-lg');\n }\n \n const messageContent = document.createElement('div');\n messageContent.className = 'message-content p-3';\n messageContent.textContent = content;\n \n messageDiv.appendChild(messageContent);\n chatContainer.appendChild(messageDiv);\n \n // Scroll to the bottom\n chatContainer.scrollTop = chatContainer.scrollHeight;\n \n return messageDiv;\n }\n \n // Function to format the AI response with simple markdown-like formatting\n function formatResponse(text: string): string {\n // Replace code blocks\n text = text.replace(/```([\\s\\S]*?)```/g, '

$1

');\n \n // Replace inline code\n text = text.replace(/`([^`]+)`/g, '$1');\n \n // Replace paragraphs\n text = text.split('\\n\\n').map(p => `

${p}

`).join('');\n \n // Replace line breaks\n text = text.replace(/\\n/g, '
');\n \n return text;\n }\n \n // Function to send a message to the API\n async function sendMessage(userMessage: string): Promise {\n // Add user message to UI\n addMessage('user', userMessage);\n \n // Add user message to history\n messageHistory.push({ role: 'user', content: userMessage });\n \n // Add loading message\n const loadingMessage = addMessage('assistant', 'Thinking', true);\n \n try {\n const response = await fetch('/api/chat', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ messages: messageHistory }),\n });\n \n if (!response.ok) {\n throw new Error('API request failed');\n }\n \n const data: ApiResponse = await response.json();\n const assistantMessage = data.message.content;\n \n // Remove loading message\n loadingMessage.remove();\n \n // Add assistant message to UI with formatting\n const messageElement = addMessage('assistant', '');\n messageElement.querySelector('.message-content')!.innerHTML = formatResponse(assistantMessage);\n \n // Add assistant message to history\n messageHistory.push({ role: 'assistant', content: assistantMessage });\n \n } catch (error) {\n console.error('Error:', error);\n \n // Remove loading message\n loadingMessage.remove();\n \n // Show error message\n addMessage('assistant', 'Sorry, I encountered an error. Please try again.');\n }\n }\n \n // Event listener for send button\n sendButton.addEventListener('click', () => {\n const message = userInput.value.trim();\n if (message) {\n sendMessage(message);\n userInput.value = '';\n }\n });\n \n // Event listener for Enter key (but Shift+Enter for new line)\n userInput.addEventListener('keydown', (e: KeyboardEvent) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n sendButton.click();\n }\n });\n \n // Focus the input field on load\n userInput.focus();\n});",[],[142,174],"8104c5d8-14b2-11f0-94a2-569c3dd06744",["D",1744141734968],[],[142,34],["D",1744141478996],[166,167],[142],"4c839cf8-14b2-11f0-82c7-569c3dd06744",12,["D",1744141646882],3,"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(err);\n throw err;\n});\n\n// Add CORS middleware\napp.use(\"/*\", cors());\n\n// Initialize OpenAI client\nconst openai = new OpenAI();\n\n// API endpoint to handle chat requests\napp.post(\"/api/chat\", async (c) => {\n try {\n const body = await c.req.json();\n const { messages } = body;\n \n if (!messages || !Array.isArray(messages)) {\n return c.json({ error: \"Invalid messages format\" }, 400);\n }\n \n const completion = await openai.chat.completions.create({\n messages,\n model: \"gpt-4o-mini\", // Using a smaller model for cost efficiency\n max_tokens: 500,\n });\n \n return c.json({\n message: completion.choices[0].message,\n usage: completion.usage,\n });\n } catch (error) {\n console.error(\"Error calling OpenAI:\", error);\n return c.json({ error: \"Failed to process chat request\" }, 500);\n }\n});\n\n// Serve static files\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\", import.meta.url));\napp.get(\"/index.ts\", (c) => serveFile(\"/frontend/index.ts\", import.meta.url));\n\n// Export the Hono app\nexport default app.fetch;","chat-demo",[],[149,174],["D",1744141468311],[164],[149],["D",1744141435618],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":27},{"_13":86,"_33":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":238,"_239":240,"_241":242,"_243":27,"_244":27,"_245":27,"_246":25,"_247":-5,"_248":-7,"_249":-7,"_250":63,"_251":27,"_252":27,"_253":-5,"_254":27,"_255":27,"_256":27,"_257":-5},"ENV",{"_209":210,"_211":212,"_213":87,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v14