diff --git a/app/__test__/app/App.spec.ts b/app/__test__/app/App.spec.ts
index 4c44941..aff3e53 100644
--- a/app/__test__/app/App.spec.ts
+++ b/app/__test__/app/App.spec.ts
@@ -136,4 +136,21 @@ describe("App", () => {
       // expect async listeners to be executed sync after request
       expect(called).toHaveBeenCalled();
    });
+
+   test("getMcpClient", async () => {
+      const app = createApp({
+         initialConfig: {
+            server: {
+               mcp: {
+                  enabled: true,
+               },
+            },
+         },
+      });
+      await app.build();
+      const client = app.getMcpClient();
+      const res = await client.listTools();
+      expect(res).toBeDefined();
+      expect(res?.tools.length).toBeGreaterThan(0);
+   });
 });
diff --git a/app/src/App.ts b/app/src/App.ts
index 718ab54..ae0ee55 100644
--- a/app/src/App.ts
+++ b/app/src/App.ts
@@ -1,5 +1,5 @@
 import type { CreateUserPayload } from "auth/AppAuth";
-import { $console } from "bknd/utils";
+import { $console, McpClient } from "bknd/utils";
 import { Event } from "core/events";
 import type { em as prototypeEm } from "data/prototype";
 import { Connection } from "data/connection/Connection";
@@ -268,6 +268,17 @@ export class App<C extends Connection = Connection, Options extends AppOptions =
       return new Api({ host: "http://localhost", ...(options ?? {}), fetcher });
    }
 
+   getMcpClient() {
+      if (!this.mcp) {
+         throw new Error("MCP is not enabled");
+      }
+
+      return new McpClient({
+         url: "http://localhost/mcp",
+         fetch: this.server.request,
+      });
+   }
+
    async onUpdated<Module extends keyof Modules>(module: Module, config: ModuleConfigs[Module]) {
       // if the EventManager was disabled, we assume we shouldn't
       // respond to events, such as "onUpdated".
diff --git a/app/src/core/utils/schema/index.ts b/app/src/core/utils/schema/index.ts
index bf8b417..5f10092 100644
--- a/app/src/core/utils/schema/index.ts
+++ b/app/src/core/utils/schema/index.ts
@@ -11,6 +11,8 @@ export {
    mcpResource,
    getMcpServer,
    stdioTransport,
+   McpClient,
+   type McpClientConfig,
    type ToolAnnotation,
    type ToolHandlerCtx,
 } from "jsonv-ts/mcp";
diff --git a/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx b/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
index 9c62cc7..02c6504 100644
--- a/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
+++ b/app/src/ui/routes/tools/mcp/components/mcp-icon.tsx
@@ -1,7 +1,7 @@
 export const McpIcon = () => (
    <svg
       fill="currentColor"
-      fill-rule="evenodd"
+      fillRule="evenodd"
       height="1em"
       style={{ flex: "none", lineHeight: "1" }}
       viewBox="0 0 24 24"