Paste to tool button

[andraz]

Is your feature request related to a problem? Please describe.
When I am experimenting with different LLMs via chat I give them my tool description (in a format they expect) and then make them role-play with me executing my tool, basically doing E2E testing on practical examples.

Describe the solution you'd like
Single click paste button to enter data directly into a tool.

Ingesting arguments data through (forgiving) JSON parser would be optimal, so we don't get bogged down by tiny formatting bikeshedding side tangents while experimenting, if LLM generates less than perfect JSON (unquoted keys, single quoted keys, wrong escapes etc...).

Describe alternatives you've considered
Using a MCP playwright server which would inception-like control another MCP Inspector instance, converting raw data into input field data and submitting with one click. But at this point, it is less code and work to just create our own UI and skip the middleman.

Additional context

It is tedious to copy paste one line at a time, clicking checkboxes etc... a "paste JSON" button would be perfect (automatically ingesting clipboard data into inputs).

UI's expectation is that clipboard data is mostly identical to object we see later in the Request arguments.

We can recycle the standard list tools output:

{
  "tools": [
    {
      "name": "edit_file",
      "description": "Make line-based edits to a text file. Each edit replaces exact line sequences with new content. Returns a git-style diff showing the changes made.",
      "inputSchema": {
        "type": "object",
        "properties": {
          "path": {
            "type": "string"
          },
          "edits": {
            "type": "array"
          },
          "dryRun": {
            "type": "boolean",
            "default": false
          }
        },
        "required": [
          "path",
          "edits"
        ],
        "additionalProperties": false,
        "$schema": "http://json-schema.org/draft-07/schema#"
      }
    }
  ]
}

Passing it into LLM (aistudio.google.com):

{
  "edits": [
    "TEST=true"
  ],
  "path": ".env"
}

Here when role-playing with LLM - giving it tool description in their format - we can not rapidly iterate testing inputs and responses by simple copy-pasting. We need to tediously babysit each input one at a time without the suggested feature, blocking our flow in the process.

[andraz]

I used my LLM workflow to ideate one solution to this issue, if you feel it is trivial to integrate, please feel free to use:

Objective: Implement a "Paste Inputs" button in the "Tools" tab to populate tool input fields from a JSON object in the clipboard.

1. Create a Clipboard Utility:

• A new utility file, client/src/utils/clipboardUtils.ts, will be created.
• This file will contain a function, extractAndParseJson(text: string): Record<string, unknown> | null.
• extractAndParseJson Logic:
  • Takes raw clipboard text as input.
  • Trims whitespace.
  • Attempts to extract JSON content from common markdown code fences (e.g., json ... or ...).
  • If code fence content is found and is valid JSON, it's used. Otherwise, the original text (or the extracted text if parsing the full block fails) is used.
  • Tries JSON.parse() on the cleaned/extracted text.
  • If parsing fails, it attempts a fallback: find the substring between the first { and the last } and try parsing that.
  • Returns the parsed JavaScript object if successful and it's an object (not an array or primitive type), otherwise returns null.

2. Integrate into ToolsTab.tsx:

• Add UI Element:
  • A new "Paste Inputs" button will be added, likely next to the "Run Tool" button.
• Implement Handler Function (handlePasteInputs):
  • This async function will be triggered on button click.
  • It will check if a tool is selected; if not, it shows a toast notification.
  • It reads text from navigator.clipboard.readText().
  • It calls the extractAndParseJson utility with the clipboard text.
  • If parsedJson is valid:
    • It iterates through the inputSchema.properties of the selectedTool.
    • For each property key in the schema, if parsedJson has a matching key, the corresponding value from parsedJson is used to update the params state for that tool input.
    • A success toast notification is shown.
  • If parsedJson is null (or parsing fails):
    • An error toast notification is shown, indicating that a valid JSON object could not be found or parsed.
  • Clipboard read errors are also caught and displayed via toast.
• Use useToast: For providing user feedback.

Benefits of this Approach:

• Modularity: Separates clipboard processing logic into a reusable utility.
• Testability: The extractAndParseJson function can be unit-tested independently.
• Readability: Keeps the ToolsTab.tsx component focused on its primary responsibilities.

---

Suggested Code Changes:

New File: client/src/utils/clipboardUtils.ts

import JSON5 from 'json5';

