Vite MCP Server

Instructions

Implementation Reference

• src/tools/browser-tools.ts:537-597 (handler)

  Executes network monitoring by listening to Playwright page 'request' events for a specified duration, optionally filtering by URL pattern, and returns captured requests.

  async ({ urlPattern, duration = 5000 }) => {
    try {
      // Check browser status
      const browserStatus = getContextForOperation();
      if (!browserStatus.isStarted) {
        return browserStatus.error;
      }
  
      const requests: Array<{
        url: string;
        method: string;
        resourceType: string;
        timestamp: number;
      }> = [];
      const pattern = urlPattern ? new RegExp(urlPattern) : null;
  
      // Start network request monitoring
      const requestHandler = (request: Request) => {
        const url = request.url();
        if (!pattern || pattern.test(url)) {
          requests.push({
            url,
            method: request.method(),
            resourceType: request.resourceType(),
            timestamp: Date.now()
          });
        }
      };
  
      browserStatus.page.on('request', requestHandler);
  
      // Wait for specified duration
      await new Promise(resolve => setTimeout(resolve, duration));
  
      // Stop monitoring
      browserStatus.page.off('request', requestHandler);
  
      return {
        content: [
          {
            type: 'text',
            text: requests.length > 0
              ? `Captured ${requests.length} network requests:\n${JSON.stringify(requests, null, 2)}`
              : 'No network requests matching the criteria were captured during the monitoring period.'
          }
        ]
      };
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : String(error);
      Logger.error(`Failed to monitor network: ${errorMessage}`);
      return {
        content: [
          {
            type: 'text',
            text: `Failed to monitor network: ${errorMessage}`
          }
        ],
        isError: true
      };
    }
  }

• src/tools/browser-tools.ts:533-536 (schema)

  Input schema using Zod: optional urlPattern (regex string for filtering), optional duration (milliseconds, defaults to 5000).

  {
    urlPattern: z.string().optional().describe('URL pattern to filter (regex string)'),
    duration: z.number().optional().describe('Duration in milliseconds to monitor (default: 5000)')
  },

• src/tools/browser-tools.ts:530-600 (registration)

  Registers the 'monitor-network' tool with the MCP server using server.tool(name, description, inputSchema, handler).

  server.tool(
    'monitor-network',
    'Monitors network requests in the browser for a specified duration',
    {
      urlPattern: z.string().optional().describe('URL pattern to filter (regex string)'),
      duration: z.number().optional().describe('Duration in milliseconds to monitor (default: 5000)')
    },
    async ({ urlPattern, duration = 5000 }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        const requests: Array<{
          url: string;
          method: string;
          resourceType: string;
          timestamp: number;
        }> = [];
        const pattern = urlPattern ? new RegExp(urlPattern) : null;
  
        // Start network request monitoring
        const requestHandler = (request: Request) => {
          const url = request.url();
          if (!pattern || pattern.test(url)) {
            requests.push({
              url,
              method: request.method(),
              resourceType: request.resourceType(),
              timestamp: Date.now()
            });
          }
        };
  
        browserStatus.page.on('request', requestHandler);
  
        // Wait for specified duration
        await new Promise(resolve => setTimeout(resolve, duration));
  
        // Stop monitoring
        browserStatus.page.off('request', requestHandler);
  
        return {
          content: [
            {
              type: 'text',
              text: requests.length > 0
                ? `Captured ${requests.length} network requests:\n${JSON.stringify(requests, null, 2)}`
                : 'No network requests matching the criteria were captured during the monitoring period.'
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to monitor network: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to monitor network: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );
  
  // Element HTML content retrieval tool