diff --git a/client/src/App.tsx b/client/src/App.tsx
index 12e9a7bd0..a81d0faef 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -124,9 +124,9 @@ const cloneToolParams = (
 };
 
 const filterReservedMetadata = (
-  metadata: Record<string, string>,
-): Record<string, string> => {
-  return Object.entries(metadata).reduce<Record<string, string>>(
+  metadata: Record<string, unknown>,
+): Record<string, unknown> => {
+  return Object.entries(metadata).reduce<Record<string, unknown>>(
     (acc, [key, value]) => {
       if (
         !isReservedMetaKey(key) &&
@@ -265,7 +265,7 @@ const App = () => {
     useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
 
   // Metadata state - persisted in localStorage
-  const [metadata, setMetadata] = useState<Record<string, string>>(() => {
+  const [metadata, setMetadata] = useState<Record<string, unknown>>(() => {
     const savedMetadata = localStorage.getItem("lastMetadata");
     if (savedMetadata) {
       try {
@@ -284,7 +284,7 @@ const App = () => {
     setAuthState((prev) => ({ ...prev, ...updates }));
   };
 
-  const handleMetadataChange = (newMetadata: Record<string, string>) => {
+  const handleMetadataChange = (newMetadata: Record<string, unknown>) => {
     const sanitizedMetadata = filterReservedMetadata(newMetadata);
     setMetadata(sanitizedMetadata);
     localStorage.setItem("lastMetadata", JSON.stringify(sanitizedMetadata));
diff --git a/client/src/components/MetadataTab.tsx b/client/src/components/MetadataTab.tsx
index beb26ac7a..82d1822d3 100644
--- a/client/src/components/MetadataTab.tsx
+++ b/client/src/components/MetadataTab.tsx
@@ -1,167 +1,157 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { TabsContent } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Trash2, Plus } from "lucide-react";
-import { cn } from "@/lib/utils";
-import {
-  META_NAME_RULES_MESSAGE,
-  META_PREFIX_RULES_MESSAGE,
-  RESERVED_NAMESPACE_MESSAGE,
-  hasValidMetaName,
-  hasValidMetaPrefix,
-  isReservedMetaKey,
-} from "@/utils/metaUtils";
-
-interface MetadataEntry {
-  key: string;
-  value: string;
-}
+import JsonEditor from "@/components/JsonEditor";
 
 interface MetadataTabProps {
-  metadata: Record<string, string>;
-  onMetadataChange: (metadata: Record<string, string>) => void;
+  metadata: Record<string, unknown>;
+  onMetadataChange: (metadata: Record<string, unknown>) => void;
 }
 
 const MetadataTab: React.FC<MetadataTabProps> = ({
   metadata,
   onMetadataChange,
 }) => {
-  const [entries, setEntries] = useState<MetadataEntry[]>(() => {
-    return Object.entries(metadata).map(([key, value]) => ({ key, value }));
-  });
+  const stringifyCompact = (
+    value: Record<string, unknown> | null | undefined,
+  ) => {
+    if (!value || Object.keys(value).length === 0) {
+      return "";
+    }
 
-  const addEntry = () => {
-    setEntries([...entries, { key: "", value: "" }]);
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return "";
+    }
   };
 
-  const removeEntry = (index: number) => {
-    const newEntries = entries.filter((_, i) => i !== index);
-    setEntries(newEntries);
-    updateMetadata(newEntries);
+  const stringifyPretty = (value: Record<string, unknown>) => {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return "";
+    }
   };
 
-  const updateEntry = (
-    index: number,
-    field: "key" | "value",
-    value: string,
-  ) => {
-    const newEntries = [...entries];
-    newEntries[index][field] = value;
-    setEntries(newEntries);
-    updateMetadata(newEntries);
+  const initialCompact = stringifyCompact(metadata);
+  const [jsonValue, setJsonValue] = useState<string>(() => {
+    if (!initialCompact) {
+      return "";
+    }
+
+    return stringifyPretty(metadata);
+  });
+
+  const [jsonError, setJsonError] = useState<string | null>(null);
+  const lastMetadataStringRef = useRef<string>(initialCompact);
+
+  useEffect(() => {
+    const compact = stringifyCompact(metadata);
+
+    if (compact === lastMetadataStringRef.current) {
+      return;
+    }
+
+    lastMetadataStringRef.current = compact;
+
+    if (!compact) {
+      setJsonValue("");
+      setJsonError(null);
+      return;
+    }
+
+    if (metadata) {
+      const pretty = stringifyPretty(metadata);
+      setJsonValue(pretty);
+      setJsonError(null);
+    }
+  }, [metadata]);
+
+  const handleJsonChange = (value: string) => {
+    setJsonValue(value);
+
+    if (!value.trim()) {
+      onMetadataChange({});
+      lastMetadataStringRef.current = "";
+      setJsonError(null);
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(value);
+
+      if (
+        parsed === null ||
+        Array.isArray(parsed) ||
+        typeof parsed !== "object"
+      ) {
+        setJsonError("Meta data must be a JSON object");
+        return;
+      }
+
+      onMetadataChange(parsed);
+      lastMetadataStringRef.current = JSON.stringify(parsed);
+      setJsonError(null);
+    } catch {
+      setJsonError("Invalid JSON format");
+    }
   };
 
-  const updateMetadata = (newEntries: MetadataEntry[]) => {
-    const metadataObject: Record<string, string> = {};
-    newEntries.forEach(({ key, value }) => {
-      const trimmedKey = key.trim();
+  const handlePrettyClick = () => {
+    if (!jsonValue.trim()) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(jsonValue);
+
       if (
-        trimmedKey &&
-        value.trim() &&
-        hasValidMetaPrefix(trimmedKey) &&
-        !isReservedMetaKey(trimmedKey) &&
-        hasValidMetaName(trimmedKey)
+        parsed === null ||
+        Array.isArray(parsed) ||
+        typeof parsed !== "object"
       ) {
-        metadataObject[trimmedKey] = value.trim();
+        setJsonError("Meta data must be a JSON object");
+        return;
       }
-    });
-    onMetadataChange(metadataObject);
+
+      const pretty = stringifyPretty(parsed);
+      setJsonValue(pretty);
+      onMetadataChange(parsed);
+      lastMetadataStringRef.current = JSON.stringify(parsed);
+      setJsonError(null);
+    } catch {
+      setJsonError("Invalid JSON format");
+    }
   };
 
   return (
     <TabsContent value="metadata">
       <div className="space-y-4">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-2">
           <div>
-            <h3 className="text-lg font-semibold">Metadata</h3>
+            <h3 className="text-lg font-semibold">Meta Data</h3>
             <p className="text-sm text-gray-600 dark:text-gray-400">
-              Key-value pairs that will be included in all MCP requests
+              Provide an object containing key-value pairs that will be included
+              in all MCP requests.
             </p>
           </div>
-          <Button onClick={addEntry} size="sm">
-            <Plus className="w-4 h-4 mr-2" />
-            Add Entry
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            onClick={handlePrettyClick}
+            className="flex-shrink-0"
+          >
+            Pretty
           </Button>
         </div>
 
-        <div className="space-y-3">
-          {entries.map((entry, index) => {
-            const trimmedKey = entry.key.trim();
-            const hasInvalidPrefix =
-              trimmedKey !== "" && !hasValidMetaPrefix(trimmedKey);
-            const isReservedKey =
-              trimmedKey !== "" && isReservedMetaKey(trimmedKey);
-            const hasInvalidName =
-              trimmedKey !== "" && !hasValidMetaName(trimmedKey);
-            const validationMessage = hasInvalidPrefix
-              ? META_PREFIX_RULES_MESSAGE
-              : isReservedKey
-                ? RESERVED_NAMESPACE_MESSAGE
-                : hasInvalidName
-                  ? META_NAME_RULES_MESSAGE
-                  : null;
-            return (
-              <div key={index} className="space-y-1">
-                <div className="flex items-center space-x-2">
-                  <div className="flex-1">
-                    <Label htmlFor={`key-${index}`} className="sr-only">
-                      Key
-                    </Label>
-                    <Input
-                      id={`key-${index}`}
-                      placeholder="Key"
-                      value={entry.key}
-                      onChange={(e) =>
-                        updateEntry(index, "key", e.target.value)
-                      }
-                      aria-invalid={Boolean(validationMessage)}
-                      className={cn(
-                        validationMessage &&
-                          "border-red-500 focus-visible:ring-red-500 focus-visible:ring-1",
-                      )}
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <Label htmlFor={`value-${index}`} className="sr-only">
-                      Value
-                    </Label>
-                    <Input
-                      id={`value-${index}`}
-                      placeholder="Value"
-                      value={entry.value}
-                      onChange={(e) =>
-                        updateEntry(index, "value", e.target.value)
-                      }
-                      disabled={Boolean(validationMessage)}
-                    />
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => removeEntry(index)}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
-                {validationMessage && (
-                  <p className="text-xs text-red-600 dark:text-red-400">
-                    {validationMessage}
-                  </p>
-                )}
-              </div>
-            );
-          })}
-        </div>
-
-        {entries.length === 0 && (
-          <div className="text-center py-8">
-            <p className="text-gray-500 dark:text-gray-400 mb-4">
-              No metadata entries. Click "Add Entry" to add key-value pairs.
-            </p>
-          </div>
-        )}
+        <JsonEditor
+          value={jsonValue}
+          onChange={handleJsonChange}
+          error={jsonError || undefined}
+        />
       </div>
     </TabsContent>
   );
diff --git a/client/src/components/__tests__/MetadataTab.test.tsx b/client/src/components/__tests__/MetadataTab.test.tsx
index f22e102ff..1d4a9342b 100644
--- a/client/src/components/__tests__/MetadataTab.test.tsx
+++ b/client/src/components/__tests__/MetadataTab.test.tsx
@@ -2,11 +2,32 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import MetadataTab from "../MetadataTab";
 import { Tabs } from "@/components/ui/tabs";
-import {
-  META_NAME_RULES_MESSAGE,
-  META_PREFIX_RULES_MESSAGE,
-  RESERVED_NAMESPACE_MESSAGE,
-} from "@/utils/metaUtils";
+
+jest.mock("react-simple-code-editor", () => {
+  return function MockCodeEditor({
+    value,
+    onValueChange: onValueChange,
+  }: {
+    value: string;
+    onValueChange: (value: string) => void;
+  }) {
+    return (
+      <textarea
+        data-testid="json-editor"
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+      />
+    );
+  };
+});
+
+jest.mock("prismjs", () => ({
+  highlight: (code: string) => code,
+  languages: { json: {} },
+}));
+
+jest.mock("prismjs/components/prism-json", () => {});
+jest.mock("prismjs/themes/prism.css", () => {});
 
 describe("MetadataTab", () => {
   const defaultProps = {
@@ -30,41 +51,25 @@ describe("MetadataTab", () => {
     it("should render the metadata tab with title and description", () => {
       renderMetadataTab();
 
-      expect(screen.getByText("Metadata")).toBeInTheDocument();
+      expect(screen.getByText("Meta Data")).toBeInTheDocument();
       expect(
         screen.getByText(
-          "Key-value pairs that will be included in all MCP requests",
+          "Provide an object containing key-value pairs that will be included in all MCP requests.",
         ),
       ).toBeInTheDocument();
     });
 
-    it("should render Add Entry button", () => {
+    it("should render Pretty button", () => {
       renderMetadataTab();
 
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      expect(addButton).toBeInTheDocument();
+      const prettyButton = screen.getByRole("button", { name: /pretty/i });
+      expect(prettyButton).toBeInTheDocument();
     });
 
-    it("should show empty state message when no entries exist", () => {
+    it("should render JSON editor", () => {
       renderMetadataTab();
 
-      expect(
-        screen.getByText(
-          'No metadata entries. Click "Add Entry" to add key-value pairs.',
-        ),
-      ).toBeInTheDocument();
-    });
-
-    it("should not show empty state message when entries exist", () => {
-      renderMetadataTab({
-        metadata: { key1: "value1" },
-      });
-
-      expect(
-        screen.queryByText(
-          'No metadata entries. Click "Add Entry" to add key-value pairs.',
-        ),
-      ).not.toBeInTheDocument();
+      expect(screen.getByTestId("json-editor")).toBeInTheDocument();
     });
   });
 
@@ -77,517 +82,174 @@ describe("MetadataTab", () => {
 
       renderMetadataTab({ metadata: initialMetadata });
 
-      expect(screen.getByDisplayValue("API_KEY")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("test-key")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("VERSION")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("1.0.0")).toBeInTheDocument();
-    });
-
-    it("should render multiple entries in correct order", () => {
-      const initialMetadata = {
-        FIRST: "first-value",
-        SECOND: "second-value",
-        THIRD: "third-value",
-      };
-
-      renderMetadataTab({ metadata: initialMetadata });
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      expect(keyInputs).toHaveLength(3);
-      expect(valueInputs).toHaveLength(3);
-
-      // Check that entries are rendered in the order they appear in the object
-      const entries = Object.entries(initialMetadata);
-      entries.forEach(([key, value], index) => {
-        expect(keyInputs[index]).toHaveValue(key);
-        expect(valueInputs[index]).toHaveValue(value);
-      });
-    });
-  });
-
-  describe("Adding Entries", () => {
-    it("should add a new empty entry when Add Entry button is clicked", () => {
-      renderMetadataTab();
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      expect(keyInputs).toHaveLength(1);
-      expect(valueInputs).toHaveLength(1);
-      expect(keyInputs[0]).toHaveValue("");
-      expect(valueInputs[0]).toHaveValue("");
+      const editor = screen.getByTestId("json-editor") as HTMLTextAreaElement;
+      expect(editor.value).toContain("API_KEY");
+      expect(editor.value).toContain("test-key");
+      expect(editor.value).toContain("VERSION");
+      expect(editor.value).toContain("1.0.0");
     });
 
-    it("should add multiple entries when Add Entry button is clicked multiple times", () => {
-      renderMetadataTab();
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      expect(keyInputs).toHaveLength(3);
-      expect(valueInputs).toHaveLength(3);
-    });
-
-    it("should hide empty state message after adding first entry", () => {
-      renderMetadataTab();
-
-      expect(
-        screen.getByText(
-          'No metadata entries. Click "Add Entry" to add key-value pairs.',
-        ),
-      ).toBeInTheDocument();
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      expect(
-        screen.queryByText(
-          'No metadata entries. Click "Add Entry" to add key-value pairs.',
-        ),
-      ).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Removing Entries", () => {
-    it("should render remove button for each entry", () => {
+    it("should pretty print metadata by default", () => {
       renderMetadataTab({
-        metadata: { key1: "value1", key2: "value2" },
+        metadata: { firstKey: "value" },
       });
 
-      const removeButtons = screen.getAllByRole("button", { name: "" }); // Trash icon buttons have no text
-      expect(removeButtons).toHaveLength(2);
-    });
-
-    it("should remove entry when remove button is clicked", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { key1: "value1", key2: "value2" },
-        onMetadataChange,
-      });
-
-      const removeButtons = screen.getAllByRole("button", { name: "" });
-      fireEvent.click(removeButtons[0]);
-
-      expect(onMetadataChange).toHaveBeenCalledWith({ key2: "value2" });
-    });
-
-    it("should remove correct entry when multiple entries exist", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: {
-          FIRST: "first-value",
-          SECOND: "second-value",
-          THIRD: "third-value",
-        },
-        onMetadataChange,
-      });
-
-      const removeButtons = screen.getAllByRole("button", { name: "" });
-      fireEvent.click(removeButtons[1]); // Remove second entry
-
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        FIRST: "first-value",
-        THIRD: "third-value",
-      });
-    });
-
-    it("should show empty state message after removing all entries", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { key1: "value1" },
-        onMetadataChange,
-      });
-
-      const removeButton = screen.getByRole("button", { name: "" });
-      fireEvent.click(removeButton);
-
-      expect(onMetadataChange).toHaveBeenCalledWith({});
+      const editor = screen.getByTestId("json-editor") as HTMLTextAreaElement;
+      expect(editor.value).toBe(`{
+  "firstKey": "value"
+}`);
     });
   });
 
-  describe("Editing Entries", () => {
-    it("should update key when key input is changed", () => {
+  describe("Editing JSON", () => {
+    it("should call onMetadataChange when valid JSON is entered", () => {
       const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { oldKey: "value1" },
-        onMetadataChange,
-      });
-
-      const keyInput = screen.getByDisplayValue("oldKey");
-      fireEvent.change(keyInput, { target: { value: "newKey" } });
-
-      expect(onMetadataChange).toHaveBeenCalledWith({ newKey: "value1" });
-    });
+      renderMetadataTab({ onMetadataChange });
 
-    it("should update value when value input is changed", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { key1: "oldValue" },
-        onMetadataChange,
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: '{"key":"value"}' },
       });
 
-      const valueInput = screen.getByDisplayValue("oldValue");
-      fireEvent.change(valueInput, { target: { value: "newValue" } });
-
-      expect(onMetadataChange).toHaveBeenCalledWith({ key1: "newValue" });
+      expect(onMetadataChange).toHaveBeenCalledWith({ key: "value" });
     });
 
-    it("should handle editing multiple entries independently", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: {
-          key1: "value1",
-          key2: "value2",
-        },
-        onMetadataChange,
-      });
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
+    it("should show error for invalid JSON", () => {
+      renderMetadataTab();
 
-      // Edit first entry key
-      fireEvent.change(keyInputs[0], { target: { value: "newKey1" } });
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        newKey1: "value1",
-        key2: "value2",
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: '{"key": }' },
       });
 
-      // Clear mock to test second edit independently
-      onMetadataChange.mockClear();
-
-      // Edit second entry value
-      fireEvent.change(valueInputs[1], { target: { value: "newValue2" } });
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        newKey1: "value1",
-        key2: "newValue2",
-      });
+      expect(screen.getByText("Invalid JSON format")).toBeInTheDocument();
     });
-  });
-
-  describe("Reserved Metadata Keys", () => {
-    test.each`
-      description                             | value                             | message                       | shouldDisableValue
-      ${"reserved keys with prefix"}          | ${"modelcontextprotocol.io/flip"} | ${RESERVED_NAMESPACE_MESSAGE} | ${true}
-      ${"reserved root without slash"}        | ${"modelcontextprotocol.io"}      | ${RESERVED_NAMESPACE_MESSAGE} | ${true}
-      ${"nested modelcontextprotocol domain"} | ${"api.modelcontextprotocol.org"} | ${RESERVED_NAMESPACE_MESSAGE} | ${false}
-      ${"nested mcp domain"}                  | ${"tools.mcp.com/path"}           | ${RESERVED_NAMESPACE_MESSAGE} | ${false}
-      ${"invalid name segments"}              | ${"custom/bad-"}                  | ${META_NAME_RULES_MESSAGE}    | ${false}
-      ${"invalid prefix labels"}              | ${"1invalid-prefix/value"}        | ${META_PREFIX_RULES_MESSAGE}  | ${false}
-    `(
-      "should display an error for $description",
-      ({ value, message, shouldDisableValue }) => {
-        const onMetadataChange = jest.fn();
-        renderMetadataTab({ onMetadataChange });
-
-        const addButton = screen.getByRole("button", { name: /add entry/i });
-        fireEvent.click(addButton);
-
-        const keyInput = screen.getByPlaceholderText("Key");
-        fireEvent.change(keyInput, { target: { value } });
-
-        const valueInput = screen.getByPlaceholderText("Value");
-        if (shouldDisableValue) {
-          expect(valueInput).toBeDisabled();
-        }
-
-        expect(screen.getByText(message)).toBeInTheDocument();
-        expect(onMetadataChange).toHaveBeenLastCalledWith({});
-      },
-    );
-  });
 
-  describe("Data Validation and Trimming", () => {
-    it("should trim whitespace from keys and values", () => {
+    it("should not call onMetadataChange when JSON is invalid", () => {
       const onMetadataChange = jest.fn();
       renderMetadataTab({ onMetadataChange });
 
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInput = screen.getByPlaceholderText("Key");
-      const valueInput = screen.getByPlaceholderText("Value");
-
-      fireEvent.change(keyInput, { target: { value: "  trimmedKey  " } });
-      fireEvent.change(valueInput, { target: { value: "  trimmedValue  " } });
-
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        trimmedKey: "trimmedValue",
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: '{"key": }' },
       });
-    });
-
-    it("should exclude entries with empty keys or values after trimming", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({ onMetadataChange });
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      // First entry: valid key and value
-      fireEvent.change(keyInputs[0], { target: { value: "validKey" } });
-      fireEvent.change(valueInputs[0], { target: { value: "validValue" } });
-
-      // Second entry: empty key (should be excluded)
-      fireEvent.change(keyInputs[1], { target: { value: "" } });
-      fireEvent.change(valueInputs[1], { target: { value: "someValue" } });
 
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        validKey: "validValue",
-      });
+      expect(onMetadataChange).not.toHaveBeenCalled();
     });
 
-    it("should exclude entries with whitespace-only keys or values", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({ onMetadataChange });
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      // First entry: valid key and value
-      fireEvent.change(keyInputs[0], { target: { value: "validKey" } });
-      fireEvent.change(valueInputs[0], { target: { value: "validValue" } });
-
-      // Second entry: whitespace-only key (should be excluded)
-      fireEvent.change(keyInputs[1], { target: { value: "   " } });
-      fireEvent.change(valueInputs[1], { target: { value: "someValue" } });
+    it("should clear error when JSON becomes valid", () => {
+      renderMetadataTab();
 
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        validKey: "validValue",
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: '{"key": }' },
       });
-    });
-
-    it("should handle mixed valid and invalid entries", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({ onMetadataChange });
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      // First entry: valid
-      fireEvent.change(keyInputs[0], { target: { value: "key1" } });
-      fireEvent.change(valueInputs[0], { target: { value: "value1" } });
-
-      // Second entry: empty key (invalid)
-      fireEvent.change(keyInputs[1], { target: { value: "" } });
-      fireEvent.change(valueInputs[1], { target: { value: "value2" } });
 
-      // Third entry: valid
-      fireEvent.change(keyInputs[2], { target: { value: "key3" } });
-      fireEvent.change(valueInputs[2], { target: { value: "value3" } });
+      expect(screen.getByText("Invalid JSON format")).toBeInTheDocument();
 
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        key1: "value1",
-        key3: "value3",
+      fireEvent.change(editor, {
+        target: { value: '{"key": "value"}' },
       });
+
+      expect(screen.queryByText("Invalid JSON format")).not.toBeInTheDocument();
     });
