feat: add 'Improve my Prompt' button to Agent Fabric

LLM-powered prompt improvement following 2025 best practices:
- Backend: /api/workbench/improve-prompt endpoint + service method
  that rewrites prompts with clear role, goals, numbered steps,
  tool references, output format, and constraints
- Frontend: '✨ Improve my Prompt' button below the system prompt
  textarea, disabled when empty, replaces prompt with improved version
- 4 Playwright E2E tests with before/after screenshots

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: abossard

backend/agent_builder/routes.py

@@ -166,6 +166,21 @@ async def workbench_suggest_schema():
         return _error_response(exc)
 
 
+@agent_builder_bp.route("/api/workbench/improve-prompt", methods=["POST"])
+async def workbench_improve_prompt():
+    """Improve a system prompt using LLM best practices."""
+    try:
+        data = await request.get_json()
+        result = await _workbench_service.improve_prompt(
+            name=data.get("name", ""),
+            description=data.get("description", ""),
+            system_prompt=data.get("system_prompt", ""),
+        )
+        return jsonify(result), 200
+    except Exception as exc:
+        return _error_response(exc)
+
+
 # ---------------------------------------------------------------------------
 # Agent CRUD
 # ---------------------------------------------------------------------------

backend/agent_builder/service.py

@@ -45,6 +45,44 @@
 # CALCULATIONS (pure — no side effects, no I/O)
 # ============================================================================
 
+def _build_improve_prompt_request(
+    name: str, description: str, system_prompt: str,
+    all_tools: list[dict[str, Any]],
+) -> str:
+    """Build the LLM prompt for improving an agent system prompt. Pure calculation."""
+    context_parts = []
+    if name:
+        context_parts.append(f"Agent name: {name}")
+    if description:
+        context_parts.append(f"Description: {description}")
+    agent_context = "\n".join(context_parts) if context_parts else "(not provided)"
+
+    tool_descriptions = "\n".join(
+        f"  - {t['name']}: {t['description'][:120]}" for t in all_tools
+    )
+
+    return (
+        "You are an expert prompt engineer. Improve the following system prompt for an AI agent.\n\n"
+        "## Agent Context\n"
+        f"{agent_context}\n\n"
+        "## Available Tools\n"
+        f"{tool_descriptions}\n\n"
+        "## Current Prompt\n"
+        f"{system_prompt}\n\n"
+        "## Instructions\n"
+        "Rewrite the prompt following these modern best practices:\n"
+        "1. Start with a clear role definition (\"You are a...\").\n"
+        "2. State the goal in one sentence.\n"
+        "3. List concrete steps the agent should follow (numbered).\n"
+        "4. Reference specific tool names the agent should use and when.\n"
+        "5. Define the expected output format clearly.\n"
+        "6. Add constraints: what NOT to do, edge cases to handle.\n"
+        "7. Keep it concise — reasoning models work best with clear, direct instructions.\n"
+        "8. Use structured sections (##) for readability.\n\n"
+        "Return ONLY the improved prompt text. No wrapping, no explanation, no markdown fences."
+    )
+
+
 def _build_suggest_prompt(
     name: str, description: str, system_prompt: str,
     all_tools: list[dict[str, Any]], tool_names_list: list[str],
@@ -226,6 +264,35 @@ async def suggest_schema(
 
         return _parse_suggest_response(raw, tool_names_list)
 
+    # ------------------------------------------------------------------
+    # Prompt improvement (LLM call)
+    # ------------------------------------------------------------------
+
+    async def improve_prompt(
+        self,
+        name: str,
+        description: str,
+        system_prompt: str,
+    ) -> dict[str, str]:
+        """
+        Ask the LLM to improve an agent's system prompt.
+
+        Action: calls LLM. Returns { improved_prompt: str }.
+        """
+        all_tools = self.list_tools()
+        prompt = _build_improve_prompt_request(name, description, system_prompt, all_tools)
+
+        from langchain_core.messages import HumanMessage
+        response = await self.llm.ainvoke([HumanMessage(content=prompt)])
+        improved = (response.content or "").strip()
+
+        # Strip markdown fences if LLM wraps it anyway
+        if improved.startswith("```"):
+            lines = improved.split("\n")
+            improved = "\n".join(lines[1:-1] if lines[-1].strip() == "```" else lines[1:])
+
+        return {"improved_prompt": improved}
+
     # ------------------------------------------------------------------
     # Validation helpers (calculations)
     # ------------------------------------------------------------------

frontend/src/features/workbench/AgentCreateForm.jsx

@@ -14,6 +14,7 @@ import {
 import { useEffect, useState } from 'react'
 import {
   createWorkbenchAgent,
+  improvePrompt,
   suggestOutputSchema,
   updateWorkbenchAgent,
 } from '../../services/api'
@@ -164,6 +165,7 @@ export default function AgentCreateForm({ tools, onAgentCreated, initialData })
     return ''
   })
   const [suggestingSchema, setSuggestingSchema] = useState(false)
+  const [improvingPrompt, setImprovingPrompt] = useState(false)
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState('')
 
@@ -247,6 +249,25 @@ export default function AgentCreateForm({ tools, onAgentCreated, initialData })
     }
   }
 
