feat: add tool test panel for HTTP API tools (#547)

* feat: add tool test panel for HTTP API tools

Lets developers run a saved HTTP API tool against its real endpoint
from the tool detail page, without needing a live call. Reuses the
production execute_http_tool path so test behavior matches call-time
behavior.

- New POST /tools/{tool_uuid}/test route
- Test panel with per-parameter typed inputs and auto-detected
  context variable inputs (from preset parameter templates)
- Validate parameter name uniqueness on save, matching the existing
  transferParameters check
- Fix stale FunctionCallsFromLLMInfoFrame import causing test
  collection failures against pipecat-ai 1.5.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: revert local-venv pipecat drift fix, apply ruff import formatting

test_custom_tools.py and test_unregistered_function_call.py were edited
locally to drop FunctionCallsFromLLMInfoFrame after hitting an
ImportError — that error was from a stale local pipecat-ai package, not
a real drift. CI's pipecat build emits this frame and the test asserted
on it, so removing it broke test_llm_calls_custom_tool_handler and its
unregistered-call counterpart. Reverted both files to match main.

Also applied ruff's import-sort/format fix to test_mcp_tool_route.py to
clear the drift-check job (split the aliased import into its own
`from ... import (...)` block, wrapped a long monkeypatch.setattr call).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: avoid pytest collecting test_tool import as a test, sync OpenAPI spec

pytest's default discovery matches any top-level test_* name in a test
module, including imported functions — importing the route handler as
`test_tool as test_tool_route` still matched the pattern, so pytest
tried to run it as a test and failed injecting fixtures for tool_uuid/
request/user. Renamed the alias to call_test_tool_route.

Also regenerated docs/api-reference/openapi.json for the new
POST /tools/{tool_uuid}/test route and its two schemas (couldn't run
the dump script locally — pipecat-ai version mismatch documented
separately — so hand-built the diff to exactly match FastAPI's
get_openapi() output format, verified against neighboring routes).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address cubic review findings on test panel

- Resolve dotted context-variable keys into nested objects before
  posting the test request. render_template's get_nested_value walks
  nested dicts, so a flat key like "runtime_configuration.realtime_model"
  never matched — templates referencing nested context always resolved
  to empty.
- Restrict isHttpApiTool to an explicit category equality check instead
  of inferring it from exclusions. native/integration tools are
  currently disabled in the create-tool UI so this wasn't reachable
  today, but the exclusion list silently goes stale as new categories
  are added.
- Stop showing a green success badge for non-2xx responses.
  execute_http_tool returns status: "success" for any HTTP exchange
  that completes, regardless of status code — only transport-level
  errors (timeout, connection failure) get status: "error". The test
  panel now checks status_code is in the 2xx range before treating the
  call as a success.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address second round of cubic/greptile findings

- Guard setNestedValue against prototype-pollution keys (__proto__,
  constructor, prototype) in the dotted context-var path before
  traversing.
- Normalize status to "error" in the test route when the upstream
  status_code is >= 400. execute_http_tool only distinguishes
  transport-level failures (timeout, connection error) from
  "success" — a completed 4xx/5xx exchange still came back as
  "success" from the executor.
- Seed testArgValues defaults for number/boolean parameters via a
  useEffect keyed on the parameters array, so a required number or
  boolean field isn't silently omitted from the test request if the
  user never touches its input.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: only seed test-arg defaults for required number/boolean params

Seeding optional number/boolean parameters silently changed the test
request — an optional boolean flag the tester never touched was sent
as true, which can flip upstream behavior unintentionally. Restrict
seeding to required parameters.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: match whitespace and fallback-filter syntax in context var detection

extractContextVars required an exact {{initial_context.foo}} with no
whitespace and no filter suffix, but the backend's TEMPLATE_VAR_PATTERN
(and render_template) accepts {{ initial_context.foo }} and
{{initial_context.foo | fallback:value}}. A preset parameter saved with
either of those forms resolved fine in production but showed no input
in the test panel, so testing always sent it empty context.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(tool-test): add hint and request_* fields to ToolTestResponse

Extends ToolTestResponse with hint, request_method, request_url,
request_body, and request_params so the frontend can surface what was
actually sent and a human-readable hint about why a test call failed.

* feat(tool-test): add status-code hints and request_method/url/body/params to test_tool()

* style: ruff-format test_mcp_tool_route.py

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(tool-test): wire hint banner and request block into result panel

Backend has returned hint/request_method/request_url/request_body/
request_params since d45ea851/60aaf31d but the frontend never
displayed them. Extends ToolTestResult with the new fields and renders
an amber hint banner (for 400/401/403/404/405/408/409/415/422/429/5xx)
plus a Request block above the response showing exactly what was sent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(tool-test): include resolved preset params in request_body/params

Found via live GET/POST testing: the Request preview showed only the
model-provided arguments, not what execute_http_tool actually sends.
execute_http_tool merges resolved_arguments = {**arguments,
**preset_arguments} before building the outbound body/params — preset
params (e.g. {{initial_context.metadata.channel}}) are invisible to
the model but still go out on the wire. The preview now mirrors that
merge via the same _resolve_preset_parameters helper, so a dev sees
exactly what was sent, not just what the model provided.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(tool-test): add generateSampleValue helper for sample-fill button

* feat(tool-test): add Fill sample values button for arguments and context vars

Moved generateSampleValue out of page.tsx into a sibling helpers module:
Next.js's typed-route checker rejects extra named exports on a page.tsx
file (tsc error TS2344 on .next/types), so the helper and its test import
now live in testPanelHelpers.ts instead.

* feat(tool-test): add JSON edit modal state and handlers

* feat(tool-test): collapsed preview + edit modal for object/array test parameters

* fix(tool-test): validate JSON on modal open, not just on edit

Opening the JSON edit modal on an untouched object/array param (no value
yet in testArgValues) loaded an empty draft with jsonEditError hardcoded
to null, so Save was enabled despite invalid JSON and silently no-op'd on
click. Now runs the same JSON.parse check used by the live textarea
validation when the modal opens.

* chore: regenerate openapi.json for ToolTestResponse hint/request_* fields

drift-check on PR #547 was failing because the earlier hint/request_method/
request_url/request_body/request_params fields added to ToolTestResponse
were never reflected in the dumped spec. Regenerated via
scripts.dump_docs_openapi.

* fix(tool-test): serialize object/array args for GET/DELETE query params, add unsaved-changes banner

httpx raises a TypeError when a query param value is a dict/list, which
was silently caught and surfaced as a generic tool-execution error —
this is what actually broke test requests, not just the "[object
Object]" display. JSON-stringify object/array arguments before they
become query params, in both the live execute_http_tool() path and the
test route's request_params display shaping.

Also adds an unsaved-changes warning banner above Test Tool, shown
when the live form state diverges from the last-saved HTTP API config,
since Test Tool always runs the saved config.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(tool-test): keep empty request body in preview; normalize headers in snapshot

- POST/PUT/PATCH with no arguments now shows `{}` in the request body
  preview instead of null — matches what execute_http_tool actually sends
  over the wire (json={})
- buildHttpToolTestSnapshot normalizes headers from KeyValueItem[] to a
  deduped key→value map before serializing, matching the shape saved to
  the backend; duplicate header keys no longer cause a false unsaved-
  changes warning

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(tool-test): update assertion for empty POST body preview

test_tool_test_no_arguments_leaves_body_and_params_none expected
request_body=None for a POST with no arguments. The fix to preserve {}
in the preview makes request_body={} the correct assertion.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(tools): refine HTTP tool testing

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Abhishek Kumar <abhishek@a6k.me>

api/routes/tool.py

@@ -1,5 +1,6 @@
 """API routes for managing tools."""
 
+import time
 from typing import List, Optional
 
 from fastapi import APIRouter, Depends, HTTPException
