cloudflare-browser-rendering-mcp

Instructions

Implementation Reference

• src/server.ts:219-262 (handler)

  The primary handler for the 'fetch_page' tool. Validates input arguments, fetches HTML content using BrowserClient, processes it for LLM use with ContentProcessor, applies length truncation, and returns formatted text content or error.
  * Handle the fetch_page tool */ private async handleFetchPage(args: any) { // Validate arguments if (typeof args !== 'object' || args === null || typeof args.url !== 'string') { throw new McpError(ErrorCode.InvalidParams, 'Invalid arguments for fetch_page'); } const { url, maxContentLength = 10000 } = args; try { // Fetch the page content const html = await this.browserClient.fetchContent(url); // Process the content for LLM const processedContent = this.contentProcessor.processForLLM(html, url); // Truncate if necessary const truncatedContent = processedContent.length > maxContentLength ? processedContent.substring(0, maxContentLength) + '...' : processedContent; // Return the content return { content: [ { type: 'text', text: truncatedContent, }, ], }; } catch (error) { console.error('[Error] Error fetching page:', error); return { content: [ { type: 'text', text: `Error fetching page: ${error instanceof Error ? error.message : String(error)}`, }, ], isError: true, }; } }
• src/server.ts:72-89 (schema)

  Tool schema definition including name, description, and input schema specifying 'url' (required) and optional 'maxContentLength'.
  { name: 'fetch_page', description: 'Fetches and processes a web page for LLM context', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'URL to fetch', }, maxContentLength: { type: 'number', description: 'Maximum content length to return', }, }, required: ['url'], }, },
• src/server.ts:182-186 (registration)

  Registration in the tool dispatch switch statement within the CallToolRequestSchema handler, routing 'fetch_page' calls to handleFetchPage.
  switch (name) { case 'fetch_page': console.error(`[API] Fetching page: ${args?.url}`); return await this.handleFetchPage(args); case 'search_documentation':
• src/browser-client.ts:23-53 (helper)

  Helper function in BrowserClient that performs the actual HTTP POST to Cloudflare Browser Rendering API (/content endpoint) to fetch rendered HTML, with error handling.
  async fetchContent(url: string): Promise<string> { try { console.error(`[API] Fetching content from: ${url}`); // Make the API call to the Cloudflare Worker const response = await axios.post(`${this.apiEndpoint}/content`, { url, rejectResourceTypes: ['image', 'font', 'media'], waitUntil: 'networkidle0', }); // Check if the response has the expected structure if (response.data && response.data.content) { return response.data.content; } // If we can't find the content, log the response and throw an error console.error('[Error] Unexpected response structure:', JSON.stringify(response.data, null, 2)); throw new Error('Unexpected response structure from Cloudflare Worker'); } catch (error: any) { console.error('[Error] Error fetching content:', error); // Log more detailed error information if available if (error.response) { console.error('[Error] Response status:', error.response.status); console.error('[Error] Response data:', JSON.stringify(error.response.data, null, 2)); } throw new Error(`Failed to fetch content: ${error instanceof Error ? error.message : String(error)}`); } }
• src/content-processor.ts:11-20 (helper)

  Helper function that orchestrates content processing: extracts metadata, cleans HTML to markdown-like text, and formats with metadata for LLM context.
  processForLLM(html: string, url: string): string { // Extract metadata const metadata = this.extractMetadata(html, url); // Clean the content const cleanedContent = this.cleanContent(html); // Format for LLM context return this.formatForLLM(cleanedContent, metadata); }