\n \n\n\n",[18,66],"3ee3db98-3857-11f1-8e2a-42b51c65c3df",["D",1776208279354],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\ninterface Message {\n role: \"user\" | \"assistant\";\n content: string;\n}\n\nfunction App() {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const messagesEndRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n async function sendMessage(e: React.FormEvent) {\n e.preventDefault();\n const text = input.trim();\n if (!text || loading) return;\n\n setInput(\"\");\n setMessages((prev) => [...prev, { role: \"user\", content: text }]);\n setLoading(true);\n\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: text }),\n });\n const data = await res.json();\n setMessages((prev) => [...prev, { role: \"assistant\", content: data.response }]);\n } catch (err) {\n setMessages((prev) => [\n ...prev,\n { role: \"assistant\", content: \"Sorry, something went wrong. Please try again.\" },\n ]);\n } finally {\n setLoading(false);\n inputRef.current?.focus();\n }\n }\n\n const suggestions = [\n \"What time is it in Tokyo?\",\n \"Calculate 42 * 17 + 3\",\n \"Pick a random number 1-100\",\n \"What can you do?\",\n ];\n\n return (\n

\n {/* Header */}\n

\n 🤖\n

Sample Agent

\n \n view source\n \n

\n\n {/* Messages area */}\n

\n {messages.length === 0 && (\n

🤖

Hi! I'm a sample agent.

\n I can tell time in any timezone, do math, and generate random numbers. Try asking me something!\n

\n {suggestions.map((s) => (\n {\n setInput(s);\n inputRef.current?.focus();\n }}\n className=\"px-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded-full text-sm text-gray-300 transition-colors\"\n >\n {s}\n \n ))}\n

\n )}\n\n {messages.map((msg, i) => (\n \n \n {msg.content}\n

\n ))}\n\n {loading && (\n

\n \n \n \n

\n )}\n\n

\n\n {/* Input area */}\n \n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[18,80],"pulls","branches",1,"forks","envVars",{"_182":26,"_184":26},"connections",{"_182":26,"_183":26},"count","unfilledCount","emptyCount",{"_34":156,"_13":18,"_64":82,"_44":-5,"_36":37,"_157":158,"_159":24,"_38":223,"_40":26,"_67":83,"_161":-5,"_68":30,"_162":-5,"_199":224,"_17":225},{"_34":170,"_13":80,"_64":79,"_44":82,"_36":37,"_157":74,"_159":24,"_38":220,"_40":26,"_67":81,"_161":172,"_68":30,"_162":-5,"_199":221,"_17":222},{"_34":166,"_13":66,"_64":65,"_44":82,"_36":37,"_157":41,"_159":24,"_38":217,"_40":26,"_67":21,"_161":168,"_68":30,"_162":-5,"_199":218,"_17":219},{"_34":210,"_13":211,"_64":212,"_44":-5,"_36":37,"_157":121,"_159":24,"_38":213,"_40":26,"_67":21,"_161":214,"_68":30,"_162":-5,"_199":215,"_17":216},{"_34":202,"_13":203,"_64":204,"_44":-5,"_36":37,"_157":205,"_159":24,"_38":206,"_40":26,"_67":81,"_161":207,"_68":30,"_162":-5,"_199":208,"_17":209},{"_34":191,"_13":192,"_64":193,"_44":-5,"_36":37,"_157":194,"_159":24,"_38":195,"_40":196,"_67":197,"_161":198,"_68":30,"_162":-5,"_199":200,"_17":201},"2781693e-3857-11f1-8e2a-42b51c65c3df","main.ts","ec84ce74-f8fb-11f0-bc42-42dde27851f2",6,["D",1776208240110],5,"http","import { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", (c) => serveFile(\"frontend/index.html\", import.meta.url));\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// API route for chat\napp.post(\"/api/chat\", async (c) => {\n const { message } = await c.req.json();\n const { runAgent } = await import(\"./agent.ts\");\n const result = await runAgent(message);\n return c.json({ response: result });\n});\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[192],"2ea5d70e-3857-11f1-8e2a-42b51c65c3df","agent.ts","2ea5d7cc-3857-11f1-8e2a-42b51c65c3df",7,["D",1776208252104],"import { Agent, run, tool } from \"npm:@openai/agents@0.7\";\nimport { z } from \"npm:zod\";\n\n// Custom tool: get current time in any timezone\nconst getTimeTool = tool({\n name: \"get_current_time\",\n description: \"Get the current date and time in a given timezone (e.g. 'America/New_York', 'Europe/London', 'Asia/Tokyo'). Use 'UTC' if no timezone is specified.\",\n parameters: z.object({\n timezone: z.string().describe(\"IANA timezone string, e.g. 'America/New_York'\"),\n }),\n execute: async ({ timezone }) => {\n try {\n const now = new Date();\n const formatted = now.toLocaleString(\"en-US\", {\n timeZone: timezone,\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n second: \"2-digit\",\n timeZoneName: \"short\",\n });\n return `Current time in ${timezone}: ${formatted}`;\n } catch {\n return `Invalid timezone: \"${timezone}\". Use IANA format like \"America/New_York\".`;\n }\n },\n});\n\n// Custom tool: do math calculations\nconst calculatorTool = tool({\n name: \"calculator\",\n description: \"Evaluate a mathematical expression. Supports basic arithmetic (+, -, *, /), exponents (**), and parentheses.\",\n parameters: z.object({\n expression: z.string().describe(\"The math expression to evaluate, e.g. '(2 + 3) * 4'\"),\n }),\n execute: async ({ expression }) => {\n try {\n // Safe math evaluation using Function constructor with only math operations\n const sanitized = expression.replace(/[^0-9+\\-*/().%\\s^]/g, \"\");\n const result = new Function(`return (${sanitized.replace(/\\^/g, \"**\")})`)();\n return `${expression} = ${result}`;\n } catch {\n return `Could not evaluate: \"${expression}\". Make sure it's a valid math expression.`;\n }\n },\n});\n\n// Custom tool: generate a random number\nconst randomNumberTool = tool({\n name: \"random_number\",\n description: \"Generate a random integer between min and max (inclusive).\",\n parameters: z.object({\n min: z.number().describe(\"Minimum value\"),\n max: z.number().describe(\"Maximum value\"),\n }),\n execute: async ({ min, max }) => {\n const result = Math.floor(Math.random() * (max - min + 1)) + min;\n return `Random number between ${min} and ${max}: ${result}`;\n },\n});\n\nconst agent = new Agent({\n name: \"Sample Agent\",\n instructions: `You are a friendly and helpful AI assistant with access to tools. \nYou can:\n- Tell the current time in any timezone\n- Do math calculations\n- Generate random numbers\n\nBe concise but helpful. Use your tools when the user's request would benefit from them.\nIf someone asks what you can do, tell them about your tools.`,\n tools: [getTimeTool, calculatorTool, randomNumberTool],\n});\n\nexport async function runAgent(message: string): Promise {\n const result = await run(agent, message, { maxTurns: 5 });\n return result.finalOutput;\n}\n",[],[203],"48e46bd0-3857-11f1-b691-42b51c65c3df","README.md","48e46c7a-3857-11f1-b691-42b51c65c3df",["D",1776208296134],"# Sample Agent\n\nA chat-style AI agent built with the [OpenAI Agents SDK](https://openai.github.io/openai-agents-js/) and a React frontend.\n\n## Tools\n\nThe agent has 3 custom tools:\n\n| Tool | Description |\n|------|-------------|\n| 🕐 **get_current_time** | Get the current time in any IANA timezone |\n| 🧮 **calculator** | Evaluate math expressions |\n| 🎲 **random_number** | Generate random integers in a range |\n\n## Architecture\n\n```mermaid\nflowchart LR\n A[React Chat UI] -->|POST /api/chat| B[Hono Server]\n B --> C[OpenAI Agent]\n C -->|tool calls| D[Tools]\n D -->|results| C\n C -->|final answer| B\n B -->|JSON response| A\n```\n\n## Setup\n\n1. **Set the `OPENAI_API_KEY` environment variable.** Get your key at https://platform.openai.com/api-keys\n2. Open the live URL and start chatting!\n\n## Files\n\n- `main.ts` — Hono HTTP server (entrypoint)\n- `agent.ts` — Agent definition with tools\n- `frontend/index.html` — HTML shell\n- `frontend/app.tsx` — React chat UI\n",[],[211],["D",1776208259787],[],[18,66],["D",1776208279354],[],[18,80],["D",1776208254525],[186,187],[18],["D",1769242133636],["D",1789530055570],{"_11":12,"_134":71},{"_11":12,"_130":-5,"_70":71,"_31":69,"_131":132,"_133":30},{"_40":121,"_13":16,"_34":37,"_122":85,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_54":-5,"_153":264,"_265":266,"_267":268,"_269":30,"_270":30,"_271":30,"_272":24,"_273":-5,"_274":-7,"_275":-7,"_276":26,"_277":30,"_278":30,"_279":-5,"_280":30,"_281":30,"_282":30,"_283":-5},"ENV",{"_235":236,"_237":238,"_239":16,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

History · frontend