-  });
 
-  describe("Input Accessibility", () => {
-    it("should have proper labels for screen readers", () => {
+    it("should clear metadata when input is emptied", () => {
+      const onMetadataChange = jest.fn();
       renderMetadataTab({
-        metadata: { key1: "value1" },
+        metadata: { key: "value" },
+        onMetadataChange,
       });
 
-      const keyLabel = screen.getByLabelText("Key", { selector: "input" });
-      const valueLabel = screen.getByLabelText("Value", { selector: "input" });
-
-      expect(keyLabel).toBeInTheDocument();
-      expect(valueLabel).toBeInTheDocument();
-    });
+      const editor = screen.getByTestId("json-editor");
 
-    it("should have unique IDs for each input pair", () => {
-      renderMetadataTab({
-        metadata: {
-          key1: "value1",
-          key2: "value2",
-        },
+      fireEvent.change(editor, {
+        target: { value: "" },
       });
 
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      expect(keyInputs[0]).toHaveAttribute("id", "key-0");
-      expect(keyInputs[1]).toHaveAttribute("id", "key-1");
-      expect(valueInputs[0]).toHaveAttribute("id", "value-0");
-      expect(valueInputs[1]).toHaveAttribute("id", "value-1");
+      expect(onMetadataChange).toHaveBeenCalledWith({});
     });
 
-    it("should have proper placeholder text", () => {
+    it("should display object validation error when JSON is not an object", () => {
       renderMetadataTab();
 
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInput = screen.getByPlaceholderText("Key");
-      const valueInput = screen.getByPlaceholderText("Value");
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: "[]" },
+      });
 
-      expect(keyInput).toHaveAttribute("placeholder", "Key");
-      expect(valueInput).toHaveAttribute("placeholder", "Value");
+      expect(
+        screen.getByText("Meta data must be a JSON object"),
+      ).toBeInTheDocument();
     });
   });
 
-  describe("Edge Cases", () => {
-    it("should flag invalid names that contain unsupported characters", () => {
+  describe("Pretty Button", () => {
+    it("should format the JSON when clicked", () => {
       const onMetadataChange = jest.fn();
       renderMetadataTab({ onMetadataChange });
 
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInput = screen.getByPlaceholderText("Key");
-      const valueInput = screen.getByPlaceholderText("Value");
+      const editor = screen.getByTestId("json-editor") as HTMLTextAreaElement;
 
-      fireEvent.change(keyInput, {
-        target: { value: "key-with-special@chars!" },
-      });
-      fireEvent.change(valueInput, {
-        target: { value: "value with spaces & symbols $%^" },
+      fireEvent.change(editor, {
+        target: { value: '{"key":"value"}' },
       });
 
-      expect(screen.getByText(META_NAME_RULES_MESSAGE)).toBeInTheDocument();
-      expect(onMetadataChange).toHaveBeenLastCalledWith({});
-    });
+      const prettyButton = screen.getByRole("button", { name: /pretty/i });
 
-    it("should reject unicode names that do not start with an alphanumeric character", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({ onMetadataChange });
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInput = screen.getByPlaceholderText("Key");
-      const valueInput = screen.getByPlaceholderText("Value");
+      fireEvent.click(prettyButton);
 
-      fireEvent.change(keyInput, { target: { value: "🔑_key" } });
-      fireEvent.change(valueInput, { target: { value: "值_value_🎯" } });
-
-      expect(screen.getByText(META_NAME_RULES_MESSAGE)).toBeInTheDocument();
-      expect(onMetadataChange).toHaveBeenLastCalledWith({});
+      expect(editor.value).toBe(`{
+  "key": "value"
+}`);
+      expect(onMetadataChange).toHaveBeenLastCalledWith({ key: "value" });
     });
 
-    it("should handle very long keys and values", () => {
+    it("should not do anything when editor is empty", () => {
       const onMetadataChange = jest.fn();
       renderMetadataTab({ onMetadataChange });
 
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-
-      const keyInput = screen.getByPlaceholderText("Key");
-      const valueInput = screen.getByPlaceholderText("Value");
-
-      const longKey = "A".repeat(100);
-      const longValue = "B".repeat(500);
+      const editor = screen.getByTestId("json-editor") as HTMLTextAreaElement;
+      const prettyButton = screen.getByRole("button", { name: /pretty/i });
 
-      fireEvent.change(keyInput, { target: { value: longKey } });
-      fireEvent.change(valueInput, { target: { value: longValue } });
-
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        [longKey]: longValue,
-      });
-    });
-
-    it("should handle duplicate keys by keeping the last one", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({ onMetadataChange });
-
-      const addButton = screen.getByRole("button", { name: /add entry/i });
-      fireEvent.click(addButton);
-      fireEvent.click(addButton);
-
-      const keyInputs = screen.getAllByPlaceholderText("Key");
-      const valueInputs = screen.getAllByPlaceholderText("Value");
-
-      // Set same key for both entries
-      fireEvent.change(keyInputs[0], { target: { value: "duplicateKey" } });
-      fireEvent.change(valueInputs[0], { target: { value: "firstValue" } });
-
-      fireEvent.change(keyInputs[1], { target: { value: "duplicateKey" } });
-      fireEvent.change(valueInputs[1], { target: { value: "secondValue" } });
-
-      // The second value should overwrite the first
-      expect(onMetadataChange).toHaveBeenCalledWith({
-        duplicateKey: "secondValue",
-      });
-    });
-  });
-
-  describe("Integration with Parent Component", () => {
-    it("should not call onMetadataChange when component mounts with existing data", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { key1: "value1" },
-        onMetadataChange,
-      });
+      fireEvent.click(prettyButton);
 
+      expect(editor.value).toBe("");
       expect(onMetadataChange).not.toHaveBeenCalled();
     });
 
-    it("should call onMetadataChange only when user makes changes", () => {
-      const onMetadataChange = jest.fn();
-      renderMetadataTab({
-        metadata: { key1: "value1" },
-        onMetadataChange,
+    it("should show error when JSON cannot be parsed on pretty click", () => {
+      renderMetadataTab();
+
+      const editor = screen.getByTestId("json-editor");
+      fireEvent.change(editor, {
+        target: { value: '{"key": }' },
       });
 
-      // Should not be called on mount
-      expect(onMetadataChange).not.toHaveBeenCalled();
+      const prettyButton = screen.getByRole("button", { name: /pretty/i });
 
-      // Should be called when user changes value
-      const valueInput = screen.getByDisplayValue("value1");
-      fireEvent.change(valueInput, { target: { value: "newValue" } });
+      fireEvent.click(prettyButton);
 
-      expect(onMetadataChange).toHaveBeenCalledTimes(1);
-      expect(onMetadataChange).toHaveBeenCalledWith({ key1: "newValue" });
+      expect(screen.getByText("Invalid JSON format")).toBeInTheDocument();
     });
+  });
 
-    it("should maintain internal state when props change (component doesn't sync with prop changes)", () => {
-      const { rerender } = renderMetadataTab({
-        metadata: { key1: "value1" },
-      });
+  describe("Props Synchronization", () => {
+    it("should update editor contents when props change", () => {
+      const { rerender } = renderMetadataTab({});
 
-      expect(screen.getByDisplayValue("key1")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("value1")).toBeInTheDocument();
+      expect(screen.getByTestId("json-editor")).toHaveValue("");
 
-      // Rerender with different props - component should maintain its internal state
-      // This is the intended behavior since useState initializer only runs once
       rerender(
         <Tabs defaultValue="metadata">
-          <MetadataTab
-            metadata={{ key2: "value2", key3: "value3" }}
-            onMetadataChange={jest.fn()}
-          />
+          <MetadataTab {...defaultProps} metadata={{ nextKey: "nextValue" }} />
         </Tabs>,
       );
 
-      // The component should still show the original values since it maintains internal state
-      expect(screen.getByDisplayValue("key1")).toBeInTheDocument();
-      expect(screen.getByDisplayValue("value1")).toBeInTheDocument();
-      // The new prop values should not be displayed
-      expect(screen.queryByDisplayValue("key2")).not.toBeInTheDocument();
-      expect(screen.queryByDisplayValue("value2")).not.toBeInTheDocument();
+      const editor = screen.getByTestId("json-editor") as HTMLTextAreaElement;
+      expect(editor.value).toBe(`{
+  "nextKey": "nextValue"
+}`);
     });
   });
 });
diff --git a/client/src/lib/hooks/useConnection.ts b/client/src/lib/hooks/useConnection.ts
index e14d1037f..316b50569 100644
--- a/client/src/lib/hooks/useConnection.ts
+++ b/client/src/lib/hooks/useConnection.ts
@@ -100,7 +100,7 @@ interface UseConnectionOptions {
   getRoots?: () => any[];
   defaultLoggingLevel?: LoggingLevel;
   serverImplementation?: Implementation;
-  metadata?: Record<string, string>;
+  metadata?: Record<string, unknown>;
 }
 
 export function useConnection({