From deb8aacca4212ef191a0438a4a3303f8b02d12d4 Mon Sep 17 00:00:00 2001
From: dswbx <dennis.senn@gmx.ch>
Date: Fri, 15 Aug 2025 10:12:09 +0200
Subject: [PATCH] added mcp ui as tool

---
 app/src/data/api/DataController.ts            |   6 +-
 app/src/modules/mcp/$object.ts                |   4 +
 app/src/modules/mcp/$record.ts                |   4 +
 app/src/modules/server/AdminController.tsx    |   2 +-
 app/src/modules/server/SystemController.ts    |   6 +-
 app/src/ui/layouts/AppShell/AppShell.tsx      |  89 ++++---
 app/src/ui/layouts/AppShell/Header.tsx        |  17 +-
 app/src/ui/main.css                           |   9 +-
 app/src/ui/routes/index.tsx                   |   6 +
 app/src/ui/routes/media/_media.root.tsx       |   2 -
 app/src/ui/routes/test/index.tsx              |   2 -
 app/src/ui/routes/test/tests/mcp/tools.tsx    | 171 --------------
 app/src/ui/routes/tools/index.tsx             |  16 ++
 .../routes/tools/mcp/components/mcp-icon.tsx  |  15 ++
 .../mcp/mcp-test.tsx => tools/mcp/mcp.tsx}    |  27 ++-
 .../routes/{test/tests => tools}/mcp/state.ts |   9 +
 app/src/ui/routes/tools/mcp/tools.tsx         | 217 ++++++++++++++++++
 .../routes/{test/tests => tools}/mcp/utils.ts |   0
 app/src/ui/store/appshell.ts                  |  64 +++++-
 19 files changed, 445 insertions(+), 221 deletions(-)
 delete mode 100644 app/src/ui/routes/test/tests/mcp/tools.tsx
 create mode 100644 app/src/ui/routes/tools/index.tsx
 create mode 100644 app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
 rename app/src/ui/routes/{test/tests/mcp/mcp-test.tsx => tools/mcp/mcp.tsx} (58%)
 rename app/src/ui/routes/{test/tests => tools}/mcp/state.ts (56%)
 create mode 100644 app/src/ui/routes/tools/mcp/tools.tsx
 rename app/src/ui/routes/{test/tests => tools}/mcp/utils.ts (100%)

diff --git a/app/src/data/api/DataController.ts b/app/src/data/api/DataController.ts
index d7cbc24..ba79df7 100644
--- a/app/src/data/api/DataController.ts
+++ b/app/src/data/api/DataController.ts
@@ -62,7 +62,11 @@ export class DataController extends Controller {
       hono.get(
          "/sync",
          permission(DataPermissions.databaseSync),
-         mcpTool("data_sync"),
+         mcpTool("data_sync", {
+            annotations: {
+               destructiveHint: true,
+            },
+         }),
          describeRoute({
             summary: "Sync database schema",
             tags: ["data"],
diff --git a/app/src/modules/mcp/$object.ts b/app/src/modules/mcp/$object.ts
index f52c723..a57257b 100644
--- a/app/src/modules/mcp/$object.ts
+++ b/app/src/modules/mcp/$object.ts
@@ -53,6 +53,10 @@ export class ObjectToolSchema<
                   })
                   .optional(),
             }),
+            annotations: {
+               readOnlyHint: true,
+               destructiveHint: false,
+            },
          },
          async (params, ctx: AppToolHandlerCtx) => {
             const configs = ctx.context.app.toJSON(params.secrets);
diff --git a/app/src/modules/mcp/$record.ts b/app/src/modules/mcp/$record.ts
index cbc1856..a10054a 100644
--- a/app/src/modules/mcp/$record.ts
+++ b/app/src/modules/mcp/$record.ts
@@ -69,6 +69,10 @@ export class RecordToolSchema<
                   })
                   .optional(),
             }),
+            annotations: {
+               readOnlyHint: true,
+               destructiveHint: false,
+            },
          },
          async (params, ctx: AppToolHandlerCtx) => {
             const configs = ctx.context.app.toJSON(params.secrets);
diff --git a/app/src/modules/server/AdminController.tsx b/app/src/modules/server/AdminController.tsx
index d714098..d15eefe 100644
--- a/app/src/modules/server/AdminController.tsx
+++ b/app/src/modules/server/AdminController.tsx
@@ -91,7 +91,7 @@ export class AdminController extends Controller {
          logout: "/api/auth/logout",
       };
 
-      const paths = ["/", "/data/*", "/auth/*", "/media/*", "/flows/*", "/settings/*"];
+      const paths = ["/", "/data/*", "/auth/*", "/media/*", "/flows/*", "/settings/*", "/tools/*"];
       if (isDebug()) {
          paths.push("/test/*");
       }
diff --git a/app/src/modules/server/SystemController.ts b/app/src/modules/server/SystemController.ts
index 7660232..15914ae 100644
--- a/app/src/modules/server/SystemController.ts
+++ b/app/src/modules/server/SystemController.ts
@@ -131,7 +131,11 @@ export class SystemController extends Controller {
             summary: "Get the config for a module",
             tags: ["system"],
          }),
