Pass auth through to the server for MCP

pimterry · pimterry · commit 953940c35b23 · 2026-04-11T17:30:39.000+02:00
diff --git a/src/model/account/account-store.ts b/src/model/account/account-store.ts
@@ -100,6 +100,22 @@ export class AccountStore {
             : undefined;
     }
 
+    // Expose the JWT directly, for delegating auth to remote services (e.g. HTK local server
+    // for MCP, public endpoint cloud server).
+    get userJwt(): string {
+        if (this.isLoggedIn && this.accountDataLastUpdated !== Infinity) {
+            // We read accountDataLastUpdated just to set up a subscription, so this will
+            // re-calculate on each JWT update, since we can't observe localStorage directly.
+            // It's never actually Infinity.
+
+            const jwt = localStorage.getItem('last_jwt');
+            if (!jwt) throw new Error("No JWT found for logged in user");
+            return jwt;
+        } else {
+            throw new Error("Can't get JWT for logged out user");
+        }
+    }
+
     private updateUser = flow(function * (this: AccountStore) {
         this.user = yield getLatestUserData();
         this.accountDataLastUpdated = Date.now();
diff --git a/src/services/ui-api/api-interface.ts b/src/services/ui-api/api-interface.ts
@@ -21,11 +21,11 @@ export function initializeUiApi(stores: {
 
     registerAllOperations(
         registry,
-        { eventsStore, proxyStore, interceptorStore },
+        { eventsStore, proxyStore, interceptorStore, accountStore },
         () => eventsStore.events
     );
 
     // Connect to the server's WebSocket bridge (for MCP and external tool access).
     const authToken = new URLSearchParams(window.location.search).get('authToken') ?? undefined;
-    startServerOperationBridge(registry, authToken);
+    startServerOperationBridge(registry, authToken, accountStore);
 }
diff --git a/src/services/ui-api/api-registry.ts b/src/services/ui-api/api-registry.ts
@@ -1,34 +1,62 @@
-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.'
-    }
-};
+import { Operation, OperationDefinition, OperationResult } from './api-types';
+
+function tierRequiredError(tier: string): OperationResult {
+    const displayTier = tier.charAt(0).toUpperCase() + tier.slice(1);
+    return {
+        success: false,
+        error: {
+            code: `TIER_REQUIRED_${tier.toUpperCase()}`,
+            message: `This feature requires an HTTP Toolkit ${displayTier} subscription. ` +
+                     `Get ${displayTier} 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>();
+    private sessionLimitCounters = new Map<string, number>();
 
     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);
+    private getUserTier(): 'free' | 'pro' {
+        return this.isPaidUser() ? 'pro' : 'free';
     }
 
-    async execute(name: string, params: Record<string, unknown>): Promise<OperationResult> {
-        if (!this.isPaidUser()) {
-            return PRO_REQUIRED_ERROR;
-        }
+    getDefinitions(): OperationDefinition[] {
+        const tier = this.getUserTier();
+
+        return Array.from(this.operations.values())
+            .filter(op => {
+                const { tiers } = op.definition;
+                // Hide operations whose tiers don't include the current user's tier
+                // (e.g. account.upgrade has tiers: ['free'] — hidden from pro users)
+                if (!tiers.includes(tier)) return false;
+                return true;
+            })
+            .map(op => {
+                if (tier === 'pro') return op.definition;
+
+                // Augment descriptions for free users so AI agents understand limits
+                let description = op.definition.description;
+                const { tiers, sessionLimit } = op.definition;
+
+                if (sessionLimit) {
+                    description += `\n\n[Free tier] Limited to ${sessionLimit} calls per session. ` +
+                        'Use account.upgrade to subscribe to Pro for unlimited access.';
+                }
+
+                if (description === op.definition.description) return op.definition;
+                return { ...op.definition, description };
+            });
+    }
 
+    async execute(name: string, params: Record<string, unknown>): Promise<OperationResult> {
         const op = this.operations.get(name);
         if (!op) {
             return {
@@ -40,6 +68,30 @@ export class OperationRegistry {
             };
         }
 
+        const tier = this.getUserTier();
+        const { tiers, sessionLimit } = op.definition;
+
+        if (!tiers.includes(tier)) {
+            const requiredTier = tiers[0]; // The first listed tier the user doesn't have
+            return tierRequiredError(requiredTier);
+        }
+
+        // Check session limits for free users
+        if (tier === 'free' && sessionLimit) {
+            const count = this.sessionLimitCounters.get(name) ?? 0;
+            if (count >= sessionLimit) {
+                return {
+                    success: false,
+                    error: {
+                        code: 'SESSION_LIMIT',
+                        message: `Free users are limited to ${sessionLimit} calls per session. ` +
+                            'Upgrade to HTTP Toolkit Pro for unlimited access: https://httptoolkit.com/pricing/'
+                    }
+                };
+            }
+            this.sessionLimitCounters.set(name, count + 1);
+        }
+
         try {
             const result = await op.handler(params);
             // JSON roundtrip to strip MobX observables, class instances, and other
diff --git a/src/services/ui-api/api-types.ts b/src/services/ui-api/api-types.ts
@@ -6,6 +6,8 @@ export interface OperationDefinition {
     inputSchema: JSONSchema7;
     outputSchema: JSONSchema7;
     category: string;
+    tiers: Array<'free' | 'pro'>;
+    sessionLimit?: number;
     annotations?: {
         readOnlyHint?: boolean;
         destructiveHint?: boolean;
diff --git a/src/services/ui-api/operations/account-operations.ts b/src/services/ui-api/operations/account-operations.ts
@@ -0,0 +1,48 @@
+import { Operation } from '../api-types';
+import { AccountStore } from '../../../model/account/account-store';
+
+export function registerAccountOperations(
+    registry: { register(op: Operation): void },
+    accountStore: AccountStore
+): void {
+    registry.register(accountUpgradeOperation(accountStore));
+}
+
+function accountUpgradeOperation(accountStore: AccountStore): Operation {
+    return {
+        definition: {
+            name: 'account.upgrade',
+            description: 'Start the upgrade process to HTTP Toolkit Pro. ' +
+                'Opens the subscription signup flow in the HTTP Toolkit desktop app. ' +
+                'Pro unlocks advanced remote control & MCP features including unlimited data ' +
+                'access, interceptor activation, CLI control, and all future operations, in ' +
+                'addition to all core UI features like advanced debugging, import/export, ' +
+                'automated rewriting rules, persistent sessions, and advanced configuration. ' +
+                'Starting this flow doesn\'t commit you to purchasing - the initial step just ' +
+                'lists the plans and features available so you can make a decision.',
+            category: 'account',
+            tiers: ['free'],
+            annotations: { readOnlyHint: false },
+            inputSchema: {
+                type: 'object',
+                properties: {}
+            },
+            outputSchema: {
+                type: 'object',
+                properties: {
+                    message: { type: 'string' }
+                }
+            }
+        },
+        handler: async () => {
+            accountStore.getPro('mcp');
+            return {
+                success: true,
+                data: {
+                    message: 'The upgrade flow has been started in the HTTP Toolkit desktop app. ' +
+                        'Please complete the checkout process there.'
+                }
+            };
+        }
+    };
+}
diff --git a/src/services/ui-api/operations/event-operations.ts b/src/services/ui-api/operations/event-operations.ts
@@ -48,6 +48,7 @@ function eventsListOperation(
                 'Uses the same filter syntax as the UI search bar. ' +
                 'See https://httptoolkit.com/docs/reference/view-page/#filtering-intercepted-traffic for full docs.',
             category: 'events',
+            tiers: ['free', 'pro'],
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
@@ -169,6 +170,7 @@ function eventsGetOutlineOperation(
                 'headers, status, timing, and body sizes, but not the body content itself. ' +
                 'Use events.get-request-body or events.get-response-body to retrieve bodies.',
             category: 'events',
+            tiers: ['free', 'pro'],
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
@@ -225,6 +227,8 @@ function eventsGetRequestBodyOperation(
             description: 'Get the request body of a captured HTTP exchange. ' +
                 'Use offset and maxLength to retrieve specific ranges of large bodies.',
             category: 'events',
+            tiers: ['free', 'pro'],
+            sessionLimit: 50,
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
@@ -255,6 +259,8 @@ function eventsGetResponseBodyOperation(
             description: 'Get the response body of a captured HTTP exchange. ' +
                 'Use offset and maxLength to retrieve specific ranges of large bodies.',
             category: 'events',
+            tiers: ['free', 'pro'],
+            sessionLimit: 50,
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
@@ -282,6 +288,7 @@ function eventsClearOperation(eventsStore: EventsStore): Operation {
             name: 'events.clear',
             description: 'Clear all captured events. By default, pinned events are preserved.',
             category: 'events',
+            tiers: ['free', 'pro'],
             annotations: { readOnlyHint: false, destructiveHint: true },
             inputSchema: {
                 type: 'object',
diff --git a/src/services/ui-api/operations/index.ts b/src/services/ui-api/operations/index.ts
@@ -2,21 +2,25 @@ import { OperationRegistry } from '../api-registry';
 import { registerEventOperations } from './event-operations';
 import { registerProxyOperations } from './proxy-operations';
 import { registerInterceptorOperations } from './interceptor-operations';
+import { registerAccountOperations } from './account-operations';
 import { CollectedEvent } from '../../../types';
 import { EventsStore } from '../../../model/events/events-store';
 import { ProxyStore } from '../../../model/proxy-store';
 import { InterceptorStore } from '../../../model/interception/interceptor-store';
+import { AccountStore } from '../../../model/account/account-store';
 
 export function registerAllOperations(
     registry: OperationRegistry,
     stores: {
         eventsStore: EventsStore;
         proxyStore: ProxyStore;
         interceptorStore: InterceptorStore;
+        accountStore: AccountStore;
     },
     getEvents: () => ReadonlyArray<CollectedEvent>
 ): void {
     registerEventOperations(registry, stores.eventsStore, getEvents);
     registerProxyOperations(registry, stores.proxyStore);
     registerInterceptorOperations(registry, stores.interceptorStore);
+    registerAccountOperations(registry, stores.accountStore);
 }
diff --git a/src/services/ui-api/operations/interceptor-operations.ts b/src/services/ui-api/operations/interceptor-operations.ts
@@ -33,6 +33,7 @@ function interceptorsListOperation(interceptorStore: InterceptorStore): Operatio
             description: 'List available interceptors and their current status. ' +
                 'Shows which interceptors are supported, activable, and currently active.',
             category: 'interceptors',
+            tiers: ['free', 'pro'],
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
@@ -81,6 +82,7 @@ function interceptorsActivateOperation(interceptorStore: InterceptorStore): Oper
                 'fresh-terminal, system-proxy). Interactive interceptors like docker-attach, ' +
                 'android-adb, electron etc. require the full UI.',
             category: 'interceptors',
+            tiers: ['pro'],
             annotations: { readOnlyHint: false },
             inputSchema: {
                 type: 'object',
diff --git a/src/services/ui-api/operations/proxy-operations.ts b/src/services/ui-api/operations/proxy-operations.ts
@@ -15,6 +15,7 @@ function proxyGetConfigOperation(proxyStore: ProxyStore): Operation {
             description: 'Get the current proxy configuration: port, certificate path, ' +
                 'certificate fingerprint, and external network addresses.',
             category: 'proxy',
+            tiers: ['free', 'pro'],
             annotations: { readOnlyHint: true },
             inputSchema: {
                 type: 'object',
diff --git a/src/services/ui-api/server-operation-bridge.ts b/src/services/ui-api/server-operation-bridge.ts
diff --git a/test/unit/services/api/api-registry.spec.ts b/test/unit/services/api/api-registry.spec.ts