/**
 * Attempts to extract and parse a JSON-like object from a given text string
 * using JSON5 for more lenient parsing (e.g., unquoted keys, single quotes, comments).
 * It handles common markdown code fences and falls back to parsing the whole text
 * or a substring if direct parsing or code fence extraction fails.
 *
 * @param text The text content from the clipboard.
 * @returns A parsed JavaScript object if successful and it's an object (not an array or primitive), otherwise null.
 */
export function extractAndParseJson(
  text: string,
): Record<string, unknown> | null {
  if (!text || typeof text !== 'string') {
    return null;
  }

  const trimmedText = text.trim();

  // Regex to find content within ```json ... ```, ```javascript ... ``` or ``` ... ```
  // It captures the content inside the backticks.
  // It handles optional "json" or "javascript" language specifier.
  const codeBlockRegex = /```(?:json5?|javascript)?\s*([\s\S]*?)\s*```/;
  const match = trimmedText.match(codeBlockRegex);

  let textToParse = trimmedText;
  let parsedFromCodeBlock = false;

  if (match && match[1]) {
    textToParse = match[1].trim();
    parsedFromCodeBlock = true;
  }

  // Attempt 1: Parse the content (either from code block or original trimmed text)
  try {
    const parsed = JSON5.parse(textToParse);
    if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
      return parsed as Record<string, unknown>;
    }
  } catch (e) {
    // Parsing failed. If it was from a code block, the block itself might be invalid.
    // If it wasn't from a code block, then the whole text might be invalid.
    // In either case, we might want to try parsing the original `trimmedText` if `textToParse` was different
    // or attempt the substring fallback.
  }

  // Attempt 2: If parsing the (potentially code-block-extracted) `textToParse` failed,
  // and if `textToParse` was indeed different from the original `trimmedText` (i.e., we extracted from a code block),
  // let's try parsing the *entire* `trimmedText` in case the code block delimiters were faulty or the JSON was outside.
  if (parsedFromCodeBlock && textToParse !== trimmedText) {
    try {
      const parsed = JSON5.parse(trimmedText);
      if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
        return parsed as Record<string, unknown>;
      }
    } catch (e) {
      // Parsing the full trimmedText also failed. Proceed to substring fallback.
    }
  }


  // Attempt 3: Fallback - find the substring between the first '{' and the last '}'
  // This is a last resort and might grab an incomplete or unintended object if there's surrounding text.
  const firstBrace = trimmedText.indexOf('{');
  const lastBrace = trimmedText.lastIndexOf('}');

  if (firstBrace !== -1 && lastBrace > firstBrace) {
    const jsonCandidate = trimmedText.substring(firstBrace, lastBrace + 1);
    try {
      const parsedCandidate = JSON5.parse(jsonCandidate);
      if (
        typeof parsedCandidate === 'object' &&
        parsedCandidate !== null &&
        !Array.isArray(parsedCandidate)
      ) {
        return parsedCandidate as Record<string, unknown>;
      }
    } catch {
      // Fallback parsing also failed
    }
  }

  return null;
}

Modified File: client/src/components/ToolsTab.tsx

import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { TabsContent } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import DynamicJsonForm from "./DynamicJsonForm";
import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
import { generateDefaultValue } from "@/utils/schemaUtils";
import {
  CompatibilityCallToolResult,
  ListToolsResult,
  Tool,
} from "@modelcontextprotocol/sdk/types.js";
import { Loader2, Send, ChevronDown, ChevronUp, ClipboardPaste } from "lucide-react"; // Added ClipboardPaste
import { useEffect, useState } from "react";
import ListPane from "./ListPane";
import JsonView from "./JsonView";
import ToolResults from "./ToolResults";
import { useToast } from "@/lib/hooks/useToast"; // Added useToast
import { extractAndParseJson } from "@/utils/clipboardUtils"; // Added clipboard utility

