\n[Provide a brief summary of how these changes will improve the page structure]\n

\n\n\nEnsure that your recommendations are specific, actionable, and aligned with the provided design guidelines. Focus on improvements that will enhance the user experience and overall effectiveness of the page.\n`;\n};",[160],"26ebee76-7e7c-11f0-9977-0224a6c84d84","demo.tsx","0198cc3d-1e21-760e-96fe-ae2a9eab381b",["D",1755773214141],"http","import agent from \"./agent.tsx\";\n\nexport default async function(req: Request) {\n // Default objective as fallback\n let objective = `Buy 100 shares of MSFT and 100 shares of NVDA.`;\n\n try {\n if (req.method === \"POST\") {\n // Check if the request is a form submission or JSON\n const contentType = req.headers.get(\"Content-Type\") || \"\";\n\n if (contentType.includes(\"application/json\")) {\n const body = await req.json();\n return new Response(JSON.stringify(body, null, 2), {\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n } else if (contentType.includes(\"application/x-www-form-urlencoded\")) {\n // Process form data\n const formData = await req.formData();\n objective = formData.get(\"objective\")?.toString() || objective;\n\n // Continue with API call using the submitted objective\n } else {\n return new Response(\"Unsupported content type\", { status: 415 });\n }\n\n // Make API call with the objective from the form\n const requestBody = {\n messages: [\n { role: \"user\", content: objective },\n ],\n streamResults: false,\n };\n\n const response = await agent(\n new Request(\"/\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${Deno.env.get(\"AGENT_API_KEY\")}`,\n },\n body: JSON.stringify(requestBody),\n }),\n );\n\n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}, Text: ${await response.text()}`);\n }\n\n // Get the API response data\n const responseData = await response.json();\n console.log(\"API Response:\", responseData);\n\n // Return HTML with the results\n return new Response(\n generateHtmlPage(objective, responseData),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n } else {\n // For GET requests, return the HTML form\n return new Response(\n generateHtmlPage(),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n }\n } catch (error) {\n console.error(\"Error:\", error);\n // Return error as HTML\n return new Response(\n generateHtmlPage(objective, null, `Failed to fetch results: ${error.message}`),\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n status: 500,\n },\n );\n }\n}\n\n// Function to generate HTML for tool calls\nfunction generateToolCallsHtml(results: any): string {\n if (!results || !results.steps) {\n return \"\";\n }\n\n // Collect all tool calls from all steps\n const allToolCalls: any[] = [];\n\n results.steps.forEach((step: any) => {\n if (step.toolResults && step.toolResults.length > 0) {\n step.toolResults.forEach((toolResult: any) => {\n allToolCalls.push(toolResult);\n });\n }\n });\n\n if (allToolCalls.length === 0) {\n return \"\";\n }\n\n // Generate HTML for each tool call\n const toolCallsHtml = allToolCalls.map((toolCall: any, index: number) => {\n const toolName = toolCall.name || \"Unknown Tool\";\n const args = toolCall.args || {};\n const result = toolCall.result || {};\n\n return `\n

\n ${toolName}\n

Arguments:

${JSON.stringify(args, null, 2)}

\n \n

Result:

${JSON.stringify(result, null, 2)}

\n `;\n }).join(\"\");\n\n return `\n

Tool Calls:

\n ${toolCallsHtml}\n

\n `;\n}\n\n// Function to generate the HTML page with the form and optional results\nfunction generateHtmlPage(objective?: string, results?: any, errorMessage?: string): string {\n const defaultObjective = objective || `What is the current temperature in Tokyo?`;\n\n // Define suggested prompts\n const suggestedPrompts = [\n { label: \"Select a suggested prompt...\", value: \"\" },\n { label: \"Check the weather\", value: \"What is the current temperature in Tokyo?\" },\n {\n label: \"Product research\",\n value: \"Summarize Val Town's most recent feature releases.\",\n },\n {\n label: \"Autonomous Stock Trading Prompt\",\n value:\n `Use recent stock recommendations by Jim Cramer as an inverse signal and make 3 to 5 corresponding stock trades.`,\n },\n ];\n\n // Generate options for the dropdown\n const promptOptions = suggestedPrompts.map(prompt => ``).join(\n \"\",\n );\n\n return `\n\n\n \n \n Autonomous Val\n \n \n \n\n\n