@@ -22,6 +23,8 @@ from api.schemas.tool import (
     ToolDefinition,
     ToolParameter,
     ToolResponse,
+    ToolTestRequest,
+    ToolTestResponse,
     TransferCallConfig,
     TransferCallToolDefinition,
     UpdateToolRequest,
@@ -38,6 +41,10 @@ from api.services.tool_management import (
 from api.services.tool_management import (
     populate_discovered_tools as _populate_discovered_tools,
 )
+from api.services.workflow.tools.custom_tool import (
+    execute_http_tool,
+    serialize_query_params,
+)
 
 router = APIRouter(prefix="/tools")
 
@@ -56,6 +63,8 @@ __all__ = [
     "ToolDefinition",
     "ToolParameter",
     "ToolResponse",
+    "ToolTestRequest",
+    "ToolTestResponse",
     "TransferCallConfig",
     "TransferCallToolDefinition",
     "UpdateToolRequest",
@@ -195,6 +204,149 @@ async def refresh_mcp_tools(
         raise HTTPException(status_code=e.status_code, detail=e.message) from e
 
 
+@router.post("/{tool_uuid}/test")
+async def test_tool(
+    tool_uuid: str,
+    request: ToolTestRequest,
+    user: UserModel = Depends(get_user),
+) -> ToolTestResponse:
+    """Execute an HTTP API tool with sample LLM and preset parameters."""
+    if not user.selected_organization_id:
+        raise HTTPException(
+            status_code=400, detail="No organization selected for the user"
+        )
+
+    tool = await db_client.get_tool_by_uuid(
+        tool_uuid, user.selected_organization_id, include_archived=True
+    )
+
+    if not tool:
+        raise HTTPException(status_code=404, detail="Tool not found")
+
+    if tool.category != ToolCategory.HTTP_API.value:
+        raise HTTPException(status_code=400, detail="Only HTTP API tools can be tested")
+
+    tool_config = (
+        tool.definition.get("config", {}) if isinstance(tool.definition, dict) else {}
+    )
+    configured_method = tool_config.get("method", "?")
+    configured_url = tool_config.get("url", "?")
+
+    started_at = time.perf_counter()
+    result = await execute_http_tool(
+        tool,
+        request.llm_params,
+        preset_params=request.preset_params,
+        organization_id=user.selected_organization_id,
+        include_request_headers=True,
+    )
+    duration_ms = max(0, round((time.perf_counter() - started_at) * 1000))
+
+    status = result.get("status", "error")
+    status_code = result.get("status_code")
+    if status_code is not None and status_code >= 400:
+        status = "error"
+
+    hint = _hint_for_status_code(status_code, configured_method)
+
+    # Preset values take precedence over model-supplied values, matching live
+    # execution after configured preset templates have been resolved.
+    resolved_arguments = {**request.llm_params, **request.preset_params}
+
+    # Mirror execute_http_tool's own branch: POST/PUT/PATCH send the
+    # resolved arguments as a JSON body; GET/DELETE send them as query
+    # params. Never both.
+    request_body = None
+    request_params = None
+    if configured_method in ("POST", "PUT", "PATCH"):
+        request_body = resolved_arguments  # keep {} so preview matches wire request
+    elif resolved_arguments:
+        request_params = serialize_query_params(resolved_arguments)
+
+    return ToolTestResponse(
+        status=status,
+        status_code=status_code,
+        data=result.get("data"),
+        error=result.get("error"),
+        duration_ms=duration_ms,
+        hint=hint,
+        request_method=configured_method,
+        request_url=configured_url,
+        request_headers=result.get("request_headers", {}),
+        request_body=request_body,
+        request_params=request_params,
+    )
+
+
+def _hint_for_status_code(
+    status_code: Optional[int], configured_method: str
+) -> Optional[str]:
+    """Human-readable explanation for a status code a misconfigured tool
+    is likely to hit. Returns None for 2xx and any code not covered."""
+    if status_code == 400:
+        return (
+            "HTTP 400 Bad Request — the server rejected the request payload. "
+            "Verify the arguments/body match what this endpoint expects."
+        )
+    if status_code == 401:
+        return (
+            "HTTP 401 Unauthorized — the request wasn't authenticated. Check "
+            "the credential configured on the Authentication tab is present "
+            "and valid."
+        )
+    if status_code == 403:
+        return (
+            "HTTP 403 Forbidden — authenticated, but the configured "
+            "credential doesn't have permission for this endpoint/action."
+        )
+    if status_code == 404:
+        return (
+            f"HTTP 404 Not Found — verify the endpoint URL is correct and "
+            f"that {configured_method} is a valid method for it."
+        )
+    if status_code == 405:
+        return (
+            f"HTTP 405 Method Not Allowed — the endpoint rejected the "
+            f"configured method ({configured_method}). Verify the API expects "
+            f"{configured_method} for this URL."
+        )
+    if status_code == 408:
+        return (
+            "HTTP 408 Request Timeout — the endpoint didn't respond in time. "
+            "Check the endpoint is reachable, or increase Timeout (ms) if it's "
+            "just slow."
+        )
+    if status_code == 409:
+        return (
+            "HTTP 409 Conflict — the endpoint rejected the request due to a "
+            "conflicting resource state (e.g. duplicate create). Not "
+            "necessarily a configuration problem."
+        )
+    if status_code == 415:
+        return (
+            "HTTP 415 Unsupported Media Type — check the Content-Type header "
+            "matches the format this endpoint expects for the body."
+        )
+    if status_code == 422:
+        return (
+            "HTTP 422 Unprocessable Entity — the request was well-formed but "
+            "the payload's structure or field types don't match what this "
+            "endpoint expects. Compare your arguments against the API's "
+            "documented schema."
+        )
+    if status_code == 429:
+        return (
+            "HTTP 429 Too Many Requests — the endpoint is rate-limiting. Wait "
+            "and retry; not a configuration problem."
+        )
+    if status_code is not None and 500 <= status_code < 600:
+        return (
+            f"HTTP {status_code} — the endpoint itself errored. This is "
+            "likely an issue on the API's side, not your tool configuration."
+        )
+    return None
+
+
 @router.put("/{tool_uuid}")
 async def update_tool(
     tool_uuid: str,

api/schemas/tool.py

@@ -491,3 +491,32 @@ class McpRefreshResponse(BaseModel):
     tool_uuid: str
     discovered_tools: list = Field(default_factory=list)
     error: Optional[str] = None
+
+
+class ToolTestRequest(BaseModel):
+    """Request body for testing an HTTP API tool outside a live call."""
+
+    llm_params: Dict[str, Any] = Field(
+        default_factory=dict,
+        description="Values for parameters normally supplied by the model.",
+    )
+    preset_params: Dict[str, Any] = Field(
+        default_factory=dict,
+        description="Resolved values for parameters normally supplied from presets.",
+    )
+
+
+class ToolTestResponse(BaseModel):
+    """Result of testing an HTTP API tool."""
+
+    status: str
+    status_code: Optional[int] = None
+    data: Optional[Any] = None
+    error: Optional[str] = None
+    hint: Optional[str] = None
+    request_method: str
+    request_url: str
+    request_headers: Dict[str, str] = Field(default_factory=dict)
+    request_body: Optional[Dict[str, Any]] = None
+    request_params: Optional[Dict[str, Any]] = None
+    duration_ms: int

api/services/workflow/tools/custom_tool.py

@@ -8,6 +8,7 @@ import httpx
 from loguru import logger
 
 from api.db import db_client
+from api.services.configuration.masking import mask_key
 from api.utils.credential_auth import build_auth_header
 from api.utils.template_renderer import render_template
 
@@ -21,6 +22,19 @@ TYPE_MAP = {
 }
 
 
+def serialize_query_params(arguments: Dict[str, Any]) -> Dict[str, Any]:
+    """JSON-stringify dict/list values so they're safe to pass as query params.
+
+    httpx (and query strings in general) only support primitive param values.
+    Object/array-typed tool arguments must be serialized before going out as
+    GET/DELETE query params, otherwise httpx raises a TypeError.
+    """
+    return {
+        k: json.dumps(v) if isinstance(v, (dict, list)) else v
+        for k, v in arguments.items()
+    }
+
+
 def tool_to_function_schema(tool: Any) -> Dict[str, Any]:
     """Convert a ToolModel to an LLM function schema.
 
@@ -224,7 +238,9 @@ async def execute_http_tool(
     arguments: Dict[str, Any],
     call_context_vars: Optional[Dict[str, Any]] = None,
     gathered_context_vars: Optional[Dict[str, Any]] = None,
+    preset_params: Optional[Dict[str, Any]] = None,
     organization_id: Optional[int] = None,
+    include_request_headers: bool = False,
 ) -> Dict[str, Any]:
     """Execute an HTTP API tool.
 
@@ -233,7 +249,11 @@ async def execute_http_tool(
         arguments: Arguments passed by the LLM (parameter name -> value)
         call_context_vars: Initial context variables available at runtime
         gathered_context_vars: Variables extracted during the conversation
+        preset_params: Pre-resolved preset parameter values. Used by the test
+            endpoint; live calls omit this so configured templates are resolved.
         organization_id: Organization ID for credential lookup
+        include_request_headers: Include a client-safe header preview in the result.
+            Headers supplied by a stored credential are masked.
 
     Returns:
         Result dict with response data or error
@@ -248,7 +268,9 @@ async def execute_http_tool(
     # Get headers from config
     headers = dict(config.get("headers", {}) or {})
 
-    # Add auth header if credential is configured
+    # Add auth header if credential is configured. Keep track of which headers
+    # came from the credential so only those values are masked in test previews.
+    credential_headers: Dict[str, str] = {}
     credential_uuid = config.get("credential_uuid")
     if credential_uuid and organization_id:
         try:
@@ -256,8 +278,8 @@ async def execute_http_tool(
                 credential_uuid, organization_id
             )
             if credential:
-                auth_header = build_auth_header(credential)
-                headers.update(auth_header)
+                credential_headers = build_auth_header(credential)
+                headers.update(credential_headers)
                 logger.debug(f"Applied credential '{credential.name}' to tool request")
             else:
                 logger.warning(
@@ -266,17 +288,31 @@ async def execute_http_tool(
         except Exception as e:
             logger.error(f"Failed to fetch credential for tool '{tool.name}': {e}")
 
+    request_headers: Dict[str, str] = {}
+    if include_request_headers:
+        request_headers = {str(name): str(value) for name, value in headers.items()}
+        for header_name, header_value in credential_headers.items():
+            request_headers[header_name] = mask_key(str(header_value))
+
+    def build_result(result: Dict[str, Any]) -> Dict[str, Any]:
+        if include_request_headers:
+            return {**result, "request_headers": request_headers}
+        return result
+
     # Get timeout
     timeout_ms = config.get("timeout_ms", 5000)
     timeout_seconds = timeout_ms / 1000
 
-    try:
-        preset_arguments = _resolve_preset_parameters(
-            config, call_context_vars, gathered_context_vars
-        )
-    except ValueError as e:
-        logger.error(f"Custom tool '{tool.name}' preset parameter error: {e}")
-        return {"status": "error", "error": str(e)}
+    if preset_params is None:
+        try:
+            preset_arguments = _resolve_preset_parameters(
+                config, call_context_vars, gathered_context_vars
+            )
+        except ValueError as e:
+            logger.error(f"Custom tool '{tool.name}' preset parameter error: {e}")
+            return build_result({"status": "error", "error": str(e)})
+    else:
+        preset_arguments = dict(preset_params)
 
     resolved_arguments = {**(arguments or {}), **preset_arguments}
 
@@ -286,7 +322,7 @@ async def execute_http_tool(
     if method in ("POST", "PUT", "PATCH"):
         body = resolved_arguments
     elif method in ("GET", "DELETE") and resolved_arguments:
-        params = resolved_arguments
+        params = serialize_query_params(resolved_arguments)
 
     logger.info(
         f"Executing custom tool '{tool.name}' ({tool.tool_uuid}): {method} {url}"
@@ -322,23 +358,29 @@ async def execute_http_tool(
             logger.debug(
                 f"Custom tool '{tool.name}' completed with status {response.status_code}"
             )
-            return result
+            return build_result(result)
 
     except httpx.TimeoutException:
         logger.error(f"Custom tool '{tool.name}' timed out after {timeout_seconds}s")
-        return {
-            "status": "error",
-            "error": f"Request timed out after {timeout_seconds} seconds",
-        }
+        return build_result(
+            {
+                "status": "error",
+                "error": f"Request timed out after {timeout_seconds} seconds",
+            }
+        )
     except httpx.RequestError as e:
         logger.error(f"Custom tool '{tool.name}' request failed: {e}")
-        return {
-            "status": "error",
-            "error": f"Request failed: {str(e)}",
-        }
+        return build_result(
+            {
+                "status": "error",
+                "error": f"Request failed: {str(e)}",
+            }
+        )
     except Exception as e:
         logger.error(f"Custom tool '{tool.name}' execution failed: {e}")
-        return {
-            "status": "error",
-            "error": f"Tool execution failed: {str(e)}",
-        }
+        return build_result(
+            {
+                "status": "error",
+                "error": f"Tool execution failed: {str(e)}",
+            }
+        )

api/tests/test_custom_tools.py

@@ -30,6 +30,7 @@ from pipecat.processors.aggregators.llm_context import LLMContext
 from pipecat.services.llm_service import FunctionCallParams
 
 from api.enums import WorkflowRunMode
+from api.services.configuration.masking import mask_key
 from api.services.workflow.pipecat_engine_custom_tools import get_function_schema
 from api.services.workflow.tools.custom_tool import (
     _coerce_parameter_value,
@@ -430,6 +431,7 @@ class TestExecuteHttpTool:
             assert result["status"] == "success"
             assert result["status_code"] == 201
             assert result["data"]["id"] == 123
+            assert "request_headers" not in result
 
     @pytest.mark.asyncio
     async def test_post_request_sends_nested_json_body(self):
@@ -546,6 +548,55 @@ class TestExecuteHttpTool:
             }
             assert result["status"] == "success"
 
+    @pytest.mark.asyncio
+    async def test_post_request_accepts_pre_resolved_preset_params(self):
+        """The test endpoint can supply preset values without call context."""
+        tool = MockToolModel(
+            tool_uuid="test-uuid-preset-override",
+            name="Create Lead",
+            description="Create a lead with caller context",
+            category="http_api",
+            definition={
+                "schema_version": 1,
+                "type": "http_api",
+                "config": {
+                    "method": "POST",
+                    "url": "https://api.example.com/leads",
+                    "timeout_ms": 5000,
+                    "preset_parameters": [
+                        {
+                            "name": "phone_number",
+                            "type": "string",
+                            "value_template": "{{initial_context.phone_number}}",
+                            "required": True,
+                        }
+                    ],
+                },
+            },
+        )
+
+        with patch(
+            "api.services.workflow.tools.custom_tool.httpx.AsyncClient"
+        ) as mock_client_class:
+            mock_client = AsyncMock()
+            mock_response = Mock()
+            mock_response.status_code = 201
+            mock_response.json.return_value = {"id": 123}
+            mock_client.request.return_value = mock_response
+            mock_client_class.return_value.__aenter__.return_value = mock_client
+
+            result = await execute_http_tool(
+                tool,
+                {"name": "John"},
+                preset_params={"phone_number": "+14155550123"},
+            )
+
+            assert mock_client.request.call_args.kwargs["json"] == {
+                "name": "John",
+                "phone_number": "+14155550123",
+            }
+            assert result["status"] == "success"
+
     @pytest.mark.asyncio
     async def test_missing_required_preset_parameter_returns_error(self):
         """Test that required preset parameters fail before the HTTP request."""
@@ -619,6 +670,52 @@ class TestExecuteHttpTool:
 
             assert result["status"] == "success"
 
+    @pytest.mark.asyncio
+    async def test_get_request_serializes_object_and_array_query_params(self):
+        """Object/array-typed arguments must be JSON-stringified for GET query
+        params — httpx raises a TypeError if a dict/list is passed as-is."""
+        tool = MockToolModel(
+            tool_uuid="test-uuid",
+            name="Search Users",
+            description="Search for users",
+            category="http_api",
+            definition={
+                "schema_version": 1,
+                "type": "http_api",
+                "config": {
+                    "method": "GET",
+                    "url": "https://api.example.com/users/search",
+                    "timeout_ms": 5000,
+                },
+            },
+        )
+
+        arguments = {
+            "source": "voice",
+            "metadata": {"campaign": "spring"},
+            "tags": ["a", "b"],
+        }
+
+        with patch(
+            "api.services.workflow.tools.custom_tool.httpx.AsyncClient"
+        ) as mock_client_class:
+            mock_client = AsyncMock()
+            mock_response = Mock()
+            mock_response.status_code = 200
+            mock_response.json.return_value = {"users": []}
+            mock_client.request.return_value = mock_response
+            mock_client_class.return_value.__aenter__.return_value = mock_client
+
+            result = await execute_http_tool(tool, arguments)
+
+            call_kwargs = mock_client.request.call_args.kwargs
+            assert call_kwargs["params"] == {
+                "source": "voice",
+                "metadata": '{"campaign": "spring"}',
+                "tags": '["a", "b"]',
+            }
+            assert result["status"] == "success"
+
     @pytest.mark.asyncio
     async def test_get_request_without_arguments_preserves_url_query_params(self):
         """Empty runtime args should not override query params already in the URL."""
@@ -762,11 +859,17 @@ class TestExecuteHttpTool:
             mock_client.request.return_value = mock_response
             mock_client_class.return_value.__aenter__.return_value = mock_client
 
-            await execute_http_tool(tool, {"data": "test"})
+            result = await execute_http_tool(
+                tool, {"data": "test"}, include_request_headers=True
+            )
 
             call_kwargs = mock_client.request.call_args.kwargs
             assert call_kwargs["headers"]["X-API-Key"] == "secret-key"
             assert call_kwargs["headers"]["X-Custom-Header"] == "custom-value"
+            assert result["request_headers"] == {
+                "X-API-Key": "secret-key",
+                "X-Custom-Header": "custom-value",
+            }
 
     @pytest.mark.asyncio
     async def test_request_includes_auth_header_from_credential(self):
@@ -807,7 +910,12 @@ class TestExecuteHttpTool:
             with patch("api.services.workflow.tools.custom_tool.db_client") as mock_db:
                 mock_db.get_credential_by_uuid = AsyncMock(return_value=mock_credential)
 
-                await execute_http_tool(tool, {"data": "test"}, organization_id=1)
+                result = await execute_http_tool(
+                    tool,
+                    {"data": "test"},
+                    organization_id=1,
+                    include_request_headers=True,
+                )
 
                 # Verify credential was fetched
                 mock_db.get_credential_by_uuid.assert_called_once_with(
@@ -819,6 +927,12 @@ class TestExecuteHttpTool:
                 assert (
                     call_kwargs["headers"]["Authorization"] == "Bearer my-secret-token"
                 )
+                assert result["request_headers"]["Authorization"] == mask_key(
+                    "Bearer my-secret-token"
+                )
+                assert (
+                    "my-secret-token" not in result["request_headers"]["Authorization"]
+                )
 
     @pytest.mark.asyncio
     async def test_no_credential_lookup_without_organization_id(self):

api/tests/test_mcp_tool_route.py

@@ -26,9 +26,15 @@ from api.routes.tool import (
     CreateToolRequest,
     McpToolConfig,
     McpToolDefinition,
+    ToolTestRequest,
+    ToolTestResponse,
     UpdateToolRequest,
     _populate_discovered_tools,
     refresh_mcp_tools,
+    router,
+)
+from api.routes.tool import (
+    test_tool as call_test_tool_route,
 )
 from api.services.workflow.tools.mcp_tool import (
     validate_mcp_definition,
@@ -420,6 +426,314 @@ def _mcp_tool_model(org_id=1):
     return t
 
 
+def _http_tool_model(method="GET"):
+    t = MagicMock()
+    t.tool_uuid = "tu-http"
+    t.name = "Mock HTTP"
+    t.category = "http_api"
+    t.definition = {
+        "schema_version": 1,
+        "type": "http_api",
+        "config": {"method": method, "url": "https://example.com/search"},
+    }
+    return t
+
+
+@pytest.mark.asyncio
+async def test_tool_executes_http_api_tool_with_llm_and_preset_params(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model()
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    executor = AsyncMock(
+        return_value={
+            "status": "success",
+            "status_code": 200,
+            "data": {"ok": True},
+        }
+    )
+    monkeypatch.setattr(tool_route, "execute_http_tool", executor)
+
+    resp = await call_test_tool_route(
+        "tu-http",
+        request=ToolTestRequest(
+            llm_params={"query": "cart"},
+            preset_params={
+                "customer_id": "c_123",
+                "sentiment": "cooperative",
+            },
+        ),
+        user=_fake_user(),
+    )
+
+    assert resp.status == "success"
+    assert resp.status_code == 200
+    assert resp.data == {"ok": True}
+    assert resp.error is None
+    executor.assert_awaited_once_with(
+        tool,
+        {"query": "cart"},
+        preset_params={
+            "customer_id": "c_123",
+            "sentiment": "cooperative",
+        },
+        organization_id=1,
+        include_request_headers=True,
+    )
+    assert resp.hint is None
+    assert resp.request_method == "GET"
+    assert resp.request_url == "https://example.com/search"
+    assert resp.request_headers == {}
+    assert resp.request_body is None
+    assert resp.request_params == {
+        "query": "cart",
+        "customer_id": "c_123",
+        "sentiment": "cooperative",
+    }
+
+
+@pytest.mark.asyncio
+async def test_tool_test_sets_request_body_for_post_method(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="POST")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(
+            return_value={"status": "success", "status_code": 200, "data": {"id": 1}}
+        ),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http",
+        request=ToolTestRequest(llm_params={"name": "Ada"}),
+        user=_fake_user(),
+    )
+
+    assert resp.request_method == "POST"
+    assert resp.request_body == {"name": "Ada"}
+    assert resp.request_params is None
+
+
+@pytest.mark.asyncio
+async def test_tool_test_returns_masked_effective_request_headers(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="POST")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(
+            return_value={
+                "status": "success",
+                "status_code": 200,
+                "data": {"ok": True},
+                "request_headers": {
+                    "X-Tenant": "acme",
+                    "Authorization": "****************oken",
+                },
+            }
+        ),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http", request=ToolTestRequest(), user=_fake_user()
+    )
+
+    assert resp.request_headers == {
+        "X-Tenant": "acme",
+        "Authorization": "****************oken",
+    }
+
+
+@pytest.mark.asyncio
+async def test_tool_test_request_body_includes_resolved_preset_parameters(
+    monkeypatch,
+):
+    """The Request preview includes direct preset values alongside LLM values."""
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="POST")
+    tool.definition["config"]["preset_parameters"] = [
+        {
+            "name": "source",
+            "type": "string",
+            "value_template": "{{initial_context.metadata.channel}}",
+            "required": True,
+        }
+    ]
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(
+            return_value={"status": "success", "status_code": 200, "data": {"ok": True}}
+        ),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http",
+        request=ToolTestRequest(
+            llm_params={"name": "Ada"},
+            preset_params={"source": "web_widget"},
+        ),
+        user=_fake_user(),
+    )
+
+    assert resp.request_body == {"name": "Ada", "source": "web_widget"}
+
+
+@pytest.mark.asyncio
+async def test_tool_test_no_arguments_post_shows_empty_body(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="POST")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(return_value={"status": "success", "status_code": 200, "data": None}),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http", request=ToolTestRequest(), user=_fake_user()
+    )
+
+    # POST with no arguments sends json={} over the wire; preview must show {}
+    # so callers can distinguish an absent body from an empty one.
+    assert resp.request_body == {}
+    assert resp.request_params is None
+
+
+@pytest.mark.asyncio
+@pytest.mark.parametrize(
+    "status_code,expected_snippet",
+    [
+        (400, "HTTP 400 Bad Request"),
+        (401, "HTTP 401 Unauthorized"),
+        (403, "HTTP 403 Forbidden"),
+        (404, "HTTP 404 Not Found"),
+        (405, "HTTP 405 Method Not Allowed"),
+        (408, "HTTP 408 Request Timeout"),
+        (409, "HTTP 409 Conflict"),
+        (415, "HTTP 415 Unsupported Media Type"),
+        (422, "HTTP 422 Unprocessable Entity"),
+        (429, "HTTP 429 Too Many Requests"),
+        (500, "HTTP 500"),
+        (503, "HTTP 503"),
+    ],
+)
+async def test_tool_test_hint_for_status_code(
+    monkeypatch, status_code, expected_snippet
+):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="POST")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(
+            return_value={
+                "status": "error",
+                "status_code": status_code,
+                "error": "boom",
+            }
+        ),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http", request=ToolTestRequest(llm_params={"a": 1}), user=_fake_user()
+    )
+
+    assert resp.hint is not None
+    assert resp.hint.startswith(expected_snippet)
+
+
+@pytest.mark.asyncio
+async def test_tool_test_no_hint_on_success(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="GET")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(return_value={"status": "success", "status_code": 200, "data": {}}),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http", request=ToolTestRequest(), user=_fake_user()
+    )
+
+    assert resp.hint is None
+
+
+@pytest.mark.asyncio
+async def test_tool_test_no_hint_for_uncovered_status_code(monkeypatch):
+    import api.routes.tool as tool_route
+
+    tool = _http_tool_model(method="GET")
+    monkeypatch.setattr(
+        tool_route.db_client, "get_tool_by_uuid", AsyncMock(return_value=tool)
+    )
+    monkeypatch.setattr(
+        tool_route,
+        "execute_http_tool",
+        AsyncMock(
+            return_value={"status": "error", "status_code": 418, "error": "teapot"}
+        ),
+    )
+
+    resp = await call_test_tool_route(
+        "tu-http", request=ToolTestRequest(), user=_fake_user()
+    )
+
+    assert resp.hint is None
+
+
+def test_tool_test_route_is_registered():
+    assert any(
+        route.path == "/tools/{tool_uuid}/test" and "POST" in route.methods
+        for route in router.routes
+    )
+
+
+@pytest.mark.asyncio
+async def test_tool_rejects_non_http_api_tool(monkeypatch):
+    import api.routes.tool as tool_route
+
+    monkeypatch.setattr(
+        tool_route.db_client,
+        "get_tool_by_uuid",
+        AsyncMock(return_value=_mcp_tool_model()),
+    )
+
+    with pytest.raises(HTTPException) as ei:
+        await call_test_tool_route(
+            "tu-mcp", request=ToolTestRequest(), user=_fake_user()
+        )
+
+    assert ei.value.status_code == 400
+
+
 @pytest.mark.asyncio
 async def test_refresh_success(monkeypatch):
     import api.services.tool_management as tool_svc
@@ -484,3 +798,41 @@ async def test_refresh_not_found_is_404(monkeypatch):
     with pytest.raises(HTTPException) as ei:
         await refresh_mcp_tools("nope", user=_fake_user())
     assert ei.value.status_code == 404
+
+
+def test_tool_test_response_has_hint_and_request_fields():
+    """ToolTestResponse must carry hint + request_method/url/body/params
+    so the frontend can show what was sent and why it may have failed."""
+    resp = ToolTestResponse(
+        status="error",
+        status_code=405,
+        data=None,
+        error="Method Not Allowed",
+        duration_ms=12,
+        hint="HTTP 405 Method Not Allowed — the endpoint rejected the configured method (POST).",
+        request_method="POST",
+        request_url="https://example.com/thing",
+        request_headers={"Authorization": "********oken"},
+        request_body={"a": 1},
+        request_params=None,
+    )
+    assert resp.hint.startswith("HTTP 405")
+    assert resp.request_method == "POST"
+    assert resp.request_url == "https://example.com/thing"
+    assert resp.request_headers == {"Authorization": "********oken"}
+    assert resp.request_body == {"a": 1}
+    assert resp.request_params is None
+
+
+def test_tool_test_response_request_fields_default_to_none_or_required():
+    """hint/request_body/request_params are optional; request_method/url are required."""
+    resp = ToolTestResponse(
+        status="success",
+        duration_ms=5,
+        request_method="GET",
+        request_url="https://example.com/thing",
+    )
+    assert resp.hint is None
+    assert resp.request_headers == {}
+    assert resp.request_body is None
+    assert resp.request_params is None

ui/src/app/tools/[toolUuid]/components/http-tool-test/HttpToolTestDialog.tsx

@@ -0,0 +1,540 @@
+"use client";
+
+import { AlertTriangle, Loader2, Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { testToolApiV1ToolsToolUuidTestPost } from "@/client/sdk.gen";
+import type { ToolTestResponse } from "@/client/types.gen";
+import type { HttpMethod, PresetToolParameter, ToolParameter } from "@/components/http";
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { detailFromError } from "@/lib/apiError";
+import { useAuth } from "@/lib/auth";
+
+import {
+    generateSampleValue,
+    isUnsafeHttpMethod,
+    parseTestParameterValues,
+} from "./helpers";
+
+type HttpToolTestDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    toolUuid: string;
+    httpMethod: HttpMethod;
+    url: string;
+    parameters: ToolParameter[];
+    presetParameters: PresetToolParameter[];
+};
+
+type TestParameter = ToolParameter | PresetToolParameter;
+type ParameterSource = "llm" | "preset";
+type JsonEditTarget = {
+    source: ParameterSource;
+    name: string;
+};
+
+type ParameterFieldsProps = {
+    idPrefix: string;
+    parameters: TestParameter[];
+    values: Record<string, string>;
+    onValueChange: (name: string, value: string) => void;
+    onEditJson: (name: string) => void;
+};
+
+function defaultInputValue(parameter: TestParameter): string {
+    if (
+        "valueTemplate" in parameter &&
+        parameter.valueTemplate &&
+        !parameter.valueTemplate.includes("{{")
+    ) {
+        return parameter.valueTemplate;
+    }
+    switch (parameter.type) {
+        case "number":
+            return "0";
+        case "boolean":
+            return "true";
+        case "object":
+            return "{}";
+        case "array":
+            return "[]";
+        default:
+            return "";
+    }
+}
+
+function seedMissingValues(
+    previous: Record<string, string>,
+    parameters: TestParameter[]
+): Record<string, string> {
+    const next = { ...previous };
+    let changed = false;
+
+    for (const parameter of parameters) {
+        if (!parameter.name || parameter.name in next) continue;
+        next[parameter.name] = defaultInputValue(parameter);
+        changed = true;
+    }
+
+    return changed ? next : previous;
+}
+
+function ParameterFields({
+    idPrefix,
+    parameters,
+    values,
+    onValueChange,
+    onEditJson,
+}: ParameterFieldsProps) {
+    if (parameters.length === 0) {
+        return <p className="text-sm text-muted-foreground">No parameters configured.</p>;
+    }
+
+    return (
+        <div className="space-y-4">
+            {parameters.map((parameter) => {
+                const inputId = `${idPrefix}-${parameter.name}`;
+                const value = values[parameter.name] ?? defaultInputValue(parameter);
+
+                return (
+                    <div key={parameter.name} className="space-y-1.5">
+                        <div className="flex items-center gap-2">
+                            <Label htmlFor={inputId} className="text-sm font-mono">
+                                {parameter.name}
+                            </Label>
+                            <span className="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+                                {parameter.type}
+                            </span>
+                            {parameter.required && <span className="text-xs text-destructive">required</span>}
+                        </div>
+                        {"description" in parameter && parameter.description && (
+                            <p className="text-xs text-muted-foreground">{parameter.description}</p>
+                        )}
+                        {"valueTemplate" in parameter && parameter.valueTemplate && (
+                            <p className="break-all text-xs text-muted-foreground">
+                                Configured preset: <code>{parameter.valueTemplate}</code>
+                            </p>
+                        )}
+                        {parameter.type === "boolean" ? (
+                            <select
+                                id={inputId}
+                                value={value}
+                                onChange={(event) => onValueChange(parameter.name, event.target.value)}
+                                className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm"
+                            >
+                                <option value="true">true</option>
+                                <option value="false">false</option>
+                            </select>
+                        ) : parameter.type === "number" ? (
+                            <Input
+                                id={inputId}
+                                type="number"
+                                value={value}
+                                onChange={(event) => onValueChange(parameter.name, event.target.value)}
+                            />
+                        ) : parameter.type === "object" || parameter.type === "array" ? (
+                            <div className="flex items-center gap-2">
+                                <button
+                                    type="button"
+                                    onClick={() => onEditJson(parameter.name)}
+                                    className="h-9 flex-1 truncate rounded-md border border-input bg-background px-3 py-1 text-left font-mono text-sm shadow-sm hover:bg-accent"
+                                >
+                                    {!value || value === (parameter.type === "array" ? "[]" : "{}") ? (
+                                        <span className="text-muted-foreground">Empty</span>
+                                    ) : (
+                                        value
+                                    )}
+                                </button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    size="icon"
+                                    onClick={() => onEditJson(parameter.name)}
+                                    aria-label={`Edit ${parameter.name}`}
+                                >
+                                    <Pencil className="h-4 w-4" />
+                                </Button>
+                            </div>
+                        ) : (
+                            <Input
+                                id={inputId}
+                                value={value}
+                                onChange={(event) => onValueChange(parameter.name, event.target.value)}
+                                placeholder={`Enter ${parameter.name}`}
+                            />
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+export function HttpToolTestDialog({
+    open,
+    onOpenChange,
+    toolUuid,
+    httpMethod,
+    url,
+    parameters,
+    presetParameters,
+}: HttpToolTestDialogProps) {
+    const { getAccessToken } = useAuth();
+    const [llmParamValues, setLlmParamValues] = useState<Record<string, string>>({});
+    const [presetParamValues, setPresetParamValues] = useState<Record<string, string>>({});
+    const [result, setResult] = useState<ToolTestResponse | null>(null);
+    const [isTesting, setIsTesting] = useState(false);
+    const [testError, setTestError] = useState<string | null>(null);
+    const [jsonEditTarget, setJsonEditTarget] = useState<JsonEditTarget | null>(null);
+    const [jsonEditDraft, setJsonEditDraft] = useState("");
+    const [jsonEditError, setJsonEditError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setLlmParamValues((previous) => seedMissingValues(previous, parameters));
+    }, [parameters]);
+
+    useEffect(() => {
+        setPresetParamValues((previous) => seedMissingValues(previous, presetParameters));
+    }, [presetParameters]);
+
+    const handleFillSampleValues = () => {
+        setLlmParamValues((previous) => {
+            const next = { ...previous };
+            for (const parameter of parameters) {
+                next[parameter.name] = generateSampleValue(parameter.type);
+            }
+            return next;
+        });
+        setPresetParamValues((previous) => {
+            const next = { ...previous };
+            for (const parameter of presetParameters) {
+                next[parameter.name] = generateSampleValue(parameter.type);
+            }
+            return next;
+        });
+    };
+
+    const closeJsonEditDialog = () => {
+        setJsonEditTarget(null);
+        setJsonEditDraft("");
+        setJsonEditError(null);
+    };
+
+    const openJsonEditDialog = (source: ParameterSource, parameterName: string) => {
+        const values = source === "llm" ? llmParamValues : presetParamValues;
+        const current = values[parameterName] ?? "";
+        let draft = current;
+
+        try {
+            draft = JSON.stringify(JSON.parse(current), null, 2);
+        } catch {
+            // Keep incomplete or invalid JSON as-is. Validation is triggered
+            // only when the user explicitly chooses Save or Format JSON.
+        }
+
+        setJsonEditTarget({ source, name: parameterName });
+        setJsonEditDraft(draft);
+        setJsonEditError(null);
+    };
+
+    const handleJsonEditDraftChange = (value: string) => {
+        setJsonEditDraft(value);
+        setJsonEditError(null);
+    };
+
+    const handleFormatJson = () => {
+        try {
+            const parsed = JSON.parse(jsonEditDraft);
+            setJsonEditDraft(JSON.stringify(parsed, null, 2));
+            setJsonEditError(null);
+        } catch (caughtError) {
+            setJsonEditError(caughtError instanceof Error ? caughtError.message : "Invalid JSON");
+        }
+    };
+
+    const handleSaveJsonEdit = () => {
+        if (jsonEditTarget === null) return;
+        const target = jsonEditTarget;
+
+        try {
+            const parsed = JSON.parse(jsonEditDraft);
+            const setValues = target.source === "llm" ? setLlmParamValues : setPresetParamValues;
+            setValues((previous) => ({ ...previous, [target.name]: JSON.stringify(parsed) }));
+            closeJsonEditDialog();
+        } catch (caughtError) {
+            setJsonEditError(caughtError instanceof Error ? caughtError.message : "Invalid JSON");
+        }
+    };
+
+    const handleTestTool = async () => {
+        try {
+            setIsTesting(true);
+            setTestError(null);
+            setResult(null);
+
+            const llmParams = parseTestParameterValues(parameters, llmParamValues);
+            const presetParams = parseTestParameterValues(presetParameters, presetParamValues);
+
+            const accessToken = await getAccessToken();
+            const response = await testToolApiV1ToolsToolUuidTestPost({
+                path: { tool_uuid: toolUuid },
+                headers: { Authorization: `Bearer ${accessToken}` },
+                body: {
+                    llm_params: llmParams,
+                    preset_params: presetParams,
+                },
+            });
+
+            if (response.error) {
+                setTestError(detailFromError(response.error, "Failed to test tool"));
+                return;
+            }
+
+            if (response.data) setResult(response.data);
+        } catch (caughtError) {
+            setTestError(caughtError instanceof Error ? caughtError.message : "Failed to test tool");
+        } finally {
+            setIsTesting(false);
+        }
+    };
+
+    const isSuccess =
+        result?.status === "success" &&
+        (result.status_code == null || (result.status_code >= 200 && result.status_code < 300));
+    const resultBadgeLabel = isSuccess ? "success" : result?.status === "success" ? "failed" : "error";
+
+    return (
+        <>
+            <Dialog open={open} onOpenChange={onOpenChange}>
+                <DialogContent className="max-h-[90vh] max-w-3xl grid-rows-[auto_minmax(0,1fr)]">
+                    <DialogHeader>
+                        <DialogTitle>Test Tool</DialogTitle>
+                        <DialogDescription>
+                            Run the saved configuration against the real endpoint.
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-6 overflow-y-auto pr-1">
+                        <div className="rounded-lg border bg-muted/40 p-4">
+                            <p className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                                Request
+                            </p>
+                            <div className="flex items-start gap-3">
+                                <span className="rounded bg-foreground px-2 py-1 font-mono text-xs font-semibold text-background">
+                                    {httpMethod}
+                                </span>
+                                <code className="break-all pt-0.5 text-sm">{url}</code>
+                            </div>
+                        </div>
+
+                        {isUnsafeHttpMethod(httpMethod) && (
+                            <div
+                                role="alert"
+                                className="flex gap-3 rounded-lg border border-amber-300 bg-amber-50 p-4 text-amber-900 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-200"
+                            >
+                                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" />
+                                <div className="space-y-1">
+                                    <p className="text-sm font-medium">This performs a real external request</p>
+                                    <p className="text-sm">
+                                        Testing sends an actual {httpMethod} request to this endpoint. Any configured
+                                        credential is used for the request, and the operation may modify external data.
+                                    </p>
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="space-y-3">
+                            <div className="flex items-center justify-between">
+                                <div>
+                                    <p className="text-sm font-medium">Parameters</p>
+                                    <p className="text-xs text-muted-foreground">
+                                        Supply the values that would normally come from the model and configured presets.
+                                    </p>
+                                </div>
+                                {(parameters.length > 0 || presetParameters.length > 0) && (
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={handleFillSampleValues}
+                                    >
+                                        Fill sample values
+                                    </Button>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="space-y-3 border-t pt-4">
+                            <div>
+                                <p className="text-sm font-medium">LLM Parameters</p>
+                                <p className="text-xs text-muted-foreground">
+                                    Values the model would provide at call time.
+                                </p>
+                            </div>
+                            <ParameterFields
+                                idPrefix="llm-param"
+                                parameters={parameters}
+                                values={llmParamValues}
+                                onValueChange={(name, value) =>
+                                    setLlmParamValues((previous) => ({ ...previous, [name]: value }))
+                                }
+                                onEditJson={(name) => openJsonEditDialog("llm", name)}
+                            />
+                        </div>
+
+                        <div className="space-y-3 border-t pt-4">
+                            <div>
+                                <p className="text-sm font-medium">Preset Parameters</p>
+                                <p className="text-xs text-muted-foreground">
+                                    Resolved values that Dograh would normally derive from each configured preset.
+                                </p>
+                            </div>
+                            <ParameterFields
+                                idPrefix="preset-param"
+                                parameters={presetParameters}
+                                values={presetParamValues}
+                                onValueChange={(name, value) =>
+                                    setPresetParamValues((previous) => ({ ...previous, [name]: value }))
+                                }
+                                onEditJson={(name) => openJsonEditDialog("preset", name)}
+                            />
+                        </div>
+
+                        <div className="flex justify-end">
+                            <Button onClick={handleTestTool} disabled={isTesting}>
+                                {isTesting ? (
+                                    <>
+                                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                        Testing...
+                                    </>
+                                ) : (
+                                    "Test Tool"
+                                )}
+                            </Button>
+                        </div>
+
+                        {testError && (
+                            <div className="rounded-lg border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
+                                {testError}
+                            </div>
+                        )}
+
+                        {result && (
+                            <div className="space-y-3 border-t pt-4">
+                                {(result.request_method || result.request_url) && (
+                                    <div className="space-y-1 overflow-auto rounded-lg bg-muted p-3 font-mono text-xs">
+                                        <p className="font-medium text-foreground">
+                                            {result.request_method} {result.request_url}
+                                        </p>
+                                        {result.request_headers && Object.keys(result.request_headers).length > 0 && (
+                                            <pre className="whitespace-pre-wrap">
+                                                Headers: {JSON.stringify(result.request_headers, null, 2)}
+                                            </pre>
+                                        )}
+                                        {result.request_body != null && (
+                                            <pre className="whitespace-pre-wrap">
+                                                Body: {JSON.stringify(result.request_body, null, 2)}
+                                            </pre>
+                                        )}
+                                        {result.request_params != null && (
+                                            <pre className="whitespace-pre-wrap">
+                                                Query:{" "}
+                                                {Object.entries(result.request_params)
+                                                    .map(([key, value]) => `${key}=${value}`)
+                                                    .join("  ")}
+                                            </pre>
+                                        )}
+                                    </div>
+                                )}
+                                <div className="flex items-center gap-3">
+                                    <span
+                                        className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${
+                                            isSuccess
+                                                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
+                                                : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+                                        }`}
+                                    >
+                                        <span>{isSuccess ? "✓" : "✗"}</span>
+                                        {resultBadgeLabel}
+                                    </span>
+                                    {result.status_code != null && (
+                                        <span className="text-sm text-muted-foreground">HTTP {result.status_code}</span>
+                                    )}
+                                    {result.duration_ms !== undefined && (
+                                        <span className="rounded bg-muted px-2 py-0.5 font-mono text-xs text-muted-foreground">
+                                            {result.duration_ms}ms
+                                        </span>
+                                    )}
+                                </div>
+                                {result.hint && (
+                                    <div className="rounded border border-amber-200 bg-amber-100 p-3 text-sm text-amber-900 dark:border-amber-900/40 dark:bg-amber-900/20 dark:text-amber-400">
+                                        {result.hint}
+                                    </div>
+                                )}
+                                {result.error && (
+                                    <div className="rounded border border-destructive/20 bg-destructive/10 p-3 text-sm text-destructive">
+                                        {result.error}
+                                    </div>
+                                )}
+                                {result.data != null && (
+                                    <div className="max-h-80 overflow-auto rounded-lg bg-muted p-4 font-mono text-sm">
+                                        <pre>{JSON.stringify(result.data, null, 2)}</pre>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog
+                open={jsonEditTarget !== null}
+                onOpenChange={(isOpen) => {
+                    if (!isOpen) closeJsonEditDialog();
+                }}
+            >
+                <DialogContent className="max-w-2xl">
+                    <DialogHeader>
+                        <DialogTitle>Edit {jsonEditTarget?.name}</DialogTitle>
+                        <DialogDescription>
+                            Edit the JSON value sent for this parameter when testing.
+                        </DialogDescription>
+                    </DialogHeader>
+                    <textarea
+                        value={jsonEditDraft}
+                        onChange={(event) => handleJsonEditDraftChange(event.target.value)}
+                        rows={12}
+                        className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 font-mono text-sm shadow-sm"
+                        spellCheck={false}
+                    />
+                    {jsonEditError && <p className="text-sm text-destructive">{jsonEditError}</p>}
+                    <div className="flex justify-end gap-2">
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={handleFormatJson}
+                            disabled={jsonEditDraft.length === 0}
+                        >
+                            Format JSON
+                        </Button>
+                        <Button type="button" variant="outline" onClick={closeJsonEditDialog}>
+                            Cancel
+                        </Button>
+                        <Button type="button" onClick={handleSaveJsonEdit}>
+                            Save
+                        </Button>
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}

ui/src/app/tools/[toolUuid]/components/http-tool-test/helpers.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+
+import {
+    buildHttpToolTestSnapshot,
+    generateSampleValue,
+    type HttpToolTestSnapshotFields,
+    isUnsafeHttpMethod,
+    parseTestParameterValues,
+} from "./helpers";
+
+describe("generateSampleValue", () => {
+    it.each([
+        ["string", "sample_text"],
+        ["number", "5"],
+        ["boolean", "true"],
+        ["array", "[]"],
+        ["object", "{}"],
+    ] as const)("returns %s sample input", (type, expected) => {
+        expect(generateSampleValue(type)).toBe(expected);
+    });
+});
+
+describe("isUnsafeHttpMethod", () => {
+    it("treats GET as safe", () => {
+        expect(isUnsafeHttpMethod("GET")).toBe(false);
+    });
+
+    it.each(["POST", "PUT", "PATCH", "DELETE"] as const)("treats %s as unsafe", (method) => {
+        expect(isUnsafeHttpMethod(method)).toBe(true);
+    });
+});
+
+describe("parseTestParameterValues", () => {
+    it("converts input strings to configured parameter types", () => {
+        expect(
+            parseTestParameterValues(
+                [
+                    { name: "query", type: "string", required: true },
+                    { name: "limit", type: "number", required: true },
+                    { name: "enabled", type: "boolean", required: true },
+                    { name: "filters", type: "object", required: true },
+                    { name: "tags", type: "array", required: true },
+                ],
+                {
+                    query: "cart",
+                    limit: "5",
+                    enabled: "false",
+                    filters: '{"status":"open"}',
+                    tags: '["new"]',
+                }
+            )
+        ).toEqual({
+            query: "cart",
+            limit: 5,
+            enabled: false,
+            filters: { status: "open" },
+            tags: ["new"],
+        });
+    });
+
+    it("reports the parameter containing invalid JSON", () => {
+        expect(() =>
+            parseTestParameterValues(
+                [{ name: "filters", type: "object", required: true }],
+                { filters: "{" }
+            )
+        ).toThrow("filters: invalid JSON");
+    });
+
+    it("rejects missing required values", () => {
+        expect(() =>
+            parseTestParameterValues(
+                [{ name: "customer_id", type: "string", required: true }],
+                { customer_id: "" }
+            )
+        ).toThrow("customer_id: value is required");
+    });
+});
+
+describe("buildHttpToolTestSnapshot", () => {
+    const base: HttpToolTestSnapshotFields = {
+        name: "Search API",
+        description: "Search for records",
+        httpMethod: "GET",
+        url: "https://api.example.com",
+        credentialUuid: "",
+        headers: [],
+        parameters: [],
+        presetParameters: [],
+        timeoutMs: 5000,
+        customMessage: "",
+        customMessageType: "text",
+        customMessageRecordingId: "",
+    };
+
+    it("produces identical output for identical fields", () => {
+        expect(buildHttpToolTestSnapshot(base)).toBe(buildHttpToolTestSnapshot({ ...base }));
+    });
+
+    it("changes when a saved HTTP field changes", () => {
+        expect(buildHttpToolTestSnapshot(base)).not.toBe(
+            buildHttpToolTestSnapshot({ ...base, url: "https://api.example.com/v2" })
+        );
+        expect(buildHttpToolTestSnapshot(base)).not.toBe(
+            buildHttpToolTestSnapshot({
+                ...base,
+                parameters: [{ name: "q", type: "string", description: "", required: true }],
+            })
+        );
+        expect(buildHttpToolTestSnapshot(base)).not.toBe(
+            buildHttpToolTestSnapshot({ ...base, name: "Updated Search API" })
+        );
+        expect(buildHttpToolTestSnapshot(base)).not.toBe(
+            buildHttpToolTestSnapshot({ ...base, description: "Updated description" })
+        );
+        expect(buildHttpToolTestSnapshot(base)).not.toBe(
+            buildHttpToolTestSnapshot({ ...base, customMessage: "Done" })
+        );
+    });
+});

ui/src/app/tools/[toolUuid]/components/http-tool-test/helpers.ts

@@ -0,0 +1,80 @@
+import type { HttpMethod, KeyValueItem, ParameterType, PresetToolParameter, ToolParameter } from "@/components/http";
+
+const TYPE_SAMPLE_VALUES: Record<ParameterType, string> = {
+    string: "sample_text",
+    number: "5",
+    boolean: "true",
+    array: "[]",
+    object: "{}",
+};
+
+/**
+ * Type-based sample value used to pre-fill test-dialog inputs. Parameters do
+ * not currently include a schema, so objects and arrays can only be seeded
+ * with valid empty JSON containers.
+ */
+export function generateSampleValue(type: ParameterType): string {
+    return TYPE_SAMPLE_VALUES[type];
+}
+
+/** Whether testing this method may change state on the external service. */
+export function isUnsafeHttpMethod(method: HttpMethod): boolean {
+    return method !== "GET";
+}
+
+export function parseTestParameterValues(
+    parameters: Array<Pick<ToolParameter, "name" | "type" | "required">>,
+    values: Record<string, string>
+): Record<string, unknown> {
+    const parsedValues: Record<string, unknown> = {};
+
+    for (const parameter of parameters) {
+        const rawValue = values[parameter.name];
+        if (rawValue === undefined || rawValue === "") {
+            if (parameter.required) throw new Error(`${parameter.name}: value is required`);
+            continue;
+        }
+
+        if (parameter.type === "number") {
+            parsedValues[parameter.name] = Number(rawValue);
+        } else if (parameter.type === "boolean") {
+            parsedValues[parameter.name] = rawValue === "true";
+        } else if (parameter.type === "object" || parameter.type === "array") {
+            try {
+                parsedValues[parameter.name] = JSON.parse(rawValue);
+            } catch {
+                throw new Error(`${parameter.name}: invalid JSON`);
+            }
+        } else {
+            parsedValues[parameter.name] = rawValue;
+        }
+    }
+
+    return parsedValues;
+}
+
+export type HttpToolTestSnapshotFields = {
+    name: string;
+    description: string;
+    httpMethod: HttpMethod;
+    url: string;
+    credentialUuid: string;
+    headers: KeyValueItem[];
+    parameters: ToolParameter[];
+    presetParameters: PresetToolParameter[];
+    timeoutMs: number;
+    customMessage: string;
+    customMessageType: "text" | "audio";
+    customMessageRecordingId: string;
+};
+
+/**
+ * Canonical string for HTTP API fields that affect the saved configuration
+ * used by Test Tool.
+ */
+export function buildHttpToolTestSnapshot(fields: HttpToolTestSnapshotFields): string {
+    const normalizedHeaders = Object.fromEntries(
+        fields.headers.filter((header) => header.key).map((header) => [header.key, header.value])
+    );
+    return JSON.stringify({ ...fields, headers: normalizedHeaders });
+}

ui/src/app/tools/[toolUuid]/components/http-tool-test/index.ts

@@ -0,0 +1,8 @@
+export {
+    buildHttpToolTestSnapshot,
+    generateSampleValue,
+    type HttpToolTestSnapshotFields,
+    isUnsafeHttpMethod,
+    parseTestParameterValues,
+} from "./helpers";
+export { HttpToolTestDialog } from "./HttpToolTestDialog";

ui/src/app/tools/[toolUuid]/components/index.ts

@@ -1,4 +1,5 @@
 export { BuiltinToolConfig, type BuiltinToolConfigProps } from "./BuiltinToolConfig";
 export { EndCallToolConfig, type EndCallToolConfigProps } from "./EndCallToolConfig";
+export { buildHttpToolTestSnapshot, HttpToolTestDialog } from "./http-tool-test";
 export { HttpApiToolConfig, type HttpApiToolConfigProps } from "./HttpApiToolConfig";
 export { TransferCallToolConfig, type TransferCallToolConfigProps } from "./TransferCallToolConfig";

ui/src/app/tools/[toolUuid]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowLeft, Code, ExternalLink, Loader2, Save } from "lucide-react";
+import { ArrowLeft, Code, ExternalLink, FlaskConical, Loader2, Save } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
@@ -38,6 +38,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Textarea } from "@/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { TOOL_DOCUMENTATION_URLS } from "@/constants/documentation";
 import { detailFromError } from "@/lib/apiError";
 import { useAuth } from "@/lib/auth";
@@ -54,7 +55,14 @@ import {
     type ToolCategory,
     type TransferDestinationSource,
 } from "../config";
-import { BuiltinToolConfig, EndCallToolConfig, HttpApiToolConfig, TransferCallToolConfig } from "./components";
+import {
+    buildHttpToolTestSnapshot,
+    BuiltinToolConfig,
+    EndCallToolConfig,
+    HttpApiToolConfig,
+    HttpToolTestDialog,
+    TransferCallToolConfig,
+} from "./components";
 
 function normalizeParameterType(value: string | null | undefined): ParameterType {
     switch (value) {
@@ -84,6 +92,8 @@ export default function ToolDetailPage() {
     const [error, setError] = useState<string | null>(null);
     const [saveSuccess, setSaveSuccess] = useState(false);
     const [showCodeDialog, setShowCodeDialog] = useState(false);
+    const [showTestDialog, setShowTestDialog] = useState(false);
+    const [savedHttpTestSnapshot, setSavedHttpTestSnapshot] = useState<string | null>(null);
 
     // Common form state
     const [name, setName] = useState("");
@@ -264,52 +274,73 @@ export default function ToolDetailPage() {
             // Populate HTTP API specific fields
             const config = tool.definition?.config as HttpApiToolDefinition["config"] | undefined;
             if (config) {
-                setHttpMethod((config.method as HttpMethod) || "POST");
-                setUrl(config.url || "");
-                setCredentialUuid(config.credential_uuid || "");
-                setTimeoutMs(config.timeout_ms || 5000);
-                setCustomMessage(config.customMessage || "");
-                setCustomMessageType(config.customMessageType || "text");
-                setCustomMessageRecordingId(config.customMessageRecordingId || "");
+                const loadedHttpMethod = (config.method as HttpMethod) || "POST";
+                const loadedUrl = config.url || "";
+                const loadedCredentialUuid = config.credential_uuid || "";
+                const loadedTimeoutMs = config.timeout_ms || 5000;
+                const loadedCustomMessage = config.customMessage || "";
+                const loadedCustomMessageType = config.customMessageType || "text";
+                const loadedCustomMessageRecordingId = config.customMessageRecordingId || "";
+                setHttpMethod(loadedHttpMethod);
+                setUrl(loadedUrl);
+                setCredentialUuid(loadedCredentialUuid);
+                setTimeoutMs(loadedTimeoutMs);
+                setCustomMessage(loadedCustomMessage);
+                setCustomMessageType(loadedCustomMessageType);
+                setCustomMessageRecordingId(loadedCustomMessageRecordingId);
 
                 // Convert headers object to array
-                if (config.headers) {
-                    setHeaders(
-                        Object.entries(config.headers).map(([key, value]) => ({
-                            key,
-                            value: value as string,
-                        }))
-                    );
-                } else {
-                    setHeaders([]);
-                }
+                const loadedHeaders = config.headers
+                    ? Object.entries(config.headers).map(([key, value]) => ({
+                        key,
+                        value: value as string,
+                    }))
+                    : [];
+                setHeaders(loadedHeaders);
 
                 // Load parameters
+                let loadedParameters: ToolParameter[] = [];
                 if (config.parameters && Array.isArray(config.parameters)) {
-                    setParameters(
-                        config.parameters.map((p) => ({
-                            name: p.name || "",
-                            type: normalizeParameterType(p.type),
-                            description: p.description || "",
-                            required: p.required ?? true,
-                        }))
-                    );
+                    loadedParameters = config.parameters.map((p) => ({
+                        name: p.name || "",
+                        type: normalizeParameterType(p.type),
+                        description: p.description || "",
+                        required: p.required ?? true,
+                    }));
+                    setParameters(loadedParameters);
                 } else {
                     setParameters([]);
                 }
 
+                let loadedPresetParameters: PresetToolParameter[] = [];
                 if (config.preset_parameters && Array.isArray(config.preset_parameters)) {
-                    setPresetParameters(
-                        config.preset_parameters.map((p) => ({
-                            name: p.name || "",
-                            type: normalizeParameterType(p.type),
-                            valueTemplate: p.value_template || "",
-                            required: p.required ?? true,
-                        }))
-                    );
+                    loadedPresetParameters = config.preset_parameters.map((p) => ({
+                        name: p.name || "",
+                        type: normalizeParameterType(p.type),
+                        valueTemplate: p.value_template || "",
+                        required: p.required ?? true,
+                    }));
+                    setPresetParameters(loadedPresetParameters);
                 } else {
                     setPresetParameters([]);
                 }
+
+                setSavedHttpTestSnapshot(
+                    buildHttpToolTestSnapshot({
+                        name: tool.name,
+                        description: tool.description || "",
+                        httpMethod: loadedHttpMethod,
+                        url: loadedUrl,
+                        credentialUuid: loadedCredentialUuid,
+                        headers: loadedHeaders,
+                        parameters: loadedParameters,
+                        presetParameters: loadedPresetParameters,
+                        timeoutMs: loadedTimeoutMs,
+                        customMessage: loadedCustomMessage,
+                        customMessageType: loadedCustomMessageType,
+                        customMessageRecordingId: loadedCustomMessageRecordingId,
+                    })
+                );
             }
         }
     };
@@ -406,6 +437,11 @@ export default function ToolDetailPage() {
                 setError("All parameters must have a name");
                 return;
             }
+            const paramNames = parameters.map((p) => p.name.trim()).filter(Boolean);
+            if (new Set(paramNames).size !== paramNames.length) {
+                setError("Parameter names must be unique");
+                return;
+            }
 
             const invalidPresetParams = presetParameters.filter(
                 (p) => !p.name.trim() || !p.valueTemplate.trim()
@@ -580,6 +616,24 @@ export default function ToolDetailPage() {
                 setTool(response.data);
                 setSaveSuccess(true);
                 setTimeout(() => setSaveSuccess(false), 3000);
+                if (tool.category === "http_api") {
+                    setSavedHttpTestSnapshot(
+                        buildHttpToolTestSnapshot({
+                            name,
+                            description,
+                            httpMethod,
+                            url,
+                            credentialUuid,
+                            headers,
+                            parameters,
+                            presetParameters,
+                            timeoutMs,
+                            customMessage,
+                            customMessageType,
+                            customMessageRecordingId,
+                        })
+                    );
+                }
             }
         } catch (err) {
             setError("Failed to save tool");
@@ -681,6 +735,24 @@ const data = await response.json();`;
     const isTransferCallTool = tool.category === "transfer_call";
     const isBuiltinTool = tool.category === "calculator";
     const isMcpTool = tool.category === "mcp";
+    const isHttpApiTool = tool.category === "http_api";
+    const hasUnsavedHttpChanges =
+        isHttpApiTool &&
+        (savedHttpTestSnapshot === null ||
+            buildHttpToolTestSnapshot({
+                name,
+                description,
+                httpMethod,
+                url,
+                credentialUuid,
+                headers,
+                parameters,
+                presetParameters,
+                timeoutMs,
+                customMessage,
+                customMessageType,
+                customMessageRecordingId,
+            }) !== savedHttpTestSnapshot);
     const categoryConfig = getCategoryConfig(tool.category as ToolCategory);
 
     return (
@@ -716,7 +788,7 @@ const data = await response.json();`;
                             </div>
                         </div>
                         <div className="flex items-center gap-2">
-                            {!isEndCallTool && !isTransferCallTool && !isBuiltinTool && !isMcpTool && (
+                            {isHttpApiTool && (
                                 <Button
                                     variant="outline"
                                     onClick={() => setShowCodeDialog(true)}
@@ -903,6 +975,18 @@ const data = await response.json();`;
                         />
                     )}
 
+                    {isHttpApiTool && (
+                        <HttpToolTestDialog
+                            open={showTestDialog}
+                            onOpenChange={setShowTestDialog}
+                            toolUuid={toolUuid}
+                            httpMethod={httpMethod}
+                            url={url}
+                            parameters={parameters}
+                            presetParameters={presetParameters}
+                        />
+                    )}
+
                     {error && (
                         <div className="mt-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
                             {error}
@@ -915,7 +999,34 @@ const data = await response.json();`;
                         </div>
                     )}
 
-                    <div className="flex justify-end mt-6">
+                    <div className="flex justify-end gap-2 mt-6">
+                        {isHttpApiTool && (
+                            hasUnsavedHttpChanges ? (
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span className="inline-flex" tabIndex={0}>
+                                            <Button type="button" variant="outline" disabled>
+                                                <FlaskConical className="w-4 h-4 mr-2" />
+                                                Test Tool
+                                            </Button>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent side="top">
+                                        Save the tool before testing.
+                                    </TooltipContent>
+                                </Tooltip>
+                            ) : (
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => setShowTestDialog(true)}
+                                    disabled={isSaving}
+                                >
+                                    <FlaskConical className="w-4 h-4 mr-2" />
+                                    Test Tool
+                                </Button>
+                            )
+                        )}
                         <Button onClick={handleSave} disabled={isSaving}>
                             {isSaving ? (
                                 <>
@@ -947,6 +1058,7 @@ const data = await response.json();`;
                     </div>
                 </DialogContent>
             </Dialog>
+
         </div>
     );
 }

ui/src/client/types.gen.ts

@@ -5938,6 +5938,88 @@ export type ToolResponse = {
     created_by?: CreatedByResponse | null;
 };
 
+/**
+ * ToolTestRequest
+ *
+ * Request body for testing an HTTP API tool outside a live call.
+ */
+export type ToolTestRequest = {
+    /**
+     * Llm Params
+     *
+     * Values for parameters normally supplied by the model.
+     */
+    llm_params?: {
+        [key: string]: unknown;
+    };
+    /**
+     * Preset Params
+     *
+     * Resolved values for parameters normally supplied from presets.
+     */
+    preset_params?: {
+        [key: string]: unknown;
+    };
+};
+
+/**
+ * ToolTestResponse
+ *
+ * Result of testing an HTTP API tool.
+ */
+export type ToolTestResponse = {
+    /**
+     * Status
+     */
+    status: string;
+    /**
+     * Status Code
+     */
+    status_code?: number | null;
+    /**
+     * Data
+     */
+    data?: unknown | null;
+    /**
+     * Error
+     */
+    error?: string | null;
+    /**
+     * Hint
+     */
+    hint?: string | null;
+    /**
+     * Request Method
+     */
+    request_method: string;
+    /**
+     * Request Url
+     */
+    request_url: string;
+    /**
+     * Request Headers
+     */
+    request_headers?: {
+        [key: string]: string;
+    };
+    /**
+     * Request Body
+     */
+    request_body?: {
+        [key: string]: unknown;
+    } | null;
+    /**
+     * Request Params
+     */
+    request_params?: {
+        [key: string]: unknown;
+    } | null;
+    /**
+     * Duration Ms
+     */
+    duration_ms: number;
+};
+
 /**
  * TransferCallConfig
  *
@@ -10664,6 +10746,50 @@ export type RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses = {
 
 export type RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponse = RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses[keyof RefreshMcpToolsApiV1ToolsToolUuidMcpRefreshPostResponses];
 
+export type TestToolApiV1ToolsToolUuidTestPostData = {
+    body: ToolTestRequest;
+    headers?: {
+        /**
+         * Authorization
+         */
+        authorization?: string | null;
+        /**
+         * X-Api-Key
+         */
+        'X-API-Key'?: string | null;
+    };
+    path: {
+        /**
+         * Tool Uuid
+         */
+        tool_uuid: string;
+    };
+    query?: never;
+    url: '/api/v1/tools/{tool_uuid}/test';
+};
+
+export type TestToolApiV1ToolsToolUuidTestPostErrors = {
+    /**
+     * Not found
+     */
+    404: unknown;
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type TestToolApiV1ToolsToolUuidTestPostError = TestToolApiV1ToolsToolUuidTestPostErrors[keyof TestToolApiV1ToolsToolUuidTestPostErrors];
+
+export type TestToolApiV1ToolsToolUuidTestPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: ToolTestResponse;
+};
+
+export type TestToolApiV1ToolsToolUuidTestPostResponse = TestToolApiV1ToolsToolUuidTestPostResponses[keyof TestToolApiV1ToolsToolUuidTestPostResponses];
+
 export type UnarchiveToolApiV1ToolsToolUuidUnarchivePostData = {
     body?: never;
     headers?: {