Error Occurred

{error}

\n {\n setError(null);\n setView(\"input\");\n }}\n style={{\n width: \"100%\",\n padding: \"10px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n Try Again\n \n

\n );\n }\n\n // Loading screen\n if (view === \"loading\") {\n return (\n \n

{loadingStatus}

\n \n \n \n \n );\n }\n\n // Home screen with input and recent agents\n if (view === \"input\") {\n return (\n

Echo Prompt Creator

\n\n

\n {/* Input section */}\n

Create New Agent

\n\n {/* Recent agents section */}\n

Recent Agents

\n \n \n {recentAgents.map((agent, index) => (\n selectAgent(agent)}\n whileHover={{ scale: 1.03, boxShadow: \"0 4px 8px rgba(0,0,0,0.15)\" }}\n >\n \n

{agent.name}

\n {agent.description.length > 100\n ? agent.description.substring(0, 100) + \"...\"\n : agent.description}\n

\n \n ))}\n \n {recentAgents.length === 0 &&

No agents created yet

}\n

\n \n );\n }\n\n // Question answering screen\n if (view === \"questions\") {\n const currentQuestion = questions[currentQuestionIndex];\n\n return (\n

{currentQuestion?.question || \"No question available\"}

\n \n {(currentQuestion?.responses || []).map((response, index) => (\n handleResponseSelect(response)}\n style={{\n display: \"block\",\n width: \"100%\",\n margin: \"10px 0\",\n padding: \"15px\",\n backgroundColor: \"#f0f0f0\",\n border: \"1px solid #ccc\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n textAlign: \"left\",\n fontSize: \"16px\",\n }}\n whileHover={{\n backgroundColor: \"#e0e0e0\",\n boxShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n }}\n >\n {response}\n \n ))}\n \n

\n Question {currentQuestionIndex + 1} of {questions.length}\n

\n );\n }\n\n // Chat interface\n if (view === \"chat\") {\n return (\n \n {/* Header */}\n \n

\n a.id === selectedAgent)?.name || \"Agent\")\n }.png`}\n alt=\"Agent\"\n style={{\n width: \"40px\",\n height: \"40px\",\n borderRadius: \"20px\",\n marginRight: \"10px\",\n }}\n />\n

\n {recentAgents.find(a => a.id === selectedAgent)?.name || \"AI Agent\"}\n

\n setView(\"input\")}\n style={{\n padding: \"8px 15px\",\n backgroundColor: \"white\",\n color: \"#4CAF50\",\n border: \"none\",\n borderRadius: \"5px\",\n cursor: \"pointer\",\n }}\n >\n Return Home\n \n \n\n {/* Messages area */}\n \n {chatMessages.map((msg, index) => (\n \n {/* Handle special message with data */}\n {msg.data\n ? (\n

{msg.content}

\n \n {JSON.stringify(msg.data, null, 2)}\n \n

\n )\n : (\n msg.content\n )}\n \n ))}\n

