for the main title,

for major sections,

for paragraphs,

for quoted text, for emphasis, etc.\n2. **No Full Document:** Do NOT include \\`\\`, \\`\\`, or \\`\\` tags. Your response must be an HTML snippet that can be directly injected into a \\`
\\` on an existing page.\n3. **No Styling:** Do NOT include any CSS, \\`\n\n\n
\n
\n
AI Agent Builder
\n
Follow the steps to configure and run a specialized AI agent for a vast range of professional tasks.
\n
\n\n
\n
\n
\n
1. Choose an Industry
\n
\n
\n
\n
\n Can't find your industry?\n
\n \n \n
\n
\n
\n
\n\n
\n
\n
2. Select an Occupation
\n
\n
\n
\n
\n
\n\n
\n
\n
3. Pick a Task
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
4. Generated Agent Prompt
\n
\n
\n
\n
\n
\n\n
\n
\n
5. Configure Agent Inputs
\n
\n
\n
\n\n
\n
\n
✅ Agent Output
\n
\n
\n
\n
\n
\n\n \n\n`;\n}\n\n// --- BACKEND (API) ---\nconst app = new Hono();\n\n// --- API UTILITIES ---\nconst getAllOccupations = (() => {\n let allOccupations = null;\n return () => {\n if (allOccupations === null) {\n allOccupations = db.clusters.flatMap(c => c.occupations);\n }\n return allOccupations;\n };\n})();\n\n// --- API ROUTES ---\n// Serve Frontend\napp.get(\"/\", (c) => c.html(generateHtml(c.req.url)));\n\n// Get top-level clusters (name and id only)\napp.get(\"/api/clusters\", (c) => {\n return c.json(db.clusters.map(({ id, name }) => ({ id, name })));\n});\n\n// Get occupations for a given cluster\napp.get(\"/api/occupations/:cluster_id\", (c) => {\n const { cluster_id } = c.req.param();\n const cluster = db.clusters.find(c => c.id == parseInt(cluster_id, 10));\n const occupations = cluster ? cluster.occupations.map(({ onet_soc_code, title }) => ({ onet_soc_code, title })) : [];\n return c.json(occupations);\n});\n\n// Get tasks for a given occupation from the static DB\napp.get(\"/api/tasks/:onet_soc_code\", (c) => {\n const { onet_soc_code } = c.req.param();\n const occupation = getAllOccupations().find(o => o.onet_soc_code === onet_soc_code);\n const tasks = occupation ? occupation.tasks.map(({ id, task }) => ({ task_id: id, name: task })) : [];\n return c.json(tasks);\n});\n\n// Generate a refined prompt for an AI agent from the static DB\napp.get(\"/api/prompt/:onet_soc_code/:task_id\", async (c) => {\n const { onet_soc_code, task_id } = c.req.param();\n const occupation = getAllOccupations().find(o => o.onet_soc_code === onet_soc_code);\n const task = occupation?.tasks.find(t => t.id == parseInt(task_id, 10));\n if (!task || !occupation) {\n return c.json({ error: \"Task or Occupation not found.\" }, 404);\n }\n const userInput = `Occupation: ${occupation.title}, Task: ${task.task}`;\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{ role: \"system\", content: PROMPT_REFINER_SYSTEM_PROMPT }, { role: \"user\", content: userInput }],\n response_format: { type: \"json_object\" },\n });\n return c.json(JSON.parse(completion.choices[0].message.content));\n } catch (e) {\n console.error(\"Error in /api/prompt:\", e);\n return c.json({ error: \"AI failed to generate a valid prompt.\" }, 500);\n }\n});\n\n// --- NEW DYNAMIC PROMPT ENDPOINT ---\napp.post(\"/api/prompt/dynamic\", async (c) => {\n const { occupation_title, task } = await c.req.json();\n if (!occupation_title || !task) {\n return c.json({ error: \"occupation_title and task are required.\" }, 400);\n }\n const userInput = `Occupation: ${occupation_title}, Task: ${task}`;\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{ role: \"system\", content: PROMPT_REFINER_SYSTEM_PROMPT }, { role: \"user\", content: userInput }],\n response_format: { type: \"json_object\" },\n });\n return c.json(JSON.parse(completion.choices[0].message.content));\n } catch (e) {\n console.error(\"Error in /api/prompt/dynamic:\", e);\n return c.json({ error: \"AI failed to generate a valid prompt.\" }, 500);\n }\n});\n\n// Extract input fields from the generated prompt\napp.post(\"/api/inputs\", async (c) => {\n const { refined_prompt } = await c.req.json();\n if (!refined_prompt) return c.json({ error: \"refined_prompt is required\" }, 400);\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{ role: \"system\", content: INPUT_EXTRACTOR_SYSTEM_PROMPT }, { role: \"user\", content: refined_prompt }],\n response_format: { type: \"json_object\" },\n });\n return c.json(JSON.parse(completion.choices[0].message.content));\n } catch (e) {\n console.error(\"Error in /api/inputs:\", e);\n return c.json({ error: \"AI failed to extract inputs.\" }, 500);\n }\n});\n\n// Dynamic occupation generation\napp.post(\"/api/generate/occupations\", async (c) => {\n const { industry } = await c.req.json();\n if (!industry) return c.json({ error: \"Industry is a required field.\" }, 400);\n const userInput = JSON.stringify({ type: \"occupations\", industry: industry });\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: DYNAMIC_LIST_GENERATOR_PROMPT },\n { role: \"user\", content: userInput },\n ],\n response_format: { type: \"json_object\" },\n });\n return c.json(JSON.parse(completion.choices[0].message.content));\n } catch (e) {\n console.error(\"Error in /api/generate/occupations:\", e);\n return c.json({ error: \"AI failed to generate a valid list.\" }, 500);\n }\n});\n\n// --- NEW DYNAMIC TASK ENDPOINT ---\napp.post(\"/api/generate/tasks\", async (c) => {\n const { occupation_name } = await c.req.json();\n if (!occupation_name) return c.json({ error: \"occupation_name is a required field.\" }, 400);\n const userInput = JSON.stringify({ type: \"tasks\", occupation: occupation_name });\n try {\n const openai = new OpenAI();\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: DYNAMIC_LIST_GENERATOR_PROMPT },\n { role: \"user\", content: userInput },\n ],\n response_format: { type: \"json_object\" },\n });\n return c.json(JSON.parse(completion.choices[0].message.content));\n } catch (e) {\n console.error(\"Error in /api/generate/tasks:\", e);\n return c.json({ error: \"AI failed to generate a valid list.\" }, 500);\n }\n});\n\n// Execute the final prompt and format the output as HTML\napp.post(\"/api/execute\", async (c) => {\n const { refined_prompt, user_inputs } = await c.req.json();\n if (!refined_prompt || !user_inputs) return c.json({ error: \"refined_prompt and user_inputs are required\" }, 400);\n\n let finalUserPrompt = refined_prompt;\n for (const [key, value] of Object.entries(user_inputs)) {\n // --- BUG FIX --- Corrected the RegExp by reducing escape characters\n const placeholder = new RegExp(`\\\\{\\\\{\\\\s*${key}\\\\s*\\\\}\\\\}`, \"g\");\n finalUserPrompt = finalUserPrompt.replace(placeholder, String(value));\n }\n\n try {\n const openai = new OpenAI();\n const agentCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: finalUserPrompt },\n { role: \"user\", content: \"Proceed with the task as instructed.\" },\n ],\n });\n const agentOutput = agentCompletion.choices[0].message.content;\n if (!agentOutput) {\n throw new Error(\"The agent returned no content.\");\n }\n const htmlCompletion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: HTML_FORMATTER_SYSTEM_PROMPT },\n { role: \"user\", content: agentOutput },\n ],\n });\n const htmlOutput = htmlCompletion.choices[0].message.content;\n return c.json({ output: htmlOutput });\n } catch (e) {\n console.error(\"Error during execution:\", e);\n return c.json({ error: `AI execution failed: ${e.message}` }, 500);\n }\n});\n\nexport default app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/join/tasks/code/main.tsx","extension","actionData","errors"]