Performance

Component Bundling

The best piece of advice for optimal performance: pre-bundle your components using the Fractal CLI.

npx fractal-mcp bundle -e ./ui/WeatherCard.tsx -d /path/to/weather/bundle

Options:

• -e, --entrypoint <path> (required) - Path to the component entrypoint file
• -d, --dst <path> (required) - Output directory path

Bundle Multiple Components at Once

For projects with multiple components, you can use the bundle-all command to bundle all .tsx files in a subdirectory into separate output directories:

npx fractal-mcp bundle-all -s ./ui/components -d ./dist

Options:

• -s, --source <path> (required) - Source subdirectory containing .tsx files to bundle
• -d, --dst <path> (required) - Output directory path (parent directory for all bundles)

This will automatically discover all .tsx files in the source directory and create individual bundles for each component.

Example: Creating a Component Tool

Now you can use the componentBundlePath argument instead of the componentPath so that fractal doesnt need to re-bundle your components repeatedly.

import { FractalMCPServer } from '@fractal-mcp/mcp';
import { z } from 'zod';
import * as path from 'path';
 
const mcpServer = new FractalMCPServer({ 
  name: 'my-provider', 
  version: '1.0.0' 
});
 
mcpServer.componentTool({
  name: 'weather_dashboard',
  description: 'Interactive weather dashboard',
  componentBundlePath: path.resolve('/path/to/weather/bundle'),
  inputSchema: { 
    location: z.string(),
    units: z.enum(['metric', 'imperial']).optional()
  },
  handler: async (params) => {
    const weatherData = await fetchWeatherData(params.location, params.units);
    return weatherData;
  },
});