const ToolsTab = ({
  tools,
  listTools,
  clearTools,
  callTool,
  selectedTool,
  setSelectedTool,
  toolResult,
  nextCursor,
  // error prop was defined but not used in the provided original file, kept for consistency if used elsewhere
  // error,
}: {
  tools: Tool[];
  listTools: () => void;
  clearTools: () => void;
  callTool: (name: string, params: Record<string, unknown>) => Promise<void>;
  selectedTool: Tool | null;
  setSelectedTool: (tool: Tool | null) => void;
  toolResult: CompatibilityCallToolResult | null;
  nextCursor: ListToolsResult["nextCursor"];
  error: string | null;
}) => {
  const [params, setParams] = useState<Record<string, unknown>>({});
  const [isToolRunning, setIsToolRunning] = useState(false);
  const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
  const { toast } = useToast(); // Initialize useToast

  useEffect(() => {
    if (selectedTool?.inputSchema?.properties) {
      const initialParams = Object.fromEntries(
        Object.entries(selectedTool.inputSchema.properties).map(
          ([key, value]) => [
            key,
            generateDefaultValue(value as JsonSchemaType),
          ],
        ),
      );
      setParams(initialParams);
    } else {
      setParams({}); // Reset params if no selected tool or no properties
    }
  }, [selectedTool]);

  const handlePasteInputs = async () => {
    if (!selectedTool) {
      toast({
        title: "No Tool Selected",
        description: "Please select a tool first before pasting inputs.",
        variant: "destructive",
      });
      return;
    }

    try {
      const clipboardText = await navigator.clipboard.readText();
      if (!clipboardText) {
        toast({
          title: "Clipboard Empty",
          description: "Your clipboard is empty.",
          variant: "default",
        });
        return;
      }

      const parsedJson = extractAndParseJson(clipboardText);

      if (parsedJson && typeof parsedJson === 'object' && !Array.isArray(parsedJson)) {
        const newParams = { ...params };
        let updated = false;
        if (selectedTool.inputSchema.properties) {
          for (const key in selectedTool.inputSchema.properties) {
            if (Object.prototype.hasOwnProperty.call(parsedJson, key)) {
               // Directly assign, DynamicJsonForm will handle type specific UI updates.
               // If specific type coercion is needed here, it can be added.
              newParams[key] = parsedJson[key];
              updated = true;
            }
          }
        }


        if (updated) {
          setParams(newParams);
          toast({
            title: "Inputs Pasted",
            description: "Tool inputs populated from clipboard.",
            variant: "default",
          });
        } else {
           toast({
            title: "No Matching Inputs",
            description: "No matching input fields found in the pasted JSON for the selected tool.",
            variant: "default",
          });
        }
      } else {
        toast({
          title: "Parsing Failed",
          description:
            "Could not find or parse a valid JSON object from clipboard content.",
          variant: "destructive",
        });
      }
    } catch (err) {
      console.error("Failed to read from clipboard or parse JSON:", err);
      toast({
        title: "Clipboard Error",
        description: `Failed to process clipboard content: ${err instanceof Error ? err.message : String(err)}`,
        variant: "destructive",
      });
    }
  };

  return (
    <TabsContent value="tools">
      <div className="grid grid-cols-2 gap-4">
        <ListPane
          items={tools}
          listItems={listTools}
          clearItems={() => {
            clearTools();
            setSelectedTool(null);
          }}
          setSelectedItem={setSelectedTool}
          renderItem={(tool) => (
            <div className="flex flex-col items-start">
              <span className="flex-1">{tool.name}</span>
              <span className="text-sm text-gray-500 text-left">
                {tool.description}
              </span>
            </div>
          )}
          title="Tools"
          buttonText={nextCursor ? "List More Tools" : "List Tools"}
          isButtonDisabled={!nextCursor && tools.length > 0}
        />

        <div className="bg-card border border-border rounded-lg shadow">
          <div className="p-4 border-b border-gray-200 dark:border-border">
            <h3 className="font-semibold">
              {selectedTool ? selectedTool.name : "Select a tool"}
            </h3>
          </div>
          <div className="p-4">
            {selectedTool ? (
              <div className="space-y-4">
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {selectedTool.description}
                </p>
                {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                  ([key, value]) => {
                    const prop = value as JsonSchemaType;
                    return (
                      <div key={key}>
                        <Label
                          htmlFor={key}
                          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
                        >
                          {key}
                        </Label>
                        {prop.type === "boolean" ? (
                          <div className="flex items-center space-x-2 mt-2">
                            <Checkbox
                              id={key}
                              name={key}
                              checked={!!params[key]}
                              onCheckedChange={(checked: boolean) =>
                                setParams({
                                  ...params,
                                  [key]: checked,
                                })
                              }
                            />
                            <label
                              htmlFor={key}
                              className="text-sm font-medium text-gray-700 dark:text-gray-300"
                            >
                              {prop.description || "Toggle this option"}
                            </label>
                          </div>
                        ) : prop.type === "string" && prop.format !== 'json-string' ? ( // Assuming 'json-string' could be a hint for complex JSON
                          <Textarea
                            id={key}
                            name={key}
                            placeholder={prop.description}
                            value={(params[key] as string) ?? ""}
                            onChange={(e) =>
                              setParams({
                                ...params,
                                [key]: e.target.value,
                              })
                            }
                            className="mt-1"
                          />
                        ) : prop.type === "object" || prop.type === "array" || (prop.type === "string" && prop.format === 'json-string') ? (
                          <div className="mt-1">
                            <DynamicJsonForm
                              schema={{
                                type: prop.type,
                                properties: prop.properties,
                                description: prop.description,
                                items: prop.items,
                                // Pass required status for default value generation if needed
                                required: selectedTool.inputSchema.required?.includes(key),
                              }}
                              value={
                                (params[key] as JsonValue) ??
                                generateDefaultValue(prop)
                              }
                              onChange={(newValue: JsonValue) => {
                                setParams({
                                  ...params,
                                  [key]: newValue,
                                });
                              }}
                            />
                          </div>
                        ) : prop.type === "number" ||
                          prop.type === "integer" ? (
                          <Input
                            type="number"
                            id={key}
                            name={key}
                            placeholder={prop.description}
                            value={(params[key] as string | number) ?? ""}
                            onChange={(e) =>
                              setParams({
                                ...params,
                                [key]: e.target.value === "" ? undefined : Number(e.target.value), // Handle empty input for numbers
                              })
                            }
                            className="mt-1"
                          />
                        ) : (
                           // Fallback for other simple types or if more complex logic is desired via DynamicJsonForm
                          <div className="mt-1">
                            <DynamicJsonForm
                              schema={{
                                type: prop.type,
                                properties: prop.properties,
                                description: prop.description,
                                items: prop.items,
                                required: selectedTool.inputSchema.required?.includes(key),
                              }}
                              value={params[key] as JsonValue ?? generateDefaultValue(prop)}
                              onChange={(newValue: JsonValue) => {
                                setParams({
                                  ...params,
                                  [key]: newValue,
                                });
                              }}
                            />
                          </div>
                        )}
                      </div>
                    );
                  },
                )}
                {selectedTool.outputSchema && (
                  <div className="bg-gray-50 dark:bg-gray-900 p-3 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <h4 className="text-sm font-semibold">Output Schema:</h4>
                      <Button
                        size="sm"
                        variant="ghost"
                        onClick={() =>
                          setIsOutputSchemaExpanded(!isOutputSchemaExpanded)
                        }
                        className="h-6 px-2"
                      >
                        {isOutputSchemaExpanded ? (
                          <>
                            <ChevronUp className="h-3 w-3 mr-1" />
                            Collapse
                          </>
                        ) : (
                          <>
                            <ChevronDown className="h-3 w-3 mr-1" />
                            Expand
                          </>
                        )}
                      </Button>
                    </div>
                    <div
                      className={`transition-all ${
                        isOutputSchemaExpanded
                          ? ""
                          : "max-h-[8rem] overflow-y-auto" // Consider removing max-h for full view when expanded by default
                      }`}
                    >
                      <JsonView data={selectedTool.outputSchema} />
                    </div>
                  </div>
                )}
                {/* Button Container */}
                <div className="flex space-x-2">
                  <Button
                    onClick={handlePasteInputs}
                    variant="outline"
                    disabled={!selectedTool || isToolRunning}
                  >
                    <ClipboardPaste className="w-4 h-4 mr-2" />
                    Paste Inputs
                  </Button>
                  <Button
                    onClick={async () => {
                      if (!selectedTool) return;
                      try {
                        setIsToolRunning(true);
                        await callTool(selectedTool.name, params);
                      } finally {
                        setIsToolRunning(false);
                      }
                    }}
                    disabled={isToolRunning || !selectedTool}
                    className="flex-grow"
                  >
                    {isToolRunning ? (
                      <>
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        Running...
                      </>
                    ) : (
                      <>
                        <Send className="w-4 h-4 mr-2" />
                        Run Tool
                      </>
                    )}
                  </Button>
                </div>
                <ToolResults
                  toolResult={toolResult}
                  selectedTool={selectedTool}
                />
              </div>
            ) : (
              <Alert>
                <AlertDescription>
                  Select a tool from the list to view its details and run it
                </AlertDescription>
              </Alert>
            )}
          </div>
        </div>
      </div>
    </TabsContent>
  );
};

export default ToolsTab;