import type { ContentBlockParam } from '@anthropic-ai/sdk/resources/messages.mjs'; import { useEffect, useRef } from 'react'; import { logError } from 'src/utils/log.js'; import { z } from 'zod/v4'; import { callIdeRpc } from '../services/mcp/client.js'; import type { ConnectedMCPServer, MCPServerConnection } from '../services/mcp/types.js'; import type { PermissionMode } from '../types/permissions.js'; import { CLAUDE_IN_CHROME_MCP_SERVER_NAME, isTrackedClaudeInChromeTabId } from '../utils/claudeInChrome/common.js'; import { lazySchema } from '../utils/lazySchema.js'; import { enqueuePendingNotification } from '../utils/messageQueueManager.js'; // Schema for the prompt notification from Chrome extension (JSON-RPC 2.0 format) const ClaudeInChromePromptNotificationSchema = lazySchema(() => z.object({ method: z.literal('notifications/message'), params: z.object({ prompt: z.string(), image: z .object({ type: z.literal('base64'), media_type: z.enum(['image/jpeg', 'image/png', 'image/gif', 'image/webp']), data: z.string(), }) .optional(), tabId: z.number().optional(), }), }), ); /** * A hook that listens for prompt notifications from the Claude for Chrome extension, * enqueues them as user prompts, and syncs permission mode changes to the extension. */ export function usePromptsFromClaudeInChrome( mcpClients: MCPServerConnection[], toolPermissionMode: PermissionMode, ): void { const mcpClientRef = useRef(undefined); useEffect(() => { if (process.env.USER_TYPE !== 'ant') { return; } const mcpClient = findChromeClient(mcpClients); if (mcpClientRef.current !== mcpClient) { mcpClientRef.current = mcpClient; } if (mcpClient) { mcpClient.client.setNotificationHandler(ClaudeInChromePromptNotificationSchema(), notification => { if (mcpClientRef.current !== mcpClient) { return; } const { tabId, prompt, image } = notification.params; // Process notifications from tabs we're tracking since notifications are broadcasted if (typeof tabId !== 'number' || !isTrackedClaudeInChromeTabId(tabId)) { return; } try { // Build content blocks if there's an image, otherwise just use the prompt string if (image) { const contentBlocks: ContentBlockParam[] = [ { type: 'text', text: prompt }, { type: 'image', source: { type: image.type, media_type: image.media_type, data: image.data, }, }, ]; enqueuePendingNotification({ value: contentBlocks, mode: 'prompt', }); } else { enqueuePendingNotification({ value: prompt, mode: 'prompt' }); } } catch (error) { logError(error as Error); } }); } }, [mcpClients]); // Sync permission mode with Chrome extension whenever it changes useEffect(() => { const chromeClient = findChromeClient(mcpClients); if (!chromeClient) return; const chromeMode = toolPermissionMode === 'bypassPermissions' ? 'skip_all_permission_checks' : 'ask'; void callIdeRpc('set_permission_mode', { mode: chromeMode }, chromeClient); }, [mcpClients, toolPermissionMode]); } function findChromeClient(clients: MCPServerConnection[]): ConnectedMCPServer | undefined { return clients.find( (client): client is ConnectedMCPServer => client.type === 'connected' && client.name === CLAUDE_IN_CHROME_MCP_SERVER_NAME, ); }