\n\n {/* Command Suggestion Menu */}\n {showCommandMenu && (\n \n \n {filteredCommands.map((cmd, index) => (\n handleCommandSelect(cmd)}\n style={{\n padding: \"10px 15px\",\n borderBottom: index < filteredCommands.length - 1 ? \"1px solid #eee\" : \"none\",\n cursor: \"pointer\",\n display: \"flex\",\n justifyContent: \"space-between\",\n }}\n onMouseOver={(e) => e.currentTarget.style.backgroundColor = \"#f5f5f5\"}\n onMouseOut={(e) => e.currentTarget.style.backgroundColor = \"transparent\"}\n >\n /{cmd.name}\n {cmd.description}\n \n ))}\n \n \n )}\n\n {/* Command Input Modal */}\n {showCommandModal && selectedCommand && (\n \n \n

/{selectedCommand.name}

{selectedCommand.description}

\n\n {\n e.preventDefault();\n handleCommandModalSubmit();\n }}\n >\n {selectedCommand.inputs\n && selectedCommand.inputs.map((input, idx) => (\n

\n \n {input.name}\n {input.required ? \" *\" : \"\"}\n \n \n {input.description}\n

\n\n {input.type === \"text\" && (\n \n setCommandInputs({\n ...commandInputs,\n [input.name]: e.target.value,\n })}\n required={input.required}\n placeholder={input.placeholder || \"\"}\n style={{\n width: \"100%\",\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n }}\n />\n )}\n\n {input.type === \"textarea\" && (\n \n setCommandInputs({\n ...commandInputs,\n [input.name]: e.target.value,\n })}\n required={input.required}\n placeholder={input.placeholder || \"\"}\n style={{\n width: \"100%\",\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n minHeight: \"100px\",\n }}\n />\n )}\n\n {input.type === \"select\" && (\n \n setCommandInputs({\n ...commandInputs,\n [input.name]: e.target.value,\n })}\n required={input.required}\n style={{\n width: \"100%\",\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n }}\n >\n \n {input.options && input.options.map((opt, optIdx) => (\n \n ))}\n \n )}\n

\n ))}\n\n \n {\n setShowCommandModal(false);\n setSelectedCommand(null);\n }}\n style={{\n padding: \"8px 15px\",\n backgroundColor: \"#f0f0f0\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Cancel\n \n \n Execute\n \n \n \n \n \n )}\n\n {/* Input area */}\n \n setChatInput(e.target.value)}\n style={{\n flex: 1,\n padding: \"12px 15px\",\n borderRadius: \"25px\",\n border: \"1px solid #ccc\",\n fontSize: \"16px\",\n marginRight: \"10px\",\n }}\n placeholder=\"Type a message or / to view commands...\"\n />\n \n Send\n \n \n \n );\n }\n\n return

Unknown view state

;\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const openai = new OpenAI();\n\n // Use the val's URL as a unique key for database tables\n const KEY = \"EchoPrompter\";\n\n // Initialize database tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_agents (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n prompt TEXT NOT NULL,\n commands TEXT, /* JSON array of commands */\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_conversations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n agent_id INTEGER NOT NULL,\n user_message TEXT NOT NULL,\n assistant_response TEXT NOT NULL,\n timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (agent_id) REFERENCES ${KEY}_agents(id)\n )\n `);\n\n // Handle route: get recent agents\n if (new URL(request.url).pathname === \"/recent-agents\") {\n try {\n const agents = await sqlite.execute(\n `SELECT id, name, description, created_at FROM ${KEY}_agents ORDER BY created_at DESC LIMIT 20`,\n );\n return new Response(JSON.stringify(agents.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Database error:\", error);\n return new Response(\n JSON.stringify({ error: \"Failed to fetch recent agents\" }),\n { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n }\n\n // Handle route: get agent commands\n if (new URL(request.url).pathname.startsWith(\"/agent-commands/\")) {\n try {\n const agentId = new URL(request.url).pathname.split(\"/\").pop();\n\n const result = await sqlite.execute(\n `SELECT commands FROM ${KEY}_agents WHERE id = ?`,\n [agentId],\n );\n\n if (!result.rows.length) {\n return new Response(\n JSON.stringify({ error: \"Agent not found\" }),\n { status: 404, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n // Parse the commands from JSON or return default help command\n let commands = [];\n try {\n if (result.rows[0].commands) {\n commands = JSON.parse(result.rows[0].commands);\n }\n } catch (e) {\n console.error(\"Error parsing commands:\", e);\n }\n\n // Always include the help command\n if (!commands.some(cmd => cmd.name === \"help\")) {\n commands.push({\n name: \"help\",\n description: \"Show available commands\",\n inputs: [],\n });\n }\n\n return new Response(\n JSON.stringify({ commands }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n } catch (error) {\n console.error(\"Error fetching agent commands:\", error);\n return new Response(\n JSON.stringify({ error: \"Failed to fetch agent commands\" }),\n { status: 500, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n }\n\n // Handle route: generate questions\n if (new URL(request.url).pathname === \"/generate-questions\") {\n try {\n const { userInput } = await request.json();\n const echoPrompt = getEchoPrompt();\n\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: echoPrompt\n + \"Respond in strict JSON format with a questions[] array containing question objects and under each question a responses[] array which is a list of constructive responses to the question given the context. The responses should be broad and cover most common perspectives and use cases. Include 'None', 'Neither', 'All of the above', types of responses as well. Give the user massive flexibility with these canned responses. Each potential viewpoint should be addressed for every use case, or even negative for those not listed\",\n },\n {\n role: \"user\",\n content: userInput,\n },\n ],\n model: \"gpt-4o-mini\",\n response_format: { type: \"json_object\" },\n });\n\n // Parse the response and ensure it matches our expected structure\n const rawData = completion.choices[0].message.content;\n const parsedData = typeof rawData === \"string\"\n ? JSON.parse(rawData)\n : rawData;\n\n // Extract questions from the 'questions' key\n const questionsData = parsedData.questions || [];\n\n // Validate the structure\n const validatedQuestions = questionsData.map(q => ({\n question: q.question || \"Unnamed Question\",\n responses: q.responses || [],\n }));\n\n return new Response(JSON.stringify(validatedQuestions), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Server-side error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message,\n details: error.toString(),\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Handle route: finalize conversation\n if (new URL(request.url).pathname === \"/finalize-conversation\") {\n try {\n const { userInput, questions, responses } = await request.json();\n const echoPrompt = getEchoPrompt();\n\n // First, generate the agent prompt\n const completion2 = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: echoPrompt\n + \"return the final echo prompt given the users input and answers to questions. return only a json object with a name, description, and prompt values \",\n },\n {\n role: \"user\",\n content: userInput,\n },\n ...questions.map((q, index) => ({\n role: \"user\",\n content: `Question: ${q.question}\\nResponse: ${responses[index]}`,\n })),\n ],\n model: \"gpt-4o-mini\",\n response_format: { type: \"json_object\" },\n });\n\n const finalResponse = completion2.choices[0].message.content;\n const parsedResponse = typeof finalResponse === \"string\"\n ? JSON.parse(finalResponse)\n : finalResponse;\n\n // Then, generate commands for the agent based on its purpose and description\n const commandsCompletion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `You are a developer creating slash commands for an AI agent. Given the agent's description and purpose,\n generate the slash commands that would be actions with outputs the best professionals in the agent's line of duty. Only desirable augment, streamline, reduce complexity, etc. be useful for users working with this agent. These commands should be relevant to the agent's specialty, must be required to achieve most desired outcomes, and lifts the agent to a higher eschelon the 1%, cream of the crop. the missing pieces. Each command should have:\n 1. name: A simple, clear name (without the slash)\n 2. description: A brief explanation of what the command does\n 3. inputs: An array of input objects with name, description, type (text, textarea, select), required (boolean), \n placeholder (optional), and for select type, an options array with label/value pairs\n \n NOTE: Always include the help command that shows all available commands.\n \n Return a JSON array of command objects, nothing else.`,\n },\n {\n role: \"user\",\n content: `Agent name: ${parsedResponse.name}\n Agent description: ${parsedResponse.description}\n Agent purpose: ${userInput}\n \n Generate appropriate slash commands for this specific agent.`,\n },\n ],\n model: \"gpt-4o-mini\",\n response_format: { type: \"json_object\" },\n });\n\n // Parse and validate the commands\n const commandsData = commandsCompletion.choices[0].message.content;\n const parsedCommands = typeof commandsData === \"string\"\n ? JSON.parse(commandsData)\n : commandsData;\n\n // Ensure commands exist and are in an array\n const commands = Array.isArray(parsedCommands)\n ? parsedCommands\n : (parsedCommands.commands && Array.isArray(parsedCommands.commands))\n ? parsedCommands.commands\n : [];\n\n // Ensure there's always a help command\n if (!commands.some(cmd => cmd.name === \"help\")) {\n commands.push({\n name: \"help\",\n description: \"Show available commands\",\n inputs: [],\n });\n }\n\n // Insert into database with commands\n const result = await sqlite.execute(\n `INSERT INTO ${KEY}_agents (name, description, prompt, commands) VALUES (?, ?, ?, ?)`,\n [\n parsedResponse.name,\n parsedResponse.description,\n parsedResponse.prompt,\n JSON.stringify(commands),\n ],\n );\n\n return new Response(\n JSON.stringify({\n finalResponse: JSON.stringify(parsedResponse, null, 2),\n agentId: result.lastInsertRowid,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Finalization error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message,\n details: error.toString(),\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Handle route: chat with agent\n if (new URL(request.url).pathname === \"/chat\") {\n try {\n const { agentId, message, history } = await request.json();\n\n // Get agent from database\n const agentResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_agents WHERE id = ?`,\n [agentId],\n );\n\n const agent = agentResult.rows[0];\n\n if (!agent) {\n return new Response(\n JSON.stringify({ error: \"Agent not found\" }),\n { status: 404, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n // Format the history into OpenAI message format\n const messages = [\n {\n role: \"system\",\n content: agent.prompt,\n },\n ];\n\n // Add conversation history if it exists\n if (history && history.length > 0) {\n // Filter out system messages and map to OpenAI format\n history.forEach(msg => {\n if (msg.role !== \"system\") {\n messages.push({\n role: msg.role,\n content: msg.content,\n });\n }\n });\n } else {\n // If no history, just add the current message\n messages.push({\n role: \"user\",\n content: message,\n });\n }\n\n // Chat with the agent using the stored prompt and history\n const completion = await openai.chat.completions.create({\n messages: messages,\n model: \"gpt-4o-mini\",\n });\n\n const response = completion.choices[0].message.content;\n\n // Log conversation in database\n await sqlite.execute(\n `INSERT INTO ${KEY}_conversations (agent_id, user_message, assistant_response) VALUES (?, ?, ?)`,\n [agentId, message, response],\n );\n\n return new Response(JSON.stringify({ response }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Chat error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message,\n details: error.toString(),\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Handle route: execute command\n if (new URL(request.url).pathname === \"/execute-command\") {\n try {\n const { agentId, command, inputs, history } = await request.json();\n\n // Get agent from database\n const agentResult = await sqlite.execute(\n `SELECT * FROM ${KEY}_agents WHERE id = ?`,\n [agentId],\n );\n\n const agent = agentResult.rows[0];\n\n if (!agent) {\n return new Response(\n JSON.stringify({ error: \"Agent not found\" }),\n { status: 404, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n // Parse the agent's commands\n let commands = [];\n try {\n if (agent.commands) {\n commands = JSON.parse(agent.commands);\n }\n } catch (e) {\n console.error(\"Error parsing commands:\", e);\n }\n\n // Handle the special help command\n if (command === \"help\") {\n // Generate help content from available commands\n const helpContent = commands.length > 0\n ? `**Available Commands**\\n\\n${commands.map(cmd => `**/${cmd.name}** - ${cmd.description}`).join(\"\\n\\n\")}`\n : \"No commands are available for this agent.\";\n\n return new Response(\n JSON.stringify({\n resultType: \"message\",\n result: helpContent,\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n // Find the command in the agent's command list\n const commandObj = commands.find(cmd => cmd.name === command);\n\n if (!commandObj) {\n return new Response(\n JSON.stringify({ error: `Command /${command} not found` }),\n { status: 404, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n // Format the command execution request for the AI\n const messages = [\n {\n role: \"system\",\n content:\n `${agent.prompt}\\n\\nYou are now executing the command /${command}. This command is described as: ${commandObj.description}\\n\\nRespond as if you're handling this specific command. Your response should be focused, helpful, and directly address the command's purpose. If the command requires specific formatting or structure in the response, follow that format.`,\n },\n ];\n\n // Add conversation history for context\n if (history && history.length > 0) {\n history.forEach(msg => {\n if (msg.role !== \"system\") {\n messages.push({\n role: msg.role,\n content: msg.content,\n });\n }\n });\n }\n\n // Add the command and its inputs as the final user message\n const inputsFormatted = Object.entries(inputs)\n .map(([key, value]) => `${key}: ${value}`)\n .join(\"\\n\");\n\n messages.push({\n role: \"user\",\n content: `Execute command: /${command}${inputsFormatted ? `\\nInputs:\\n${inputsFormatted}` : \"\"}`,\n });\n\n // Execute the command with the AI\n const completion = await openai.chat.completions.create({\n messages: messages,\n model: \"gpt-4o-mini\",\n });\n\n const response = completion.choices[0].message.content;\n\n // For most commands, return a simple message response\n return new Response(\n JSON.stringify({\n resultType: \"message\",\n result: response,\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n } catch (error) {\n console.error(\"Command execution error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message,\n details: error.toString(),\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Default HTML response\n return new Response(\n `\n \n \n Echo Prompt Creator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nfunction getEchoPrompt() {\n return `You are the Echo Prompter, a masterful architect of system prompts whose sole purpose is to create prompts that fully embody the principles of Echo Prompting. Your unique skill lies in your ability to write each system prompt in the exact style, tone, and structure of the desired output. This ensures perfect alignment between the instructions and the behavior of the resulting agent.\nWho You Are\n1. Stylistic Chameleon: You adopt the voice, tone, and style of the intended output when writing every system prompt.\n2. Master Interrogator: You ask detailed, probing questions to gather all necessary information about the desired agent.\n3. Gap Finder and Refiner: You identify any missing details, ambiguities, or inconsistencies in user requests and resolve them methodically.\n4. Verification Specialist: You perform a rigorous double-check to ensure completeness and alignment with user expectations before finalizing any system prompt.\n5. Echo Prompting Expert: Every system prompt you produce mirrors the style and behavior of its intended output while adhering to the principles of clarity, precision, and contextual alignment.\nYour Process\n1. Interrogate (Gather Information):\n * Ask targeted questions to clarify tone, style, behavior, formatting preferences, use cases, and any specific examples required.\n * Ensure every detail about the desired output is captured before moving forward.\n2. Refine (Draft and Iterate):\n * Draft a preliminary system prompt written entirely in the style of the desired output.\n * Identify gaps or inconsistencies in your draft and return to the user with follow-up questions to refine it further.\n3. Verify (Double-Check for Completeness):\n * Review your draft against user specifications:\n * Does it accurately reflect the tone, voice, and style of the desired output?\n * Does it include clear behavioral rules and practical examples?\n * Are there any ambiguities or missing details?\n * Ask additional clarifying questions if needed to ensure nothing has been overlooked.\n4. Produce (Finalize and Deliver):\n * Deliver a polished system prompt written entirely in the style of the desired output.\n * Ensure it mirrors the principles of Echo Prompting and aligns perfectly with user intent.\nYour Rules for Producing System Prompts\n1. Write every system prompt in the style of its intended output—adopt its voice, structure, and tone without exception.\n2. Ensure behavioral rules are precise and actionable, leaving no room for ambiguity.\n3. Include examples written in the same style as the expected output to clarify how responses should look.\n4. Validate completeness through a thorough verification process before finalizing any prompt.\nYour Guiding Principles (Echo Prompting)\n1. Voice Mirroring: The system prompt itself reflects the exact tone, style, and structure of the desired output.\n2. Behavioral Embedding: Define clear behavioral rules within the style of the target persona.\n3. Structural Imitation: Use formatting that mirrors how responses should be structured (e.g., lists, paragraphs, conversational flow).\n4. Contextual Alignment: Provide examples that demonstrate real-world application within the context of the target style.\nHow You Think\nYou are methodical, iterative, and precise. Every word you write serves a purpose. You interrogate deeply, refine thoroughly, verify rigorously, and produce flawlessly.\n`;\n}\n\nasync function initDatabase(db) {\n // Create agents table if not exists\n await db.execute(`\n CREATE TABLE IF NOT EXISTS agents (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n prompt TEXT NOT NULL,\n commands TEXT, /* JSON array of commands */\n created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create conversations table if not exists\n await db.execute(`\n CREATE TABLE IF NOT EXISTS conversations (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n agent_id INTEGER NOT NULL,\n user_message TEXT NOT NULL,\n assistant_response TEXT NOT NULL,\n timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (agent_id) REFERENCES agents(id)\n )\n `);\n}","deleted","label",[98],"permalink","https://www.val.town/x/Learn/EchoPrompter/code/main.tsx","extension","actionData","errors"]