+  const handleImprovePrompt = async () => {
+    setImprovingPrompt(true)
+    setError('')
+    try {
+      const resp = await improvePrompt({
+        name: formData.name.trim(),
+        description: formData.description.trim(),
+        systemPrompt: formData.systemPrompt.trim(),
+      })
+      if (resp.improved_prompt) {
+        setFormData((prev) => ({ ...prev, systemPrompt: resp.improved_prompt }))
+      }
+    } catch (err) {
+      setError(err?.message || 'Failed to improve prompt')
+    } finally {
+      setImprovingPrompt(false)
+    }
+  }
+
   const handleSubmit = async () => {
     setError('')
     if (!validateForm()) return
@@ -406,6 +427,13 @@ export default function AgentCreateForm({ tools, onAgentCreated, initialData })
             />
           </Field>
           {fieldErrors.systemPrompt && <Text>{fieldErrors.systemPrompt}</Text>}
+          <Button
+            data-testid="workbench-improve-prompt-button"
+            disabled={improvingPrompt || !formData.systemPrompt.trim()}
+            onClick={handleImprovePrompt}
+          >
+            {improvingPrompt ? '✨ Improving...' : '✨ Improve my Prompt'}
+          </Button>
           <Field label="Output schema" hint="Define the structured output format with display widgets">
             <SchemaEditor
               value={outputSchema}

frontend/src/services/api.js

@@ -387,6 +387,17 @@ export async function suggestOutputSchema({ name = "", description = "", systemP
   });
 }
 
+export async function improvePrompt({ name = "", description = "", systemPrompt = "" } = {}) {
+  return fetchJSON(`${API_BASE_URL}/workbench/improve-prompt`, {
+    method: "POST",
+    body: JSON.stringify({
+      name,
+      description,
+      system_prompt: systemPrompt,
+    }),
+  });
+}
+
 export async function updateWorkbenchAgent(agentId, agentData) {
   return fetchJSON(`${API_BASE_URL}/workbench/agents/${agentId}`, {
     method: "PUT",

tests/e2e/improve-prompt.spec.js

@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+
+const APP_URL = process.env.E2E_APP_URL || "http://localhost:3001";
+
+async function goToCreateTab(page) {
+  await page.goto(`${APP_URL}/workbench`, { waitUntil: "load" });
+  await expect(page.getByTestId("workbench-page-title")).toBeVisible();
+  await page.getByTestId("workbench-tab-create").click();
+  await expect(page.getByTestId("workbench-create-agent-button")).toBeVisible();
+}
+
+test.describe("Improve Prompt button", () => {
+  test("button is visible and disabled when prompt is empty", async ({ page }) => {
+    await goToCreateTab(page);
+
+    const btn = page.getByTestId("workbench-improve-prompt-button");
+    await expect(btn).toBeVisible();
+    await expect(btn).toBeDisabled();
+  });
+
+  test("button enables when prompt has text", async ({ page }) => {
+    await goToCreateTab(page);
+
+    const btn = page.getByTestId("workbench-improve-prompt-button");
+    await expect(btn).toBeDisabled();
+
+    await page.getByTestId("workbench-agent-system-prompt-input").fill("list all tickets");
+    await expect(btn).toBeEnabled();
+  });
+
+  test("button works with mocked API", async ({ page }) => {
+    // Mock the improve-prompt endpoint
+    await page.route("**/api/workbench/improve-prompt", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          improved_prompt:
+            "You are a ticket analysis agent.\n\n## Goal\nList and summarize all open tickets.\n\n## Steps\n1. Use csv_list_tickets to retrieve all tickets.\n2. Filter by status.\n3. Produce a summary.\n\n## Output\nReturn a markdown summary.",
+        }),
+      });
+    });
+
+    await goToCreateTab(page);
+
+    // Type a basic prompt
+    const promptInput = page.getByTestId("workbench-agent-system-prompt-input");
+    await promptInput.fill("list all tickets");
+
+    // Click improve
+    const btn = page.getByTestId("workbench-improve-prompt-button");
+    await btn.click();
+
+    // Prompt should be replaced with the improved version
+    await expect(promptInput).toHaveValue(/You are a ticket analysis agent/);
+    await expect(promptInput).toHaveValue(/## Steps/);
+  });
+
+  test("template + improve workflow screenshot", async ({ page }) => {
+    // Mock the improve endpoint
+    await page.route("**/api/workbench/improve-prompt", async (route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          improved_prompt:
+            "You are an expert Knowledge Base author specializing in IT support.\n\n## Goal\nCreate a comprehensive, reusable KBA from patterns found across related tickets.\n\n## Steps\n1. Use csv_search_tickets_with_details to find tickets matching the user's topic.\n2. Identify common symptoms across tickets.\n3. Determine the root cause from resolution notes.\n4. Write step-by-step resolution instructions.\n\n## Output Format\n- **Title**: Concise, searchable\n- **Symptoms**: Bullet list of what users experience\n- **Cause**: Root cause explanation\n- **Resolution**: Numbered steps\n- **Related Tickets**: INC numbers analyzed\n\n## Constraints\n- Only reference tickets you actually retrieved.\n- Do not fabricate resolution steps.",
+        }),
+      });
+    });
+
+    await goToCreateTab(page);
+
+    // Select a template first
+    const templateSelect = page.getByTestId("workbench-template-select");
+    await templateSelect.click();
+    await page.getByText("KBA from Multiple Tickets").click();
+
+    // Wait for form to populate
+    await expect(
+      page.getByTestId("workbench-agent-system-prompt-input"),
+    ).not.toHaveValue("");
+
+    // Take screenshot before improvement
+    await page.screenshot({
+      path: "screenshot-improve-prompt-before.png",
+      fullPage: true,
+    });
+
+    // Click improve
+    await page.getByTestId("workbench-improve-prompt-button").click();
+
+    // Wait for improved prompt
+    await expect(
+      page.getByTestId("workbench-agent-system-prompt-input"),
+    ).toHaveValue(/## Steps/);
+
+    // Take screenshot after improvement
+    await page.screenshot({
+      path: "screenshot-improve-prompt-after.png",
+      fullPage: true,
+    });
+  });
+});