-         mcpTool("system_config"), // @todo: ":module" gets not removed
+         mcpTool("system_config", {
+            annotations: {
+               readOnlyHint: true,
+            },
+         }), // @todo: ":module" gets not removed
          jsc("param", s.object({ module: s.string({ enum: MODULE_NAMES }).optional() })),
          jsc("query", s.object({ secrets: s.boolean().optional() })),
          async (c) => {
diff --git a/app/src/ui/layouts/AppShell/AppShell.tsx b/app/src/ui/layouts/AppShell/AppShell.tsx
index 9018e29..a161356 100644
--- a/app/src/ui/layouts/AppShell/AppShell.tsx
+++ b/app/src/ui/layouts/AppShell/AppShell.tsx
@@ -19,15 +19,9 @@ import { appShellStore } from "ui/store";
 import { useLocation } from "wouter";
 
 export function Root({ children }: { children: React.ReactNode }) {
-   const sidebarWidth = appShellStore((store) => store.sidebarWidth);
    return (
       <AppShellProvider>
-         <div
-            id="app-shell"
-            data-shell="root"
-            className="flex flex-1 flex-col select-none h-dvh"
-            style={{ "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties}
-         >
+         <div id="app-shell" data-shell="root" className="flex flex-1 flex-col select-none h-dvh">
             {children}
          </div>
       </AppShellProvider>
@@ -97,10 +91,24 @@ export function Main({ children }) {
    );
 }
 
-export function Sidebar({ children }) {
-   const open = appShellStore((store) => store.sidebarOpen);
-   const close = appShellStore((store) => store.closeSidebar);
+export function Sidebar({
+   children,
+   name = "default",
+   handle = "right",
+   minWidth,
+   maxWidth,
+}: {
+   children: React.ReactNode;
+   name?: string;
+   handle?: "right" | "left";
+   minWidth?: number;
+   maxWidth?: number;
+}) {
+   const open = appShellStore((store) => store.sidebars[name]?.open);
+   const close = appShellStore((store) => store.closeSidebar(name));
+   const width = appShellStore((store) => store.sidebars[name]?.width ?? 350);
    const ref = useClickOutside(close, ["mouseup", "touchend"]); //, [document.getElementById("header")]);
+   const sidebarRef = useRef<HTMLDivElement>(null!);
    const [location] = useLocation();
 
    const closeHandler = () => {
@@ -115,16 +123,35 @@ export function Sidebar({ children }) {
 
    return (
       <>
+         {handle === "left" && (
+            <SidebarResize
+               name={name}
+               handle={handle}
+               sidebarRef={sidebarRef}
+               minWidth={minWidth}
+               maxWidth={maxWidth}
+            />
+         )}
          <aside
             data-shell="sidebar"
-            className="hidden md:flex flex-col basis-[var(--sidebar-width)] flex-shrink-0 flex-grow-0 h-full bg-muted/10"
+            ref={sidebarRef}
+            className="hidden md:flex flex-col flex-shrink-0 flex-grow-0 h-full bg-muted/10"
+            style={{ width }}
          >
             {children}
          </aside>
-         <SidebarResize />
+         {handle === "right" && (
+            <SidebarResize
+               name={name}
+               handle={handle}
+               sidebarRef={sidebarRef}
+               minWidth={minWidth}
+               maxWidth={maxWidth}
+            />
+         )}
          <div
             data-open={open}
-            className="absolute w-full md:hidden data-[open=true]:translate-x-0 translate-x-[-100%] transition-transform z-10 backdrop-blur-sm"
+            className="absolute w-full md:hidden data-[open=true]:translate-x-0 translate-x-[-100%] transition-transform z-10 backdrop-blur-sm max-w-[90%]"
          >
             <aside
                ref={ref}
@@ -138,30 +165,36 @@ export function Sidebar({ children }) {
    );
 }
 
-const SidebarResize = () => {
-   const setSidebarWidth = appShellStore((store) => store.setSidebarWidth);
+const SidebarResize = ({
+   name = "default",
+   handle = "right",
+   sidebarRef,
+   minWidth = 250,
+   maxWidth = window.innerWidth * 0.5,
+}: {
+   name?: string;
+   handle?: "right" | "left";
+   sidebarRef: React.RefObject<HTMLDivElement>;
+   minWidth?: number;
+   maxWidth?: number;
+}) => {
+   const setSidebarWidth = appShellStore((store) => store.setSidebarWidth(name));
    const [isResizing, setIsResizing] = useState(false);
-   const [startX, setStartX] = useState(0);
-   const [startWidth, setStartWidth] = useState(0);
+   const [start, setStart] = useState(0);
+   const [startWidth, setStartWidth] = useState(sidebarRef.current?.offsetWidth ?? 0);
 
    const handleMouseDown = (e: React.MouseEvent) => {
       e.preventDefault();
       setIsResizing(true);
-      setStartX(e.clientX);
-      setStartWidth(
-         Number.parseInt(
-            getComputedStyle(document.getElementById("app-shell")!)
-               .getPropertyValue("--sidebar-width")
-               .replace("px", ""),
-         ),
-      );
+      setStart(e.clientX);
+      setStartWidth(sidebarRef.current?.offsetWidth ?? 0);
    };
 
    const handleMouseMove = (e: MouseEvent) => {
       if (!isResizing) return;
 
-      const diff = e.clientX - startX;
-      const newWidth = clampNumber(startWidth + diff, 250, window.innerWidth * 0.5);
+      const diff = handle === "right" ? e.clientX - start : start - e.clientX;
+      const newWidth = clampNumber(startWidth + diff, minWidth, maxWidth);
       setSidebarWidth(newWidth);
    };
 
@@ -179,7 +212,7 @@ const SidebarResize = () => {
          window.removeEventListener("mousemove", handleMouseMove);
          window.removeEventListener("mouseup", handleMouseUp);
       };
-   }, [isResizing, startX, startWidth]);
+   }, [isResizing, start, startWidth, minWidth, maxWidth]);
 
    return (
       <div
diff --git a/app/src/ui/layouts/AppShell/Header.tsx b/app/src/ui/layouts/AppShell/Header.tsx
index 629d537..7e6036f 100644
--- a/app/src/ui/layouts/AppShell/Header.tsx
+++ b/app/src/ui/layouts/AppShell/Header.tsx
@@ -25,6 +25,7 @@ import { NavLink } from "./AppShell";
 import { autoFormatString } from "core/utils";
 import { appShellStore } from "ui/store";
 import { getVersion } from "core/env";
+import { McpIcon } from "ui/routes/tools/mcp/components/mcp-icon";
 
 export function HeaderNavigation() {
    const [location, navigate] = useLocation();
@@ -105,9 +106,9 @@ export function HeaderNavigation() {
    );
 }
 
-function SidebarToggler() {
-   const toggle = appShellStore((store) => store.toggleSidebar);
-   const open = appShellStore((store) => store.sidebarOpen);
+function SidebarToggler({ name = "default" }: { name?: string }) {
+   const toggle = appShellStore((store) => store.toggleSidebar(name));
+   const open = appShellStore((store) => store.sidebars[name]?.open);
    return <IconButton id="toggle-sidebar" size="lg" Icon={open ? TbX : TbMenu2} onClick={toggle} />;
 }
 
@@ -132,7 +133,7 @@ export function Header({ hasSidebar = true }) {
          <HeaderNavigation />
          <div className="flex flex-grow" />
          <div className="flex md:hidden flex-row items-center pr-2 gap-2">
-            <SidebarToggler />
+            <SidebarToggler name="default" />
             <UserMenu />
          </div>
          <div className="hidden md:flex flex-row items-center px-4 gap-2">
@@ -172,6 +173,14 @@ function UserMenu() {
       },
    ];
 
+   if (config.server.mcp.enabled) {
+      items.push({
+         label: "MCP",
+         onClick: () => navigate("/tools/mcp"),
+         icon: McpIcon,
+      });
+   }
+
    if (config.auth.enabled) {
       if (!auth.user) {
          items.push({ label: "Login", onClick: handleLogin, icon: IconUser });
diff --git a/app/src/ui/main.css b/app/src/ui/main.css
index 280e49d..89511a9 100644
--- a/app/src/ui/main.css
+++ b/app/src/ui/main.css
@@ -18,7 +18,7 @@
    --color-success-foreground: var(--color-green-800);
    --color-info: var(--color-blue-100);
    --color-info-foreground: var(--color-blue-800);
-   
+
    --color-resize: var(--color-blue-300);
 
    @mixin light {
@@ -115,3 +115,10 @@ body,
       @apply bg-primary/25;
    }
 }
+
+@utility debug {
+   @apply border-red-500 border;
+}
+@utility debug-blue {
+   @apply border-blue-500 border;
+}
diff --git a/app/src/ui/routes/index.tsx b/app/src/ui/routes/index.tsx
index 3cf7e7b..f260485 100644
--- a/app/src/ui/routes/index.tsx
+++ b/app/src/ui/routes/index.tsx
@@ -12,6 +12,7 @@ import { FlashMessage } from "ui/modules/server/FlashMessage";
 import { AuthRegister } from "ui/routes/auth/auth.register";
 import { BkndModalsProvider } from "ui/modals";
 import { useBkndWindowContext } from "ui/client";
+import ToolsRoutes from "./tools";
 
 // @ts-ignore
 const TestRoutes = lazy(() => import("./test"));
@@ -69,6 +70,11 @@ export function Routes({
                                     <SettingsRoutes />
                                  </Suspense>
                               </Route>
+                              <Route path="/tools" nest>
+                                 <Suspense fallback={null}>
+                                    <ToolsRoutes />
+                                 </Suspense>
+                              </Route>
 
                               <Route path="*" component={NotFound} />
                            </Switch>
diff --git a/app/src/ui/routes/media/_media.root.tsx b/app/src/ui/routes/media/_media.root.tsx
index 971df64..d54bfc6 100644
--- a/app/src/ui/routes/media/_media.root.tsx
+++ b/app/src/ui/routes/media/_media.root.tsx
@@ -1,10 +1,8 @@
-import { IconAlertHexagon } from "@tabler/icons-react";
 import { TbSettings } from "react-icons/tb";
 import { useBknd } from "ui/client/BkndProvider";
 import { IconButton } from "ui/components/buttons/IconButton";
 import { Icon } from "ui/components/display/Icon";
 import { Link } from "ui/components/wouter/Link";
-import { Media } from "ui/elements";
 import { useBrowserTitle } from "ui/hooks/use-browser-title";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
 
diff --git a/app/src/ui/routes/test/index.tsx b/app/src/ui/routes/test/index.tsx
index bdc44f2..71bb87f 100644
--- a/app/src/ui/routes/test/index.tsx
+++ b/app/src/ui/routes/test/index.tsx
@@ -26,11 +26,9 @@ import SchemaTest from "./tests/schema-test";
 import SortableTest from "./tests/sortable-test";
 import { SqlAiTest } from "./tests/sql-ai-test";
 import Themes from "./tests/themes";
-import MCPTest from "./tests/mcp/mcp-test";
 import ErrorBoundary from "ui/components/display/ErrorBoundary";
 
 const tests = {
-   MCPTest,
    DropdownTest,
    Themes,
    ModalTest,
diff --git a/app/src/ui/routes/test/tests/mcp/tools.tsx b/app/src/ui/routes/test/tests/mcp/tools.tsx
deleted file mode 100644
index 67d528a..0000000
--- a/app/src/ui/routes/test/tests/mcp/tools.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { getClient, getTemplate } from "./utils";
-import { useMcpStore } from "./state";
-import { AppShell } from "ui/layouts/AppShell";
-import { TbRefresh } from "react-icons/tb";
-import { IconButton } from "ui/components/buttons/IconButton";
-import { JsonViewer, JsonViewerTabs, type JsonViewerTabsRef } from "ui/components/code/JsonViewer";
-import { twMerge } from "ui/elements/mocks/tailwind-merge";
-import { Form } from "ui/components/form/json-schema-form";
-import { Button } from "ui/components/buttons/Button";
-import * as Formy from "ui/components/form/Formy";
-
-export function Sidebar({ open, toggle }) {
-   const client = getClient();
-   const tools = useMcpStore((state) => state.tools);
-   const setTools = useMcpStore((state) => state.setTools);
-   const setContent = useMcpStore((state) => state.setContent);
-   const content = useMcpStore((state) => state.content);
-   const [loading, setLoading] = useState(false);
-   const [query, setQuery] = useState<string>("");
-
-   const handleRefresh = useCallback(async () => {
-      setLoading(true);
-      const res = await client.listTools();
-      if (res) setTools(res.tools);
-      setLoading(false);
-   }, []);
-
-   useEffect(() => {
-      handleRefresh();
-   }, []);
-
-   return (
-      <AppShell.SectionHeaderAccordionItem
-         title="Tools"
-         open={open}
-         toggle={toggle}
-         renderHeaderRight={() => (
-            <div className="flex flex-row gap-2 items-center">
-               <span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
-                  {tools.length}
-               </span>
-               <IconButton Icon={TbRefresh} disabled={!open || loading} onClick={handleRefresh} />
-            </div>
-         )}
-      >
-         <div className="flex flex-col flex-grow p-3 gap-3">
-            <Formy.Input
-               type="text"
-               placeholder="Search tools"
-               value={query}
-               onChange={(e) => setQuery(e.target.value)}
-            />
-            <nav className="flex flex-col flex-1 gap-1">
-               {tools
-                  .filter((tool) => tool.name.includes(query))
-                  .map((tool) => (
-                     <AppShell.SidebarLink
-                        key={tool.name}
-                        className={twMerge(
-                           "flex flex-col items-start h-auto py-3 gap-px",
-                           content?.name === tool.name ? "active" : "",
-                        )}
-                        onClick={() => setContent(tool)}
-                     >
-                        <span className="font-mono">{tool.name}</span>
-                        <span className="text-sm text-primary/50">{tool.description}</span>
-                     </AppShell.SidebarLink>
-                  ))}
-            </nav>
-         </div>
-      </AppShell.SectionHeaderAccordionItem>
-   );
-}
-
-export function Content() {
-   const content = useMcpStore((state) => state.content);
-   const [payload, setPayload] = useState<object>(getTemplate(content?.inputSchema));
-   const [result, setResult] = useState<object | null>(null);
-   const client = getClient();
-   const jsonViewerTabsRef = useRef<JsonViewerTabsRef>(null);
-   const hasInputSchema =
-      content?.inputSchema && Object.keys(content.inputSchema.properties ?? {}).length > 0;
-
-   useEffect(() => {
-      setPayload(getTemplate(content?.inputSchema));
-      setResult(null);
-   }, [content]);
-
-   const handleSubmit = useCallback(async () => {
-      if (!content?.name) return;
-      const res = await client.callTool({
-         name: content.name,
-         arguments: payload,
-      });
-      if (res) {
-         setResult(res);
-         jsonViewerTabsRef.current?.setSelected("Result");
-      }
-   }, [payload]);
-
-   if (!content) return null;
-
-   let readableResult = result;
-   try {
-      readableResult = result
-         ? (result as any).content?.[0].text
-            ? JSON.parse((result as any).content[0].text)
-            : result
-         : null;
-   } catch (e) {}
-
-   return (
-      <div className="flex flex-grow flex-col">
-         <AppShell.SectionHeader
-            right={
-               <Button
-                  type="button"
-                  disabled={!content?.name}
-                  variant="primary"
-                  onClick={handleSubmit}
-               >
-                  Call Tool
-               </Button>
-            }
-         >
-            <AppShell.SectionHeaderTitle className="">
-               <span className="opacity-50">
-                  Tools <span className="opacity-70">/</span>
-               </span>{" "}
-               {content?.name}
-            </AppShell.SectionHeaderTitle>
-         </AppShell.SectionHeader>
-         <AppShell.Scrollable>
-            <div className="flex flex-grow flex-col py-4 px-5">
-               <div key={JSON.stringify(content)} className="flex flex-col gap-4">
-                  <p className="text-primary/80">{content?.description}</p>
-
-                  {hasInputSchema && (
-                     <Form
-                        schema={{
-                           title: "InputSchema",
-                           ...content?.inputSchema,
-                        }}
-                        initialValues={payload}
-                        hiddenSubmit={false}
-                        onChange={(value) => {
-                           setPayload(value);
-                        }}
-                     />
-                  )}
-                  <JsonViewerTabs
-                     ref={jsonViewerTabsRef}
-                     expand={9}
-                     showCopy
-                     showSize
-                     tabs={{
-                        Arguments: { json: payload, title: "Payload", enabled: hasInputSchema },
-                        Result: { json: readableResult, title: "Result" },
-                        "Tool Configuration": {
-                           json: content ?? null,
-                           title: "Tool Configuration",
-                        },
-                     }}
-                  />
-               </div>
-            </div>
-         </AppShell.Scrollable>
-      </div>
-   );
-}
diff --git a/app/src/ui/routes/tools/index.tsx b/app/src/ui/routes/tools/index.tsx
new file mode 100644
index 0000000..3bfc6b0
--- /dev/null
+++ b/app/src/ui/routes/tools/index.tsx
@@ -0,0 +1,16 @@
+import { Empty } from "ui/components/display/Empty";
+import { Route } from "wouter";
+import ToolsMcp from "./mcp/mcp";
+
+export default function ToolsRoutes() {
+   return (
+      <>
+         <Route path="/" component={ToolsIndex} />
+         <Route path="/mcp" component={ToolsMcp} />
+      </>
+   );
+}
+
+function ToolsIndex() {
+   return <Empty title="Tools" description="Select a tool to continue." />;
+}
diff --git a/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx b/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
new file mode 100644
index 0000000..9c62cc7
--- /dev/null
+++ b/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
@@ -0,0 +1,15 @@
+export const McpIcon = () => (
+   <svg
+      fill="currentColor"
+      fill-rule="evenodd"
+      height="1em"
+      style={{ flex: "none", lineHeight: "1" }}
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+   >
+      <title>ModelContextProtocol</title>
+      <path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z" />
+      <path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z" />
+   </svg>
+);
diff --git a/app/src/ui/routes/test/tests/mcp/mcp-test.tsx b/app/src/ui/routes/tools/mcp/mcp.tsx
similarity index 58%
rename from app/src/ui/routes/test/tests/mcp/mcp-test.tsx
rename to app/src/ui/routes/tools/mcp/mcp.tsx
index c390c21..f799223 100644
--- a/app/src/ui/routes/test/tests/mcp/mcp-test.tsx
+++ b/app/src/ui/routes/tools/mcp/mcp.tsx
@@ -1,16 +1,37 @@
 import * as AppShell from "ui/layouts/AppShell/AppShell";
 import { useMcpStore } from "./state";
 import * as Tools from "./tools";
+import { TbWorld } from "react-icons/tb";
+import { McpIcon } from "./components/mcp-icon";
+import { useBknd } from "ui/client/bknd";
+import { Empty } from "ui/components/display/Empty";
 
-export default function MCPTest() {
+export default function ToolsMcp() {
+   const { config, options } = useBknd();
    const feature = useMcpStore((state) => state.feature);
    const setFeature = useMcpStore((state) => state.setFeature);
 
+   if (!config.server.mcp.enabled) {
+      return (
+         <Empty
+            title="MCP not enabled"
+            description="Please enable MCP in the settings to continue."
+         />
+      );
+   }
+
    return (
-      <>
+      <div className="flex flex-col flex-grow">
          <AppShell.SectionHeader>
             <div className="flex flex-row gap-4 items-center">
+               <McpIcon />
                <AppShell.SectionHeaderTitle>MCP UI</AppShell.SectionHeaderTitle>
+               <div className="flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
+                  <TbWorld />
+                  <span className="text-sm font-mono leading-none">
+                     {window.location.origin + "/mcp"}
+                  </span>
+               </div>
             </div>
          </AppShell.SectionHeader>
          <div className="flex h-full">
@@ -28,6 +49,6 @@ export default function MCPTest() {
             </AppShell.Sidebar>
             {feature === "tools" && <Tools.Content />}
          </div>
-      </>
+      </div>
    );
 }
diff --git a/app/src/ui/routes/test/tests/mcp/state.ts b/app/src/ui/routes/tools/mcp/state.ts
similarity index 56%
rename from app/src/ui/routes/test/tests/mcp/state.ts
rename to app/src/ui/routes/tools/mcp/state.ts
index 47558a5..85a584a 100644
--- a/app/src/ui/routes/test/tests/mcp/state.ts
+++ b/app/src/ui/routes/tools/mcp/state.ts
@@ -12,11 +12,20 @@ export const useMcpStore = create(
          tools: [] as ToolJson[],
          feature: "tools" as Feature | null,
          content: null as ToolJson | null,
+         history: [] as { type: "request" | "response"; data: any }[],
+         historyLimit: 50,
+         historyVisible: true,
       },
       (set) => ({
          setTools: (tools: ToolJson[]) => set({ tools }),
          setFeature: (feature: Feature) => set({ feature }),
          setContent: (content: ToolJson | null) => set({ content }),
+         addHistory: (type: "request" | "response", data: any) =>
+            set((state) => ({
+               history: [{ type, data }, ...state.history.slice(0, state.historyLimit - 1)],
+            })),
+         setHistoryLimit: (limit: number) => set({ historyLimit: limit }),
+         setHistoryVisible: (visible: boolean) => set({ historyVisible: visible }),
       }),
    ),
 );
diff --git a/app/src/ui/routes/tools/mcp/tools.tsx b/app/src/ui/routes/tools/mcp/tools.tsx
new file mode 100644
index 0000000..1855937
--- /dev/null
+++ b/app/src/ui/routes/tools/mcp/tools.tsx
@@ -0,0 +1,217 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getClient, getTemplate } from "./utils";
+import { useMcpStore } from "./state";
+import { AppShell } from "ui/layouts/AppShell";
+import { TbHistory, TbHistoryOff, TbRefresh } from "react-icons/tb";
+import { IconButton } from "ui/components/buttons/IconButton";
+import { JsonViewer, JsonViewerTabs, type JsonViewerTabsRef } from "ui/components/code/JsonViewer";
+import { twMerge } from "ui/elements/mocks/tailwind-merge";
+import {
+   Form,
+} from "ui/components/form/json-schema-form";
+import { Button } from "ui/components/buttons/Button";
+import * as Formy from "ui/components/form/Formy";
+import { JsonEditor } from "ui/components/code/JsonEditor";
+
+export function Sidebar({ open, toggle }) {
+   const client = getClient();
+   const tools = useMcpStore((state) => state.tools);
+   const setTools = useMcpStore((state) => state.setTools);
+   const setContent = useMcpStore((state) => state.setContent);
+   const content = useMcpStore((state) => state.content);
+   const [loading, setLoading] = useState(false);
+   const [query, setQuery] = useState<string>("");
+
+   const handleRefresh = useCallback(async () => {
+      setLoading(true);
+      const res = await client.listTools();
+      if (res) setTools(res.tools);
+      setLoading(false);
+   }, []);
+
+   useEffect(() => {
+      handleRefresh();
+   }, []);
+
+   return (
+      <AppShell.SectionHeaderAccordionItem
+         title="Tools"
+         open={open}
+         toggle={toggle}
+         renderHeaderRight={() => (
+            <div className="flex flex-row gap-2 items-center">
+               <span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
+                  {tools.length}
+               </span>
+               <IconButton Icon={TbRefresh} disabled={!open || loading} onClick={handleRefresh} />
+            </div>
+         )}
+      >
+         <div className="flex flex-col flex-grow p-3 gap-3">
+            <Formy.Input
+               type="text"
+               placeholder="Search tools"
+               value={query}
+               onChange={(e) => setQuery(e.target.value)}
+            />
+            <nav className="flex flex-col flex-1 gap-1">
+               {tools
+                  .filter((tool) => tool.name.includes(query))
+                  .map((tool) => {
+                     return (
+                        <AppShell.SidebarLink
+                           key={tool.name}
+                           className={twMerge(
+                              "flex flex-col items-start h-auto py-3 gap-px",
+                              content?.name === tool.name ? "active" : "",
+                           )}
+                           onClick={() => setContent(tool)}
+                        >
+                           <span className="font-mono">{tool.name}</span>
+                           <span className="text-sm text-primary/50">{tool.description}</span>
+                        </AppShell.SidebarLink>
+                     );
+                  })}
+            </nav>
+         </div>
+      </AppShell.SectionHeaderAccordionItem>
+   );
+}
+
+export function Content() {
+   const content = useMcpStore((state) => state.content);
+   const addHistory = useMcpStore((state) => state.addHistory);
+   const [payload, setPayload] = useState<object>(getTemplate(content?.inputSchema));
+   const [result, setResult] = useState<object | null>(null);
+   const historyVisible = useMcpStore((state) => state.historyVisible);
+   const setHistoryVisible = useMcpStore((state) => state.setHistoryVisible);
+   const client = getClient();
+   const jsonViewerTabsRef = useRef<JsonViewerTabsRef>(null);
+   const hasInputSchema =
+      content?.inputSchema && Object.keys(content.inputSchema.properties ?? {}).length > 0;
+
+   useEffect(() => {
+      setPayload(getTemplate(content?.inputSchema));
+      setResult(null);
+   }, [content]);
+
+   const handleSubmit = useCallback(async () => {
+      if (!content?.name) return;
+      const request = {
+         name: content.name,
+         arguments: payload,
+      };
+      addHistory("request", request);
+      const res = await client.callTool(request);
+      if (res) {
+         setResult(res);
+         addHistory("response", res);
+         jsonViewerTabsRef.current?.setSelected("Result");
+      }
+   }, [payload]);
+
+   if (!content) return null;
+
+   let readableResult = result;
+   try {
+      readableResult = result
+         ? (result as any).content?.[0].text
+            ? JSON.parse((result as any).content[0].text)
+            : result
+         : null;
+   } catch (e) {}
+
+   return (
+      <div className="flex flex-grow flex-col">
+         <AppShell.SectionHeader
+            right={
+               <div className="flex flex-row gap-2">
+                  <IconButton
+                     Icon={historyVisible ? TbHistoryOff : TbHistory}
+                     onClick={() => setHistoryVisible(!historyVisible)}
+                  />
+                  <Button
+                     type="button"
+                     disabled={!content?.name}
+                     variant="primary"
+                     onClick={handleSubmit}
+                  >
+                     Call Tool
+                  </Button>
+               </div>
+            }
+         >
+            <AppShell.SectionHeaderTitle className="">
+               <span className="opacity-50">
+                  Tools <span className="opacity-70">/</span>
+               </span>{" "}
+               {content?.name}
+            </AppShell.SectionHeaderTitle>
+         </AppShell.SectionHeader>
+         <div className="flex flex-grow flex-row w-full">
+            <div className="flex flex-grow flex-col w-full">
+               <AppShell.Scrollable>
+                  <div key={JSON.stringify(content)} className="flex flex-col py-4 px-5  gap-4">
+                     <p className="text-primary/80">{content?.description}</p>
+
+                     {hasInputSchema && (
+                        <Form
+                           schema={{
+                              title: "InputSchema",
+                              ...content?.inputSchema,
+                           }}
+                           initialValues={payload}
+                           hiddenSubmit={false}
+                           onChange={(value) => {
+                              setPayload(value);
+                           }}
+                        />
+                     )}
+                     <JsonViewerTabs
+                        ref={jsonViewerTabsRef}
+                        expand={9}
+                        showCopy
+                        showSize
+                        tabs={{
+                           Arguments: { json: payload, title: "Payload", enabled: hasInputSchema },
+                           Result: { json: readableResult, title: "Result" },
+                           "Tool Configuration": {
+                              json: content ?? null,
+                              title: "Tool Configuration",
+                           },
+                        }}
+                     />
+                  </div>
+               </AppShell.Scrollable>
+            </div>
+            {historyVisible && (
+               <AppShell.Sidebar name="right" handle="left" maxWidth={window.innerWidth * 0.25}>
+                  <History />
+               </AppShell.Sidebar>
+            )}
+         </div>
+      </div>
+   );
+}
+
+const History = () => {
+   const history = useMcpStore((state) => state.history.slice(0, 50));
+
+   return (
+      <>
+         <AppShell.SectionHeader>History</AppShell.SectionHeader>
+         <AppShell.Scrollable>
+            <div className="flex flex-col flex-grow p-3 gap-1">
+               {history.map((item, i) => (
+                  <JsonViewer
+                     key={`${item.type}-${i}`}
+                     json={item.data}
+                     title={item.type}
+                     expand={1}
+                  />
+               ))}
+            </div>
+         </AppShell.Scrollable>
+      </>
+   );
+};
diff --git a/app/src/ui/routes/test/tests/mcp/utils.ts b/app/src/ui/routes/tools/mcp/utils.ts
similarity index 100%
rename from app/src/ui/routes/test/tests/mcp/utils.ts
rename to app/src/ui/routes/tools/mcp/utils.ts
diff --git a/app/src/ui/store/appshell.ts b/app/src/ui/store/appshell.ts
index d58c867..27c6d43 100644
--- a/app/src/ui/store/appshell.ts
+++ b/app/src/ui/store/appshell.ts
@@ -1,23 +1,73 @@
 import { create } from "zustand";
 import { combine, persist } from "zustand/middleware";
 
+type SidebarState = {
+   open: boolean;
+   width: number;
+};
+
 export const appShellStore = create(
    persist(
       combine(
          {
-            sidebarOpen: false as boolean,
-            sidebarWidth: 350 as number,
+            sidebars: {
+               default: {
+                  open: false,
+                  width: 350,
+               },
+            } as Record<string, SidebarState>,
          },
          (set) => ({
-            toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
-            closeSidebar: () => set({ sidebarOpen: false }),
-            openSidebar: () => set({ sidebarOpen: true }),
-            setSidebarWidth: (width: number) => set({ sidebarWidth: width }),
-            resetSidebarWidth: () => set({ sidebarWidth: 350 }),
+            toggleSidebar: (name: string) => () =>
+               set((state) => {
+                  const sidebar = state.sidebars[name];
+                  if (!sidebar) return state;
+                  return {
+                     sidebars: {
+                        ...state.sidebars,
+                        [name]: { ...sidebar, open: !sidebar.open },
+                     },
+                  };
+               }),
+            closeSidebar: (name: string) => () =>
+               set((state) => {
+                  const sidebar = state.sidebars[name];
+                  if (!sidebar) return state;
+                  return {
+                     sidebars: { ...state.sidebars, [name]: { ...sidebar, open: false } },
+                  };
+               }),
+            setSidebarWidth: (name: string) => (width: number) =>
+               set((state) => {
+                  const sidebar = state.sidebars[name];
+                  if (!sidebar)
+                     return { sidebars: { ...state.sidebars, [name]: { open: false, width } } };
+                  return { sidebars: { ...state.sidebars, [name]: { ...sidebar, width } } };
+               }),
+            resetSidebarWidth: (name: string) =>
+               set((state) => {
+                  const sidebar = state.sidebars[name];
+                  if (!sidebar) return state;
+                  return { sidebars: { ...state.sidebars, [name]: { ...sidebar, width: 350 } } };
+               }),
+
+            setSidebarState: (name: string, update: SidebarState) =>
+               set((state) => ({ sidebars: { ...state.sidebars, [name]: update } })),
          }),
       ),
       {
          name: "appshell",
+         version: 1,
+         migrate: () => {
+            return {
+               sidebars: {
+                  default: {
+                     open: false,
+                     width: 350,
+                  },
+               },
+            };
+         },
       },
    ),
 );