Implement the renderer-side of MCP

Author: pimterry

src/index.tsx

@@ -43,6 +43,8 @@ import { App } from './components/app';
 import { StyleProvider } from './components/style-provider';
 import { ErrorBoundary } from './components/error-boundary';
 
+import { initializeUiApi } from './services/ui-api/api-interface';
+
 console.log(`Initialising UI (version ${UI_VERSION})`);
 
 const APP_ELEMENT_SELECTOR = '#app';
@@ -100,6 +102,10 @@ const appStartupPromise = Promise.all(
 );
 initMetrics();
 
+// The UI exposes an API itself, allowing external components (the desktop shell) to access
+// UI state for the MCP server etc.
+initializeUiApi({ accountStore, eventsStore });
+
 // Once the app is loaded, show the app
 appStartupPromise.then(() => {
     // We now know that the server is running - tell it to check for updates

src/services/desktop-api.ts

@@ -1,4 +1,5 @@
 import { desktopVersion } from "./service-versions";
+import { OperationDefinition } from "./ui-api/api-types";
 
 type DesktopInjectedKey =
     | 'httpToolkitDesktopVersion'
@@ -54,6 +55,11 @@ interface DesktopApi {
      * File at all, it throws.
      */
     getPathForFile?: (file: File) => string | null;
+
+    setApiOperations?: (operations: OperationDefinition[]) => void;
+    onOperationRequest?: (
+        handler: (operation: string, params: Record<string, unknown>) => Promise<unknown>
+    ) => void;
 }
 
 interface NativeContextMenuDefinition {

src/services/ui-api/api-interface.ts

@@ -0,0 +1,32 @@
+import { OperationRegistry } from './api-registry';
+import { registerAllOperations } from './operations';
+
+import { DesktopApi } from '../desktop-api';
+import { AccountStore } from '../../model/account/account-store';
+import { EventsStore } from '../../model/events/events-store';
+
+export function initializeUiApi(stores: {
+    accountStore: AccountStore;
+    eventsStore: EventsStore;
+}) {
+    if (!DesktopApi.setApiOperations || !DesktopApi.onOperationRequest) {
+        console.log("UI API not available");
+        return;
+    }
+
+    const { accountStore, eventsStore } = stores;
+
+    const registry = new OperationRegistry(
+        () => accountStore.isPaidUser
+    );
+
+    registerAllOperations(
+        registry,
+        () => eventsStore.events
+    );
+
+    DesktopApi.setApiOperations(registry.getDefinitions());
+    DesktopApi.onOperationRequest(async (operation, params) => {
+        return await registry.execute(operation, params || {});
+    });
+}

src/services/ui-api/api-registry.ts

@@ -0,0 +1,55 @@
+import { Operation, OperationResult } from './api-types';
+
+const PRO_REQUIRED_ERROR: OperationResult = {
+    success: false,
+    error: {
+        code: 'PRO_REQUIRED',
+        message: 'This feature requires an HTTP Toolkit Pro subscription. ' +
+                 'Get Pro at https://httptoolkit.com/pricing/ to unlock ' +
+                 'programmatic access to HTTP Toolkit via MCP, CLI, and more.'
+    }
+};
+
+export class OperationRegistry {
+
+    private operations = new Map<string, Operation>();
+
+    constructor(private isPaidUser: () => boolean) {}
+
+    register(op: Operation): void {
+        this.operations.set(op.definition.name, op);
+    }
+
+    getDefinitions() {
+        return Array.from(this.operations.values()).map(op => op.definition);
+    }
+
+    async execute(name: string, params: Record<string, unknown>): Promise<OperationResult> {
+        if (!this.isPaidUser()) {
+            return PRO_REQUIRED_ERROR;
+        }
+
+        const op = this.operations.get(name);
+        if (!op) {
+            return {
+                success: false,
+                error: {
+                    code: 'UNKNOWN_OPERATION',
+                    message: `Unknown operation: ${name}`
+                }
+            };
+        }
+
+        try {
+            return await op.handler(params);
+        } catch (e: any) {
+            return {
+                success: false,
+                error: {
+                    code: 'EXECUTION_ERROR',
+                    message: e.message || String(e)
+                }
+            };
+        }
+    }
+}

src/services/ui-api/api-types.ts

@@ -0,0 +1,24 @@
+import { JSONSchema7 } from 'json-schema';
+
+export interface OperationDefinition {
+    name: string;
+    description: string;
+    inputSchema: JSONSchema7;
+    outputSchema: JSONSchema7;
+    category: string;
+}
+
+export interface OperationResult<T = unknown> {
+    success: boolean;
+    data?: T;
+    error?: { code: string; message: string };
+}
+
+export type OperationHandler = (
+    params: Record<string, unknown>
+) => Promise<OperationResult>;
+
+export interface Operation {
+    definition: OperationDefinition;
+    handler: OperationHandler;
+}