Autonomous Val

\n \n \n \n ${\n errorMessage\n ? `\n

Error

${errorMessage}

\n `\n : \"\"\n }\n \n ${\n results\n ? `\n

Results:

\n \n

${results.text || \"No text response\"}

\n \n ${generateToolCallsHtml(results)}\n

\n `\n : \"\"\n }\n

\n\n`;\n}",[166],"8319a9ce-7e7f-11f0-b121-0224a6c84d84","agent.tsx",3,["D",1755774657378],2,"import { anthropic } from \"npm:@ai-sdk/anthropic\";\nimport { openai } from \"npm:@ai-sdk/openai\";\nimport { generateText, streamText } from \"npm:ai\";\nimport { getSystemPrompt } from \"./prompt.tsx\";\nimport {\n calculatorTool,\n getWeatherTool,\n planningTool,\n statusTool,\n thinkingTool,\n tradeStocksTool,\n webFetchTool,\n webSearchTool,\n} from \"./tools.tsx\";\n\nimport { formatResult, parseStatusToolResult } from \"./utils.tsx\";\n\nexport default async function POST(req: Request) {\n if (\n req.headers.get(\"Authorization\") !==\n `Bearer ${Deno.env.get(\"AGENT_API_KEY\")}`\n ) {\n return new Response(\"Unauthorized\", { status: 401 });\n }\n const { messages, streamResults } = await req.json();\n\n const tools = {\n // planningTool,\n // thinkingTool,\n // calculatorTool,\n // webSearchTool,\n // webFetchTool,\n // tradeStocksTool,\n // getWeatherTool,\n };\n\n const maxSteps = 10;\n\n const model = Deno.env.get(\"ANTHROPIC_API_KEY\")\n ? anthropic(\"claude-3-7-sonnet-latest\")\n : openai(\"gpt-5\");\n\n const options = {\n model,\n temperature: 0.1,\n maxSteps,\n messages: [\n {\n role: \"system\",\n content: getSystemPrompt(tools, maxSteps, streamResults),\n },\n ...messages,\n ],\n onStepFinish: (step: any) => {\n if (step.toolResults) {\n console.log(step.toolResults.map((result: any) => ({\n toolCallId: result.toolCallId,\n toolName: result.toolName,\n args: result.args,\n result: result.result,\n })));\n }\n },\n };\n\n if (streamResults) {\n // Streaming Chat Mode\n const result = streamText({\n ...options,\n toolChoice: \"auto\",\n tools,\n });\n return result.toDataStreamResponse();\n } else {\n // Autonomous Agent Mode\n const autonomousTools = { statusTool, ...tools }; // add a status tool\n const result = await generateText({\n ...options,\n tools: autonomousTools,\n toolChoice: \"required\",\n experimental_prepareStep: async ({ steps }: { steps: any[] }) => {\n // This is a hack to exit agent loop when the statusTool is called\n // v5 of the AI SDK will have a continueUtil parameter\n if (\n steps.length > 0 && parseStatusToolResult(steps[steps.length - 1])\n ) {\n return {\n experimental_activeTools: [],\n };\n }\n },\n });\n\n return new Response(\n JSON.stringify(formatResult(result), null, 2),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n}",[173],"26ebe03e-7e7c-11f0-9977-0224a6c84d84","README.md","0198cc3d-1e21-760e-96fe-a6422dad4c8d",["D",1755773214141],"# Autonomous Val\nThis project demonstrates how to build autonomous agents on Val Town that can be triggered by API calls, cron jobs, etc.\n\n![Screenshot 2025-05-29 at 8.03.54 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8d53ae11-7cc7-415d-9a2d-edd9c66c5500/public)\n\n## Setup\nRemix this Val into your Val Town account.\n\nConfigure the following variables in your environment: \n- `AGENT_API_KEY` (This is a secure token that you choose to secure the agent.tsx POST endpoint)\n- `OPENAI_API_KEY` (An OpenAI API Key)\n- `EXA_API_KEY` (Optional, though needed if you use the web search tool)\n\n## Usage\nUse `demo.tsx` to send objectives to your agent. \n\n### API Usage\nTo use the API from another client, you can POST authenticated requests to the agent.tsx endpoint:\n\n```javascript\nconst requestBody = {\n messages: [\n { role: \"user\", content: \"What is the difference in height between the Salesforce Tower and the Empire State Building?\" },\n ],\n streamResults: false,\n};\n\nconst response = await fetch(\"https://.web.val.run/\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${Deno.env.get(\"AGENT_API_KEY\")}`,\n },\n body: JSON.stringify(requestBody),\n});\n```\n\n### Streaming Chat\nThe API will also work with streaming chat front ends based on the Vercel AI SDK's useChat hook.\n\nYou just need to pass `streamResults: true` in your API POST request.\n\n## Using Other Models\nIt is easy to reconfigure the agent to work with other providers that are supported by Vercel's AI SDK, though not all models support tool calling. \n\nAnthropic's models should work well, but the system prompt would need to be retuned to work with Claude.\n\nLearn more: https://ai-sdk.dev/docs/foundations/providers-and-models",[180],"pulls","forks","envVars",{"_191":176,"_193":62},"connections",{"_191":62,"_192":62},"count","unfilledCount","emptyCount",{"_21":179,"_13":180,"_139":181,"_141":-5,"_142":33,"_143":31,"_144":58,"_23":216,"_30":62,"_146":112,"_148":183,"_150":47,"_151":-5,"_201":217,"_100":218},{"_21":172,"_13":173,"_139":56,"_141":-5,"_142":33,"_143":174,"_144":58,"_23":213,"_30":176,"_146":169,"_148":177,"_150":47,"_151":-5,"_201":214,"_100":215},{"_21":165,"_13":166,"_139":167,"_141":-5,"_142":33,"_143":31,"_144":58,"_23":210,"_30":62,"_146":169,"_148":170,"_150":47,"_151":-5,"_201":211,"_100":212},{"_21":159,"_13":160,"_139":161,"_141":-5,"_142":33,"_143":41,"_144":58,"_23":207,"_30":31,"_146":147,"_148":163,"_150":47,"_151":-5,"_201":208,"_100":209},{"_21":153,"_13":154,"_139":155,"_141":-5,"_142":33,"_143":31,"_144":58,"_23":204,"_30":62,"_146":147,"_148":157,"_150":47,"_151":-5,"_201":205,"_100":206},{"_21":137,"_13":138,"_139":140,"_141":-5,"_142":33,"_143":31,"_144":58,"_23":200,"_30":62,"_146":147,"_148":149,"_150":47,"_151":-5,"_201":202,"_100":203},["D",1755773214141],"children",[],[138],["D",1755773214141],[],[154],["D",1755774948221],[],[160],["D",1755773214141],[],[166],["D",1755774657378],[],[173],["D",1755773214141],[],[180],["D",1755773214141],{"_11":12,"_98":94},{"_11":12,"_92":-5,"_93":94,"_53":54,"_95":96,"_97":47},{"_30":41,"_13":40,"_21":33,"_28":29,"_32":42,"_34":43,"_85":49,"_86":87,"_88":89,"_90":14,"_91":12},"ctx",{"_78":-5,"_122":256,"_257":258,"_259":260,"_261":47,"_262":47,"_263":47,"_264":58,"_265":-5,"_266":-7,"_267":-7,"_268":62,"_269":47,"_270":47,"_271":-5,"_272":47,"_273":47,"_274":47,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":40,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Branches2

Branches
2