Provider Overview

What is a Provider?

A provider is a service that exposes tools and UI components through the Model Context Protocol (MCP). Think of it as a microservice that can:

• Expose tools that AI agents can call to perform actions
• Provide UI components that render the results of those tools
• Handle data processing and external API integrations
• Serve interactive interfaces that users can navigate

Providers are the building blocks of the Fractal ecosystem - they encapsulate specific functionality (like weather data, file operations, or database queries) and make them available to AI agents and users through a standardized interface.

The Three Key Packages

When building a provider, you’ll work with three main packages:

1. @modelcontextprotocol/sdk

The foundational MCP protocol implementation. Provides the core types and interfaces for MCP communication.

2. @fractal-mcp/mcp

The Fractal server framework that extends MCP with:

• FractalMCPServer - Enhanced MCP server with component support
• componentTool() - Method to register tools with UI components
• startExpressServer() - HTTP server integration

3. @fractal-mcp/composer

The React library for building UI components:

• useFractal() - Hook to access tool data and navigation
• Pre-built utilities for common UI patterns

How It All Works Together

Here’s how everything flows together when a user interacts with your provider:

1. Tool Registration: Your server registers tools with mcpServer.componentTool()
2. User Request: An AI agent or user calls your tool (e.g., “get current weather for Boston”)
3. Handler Execution: Your tool handler function runs, processes the request, and fetches data
4. Data Return: The handler returns structured data to the MCP protocol
5. UI Rendering: The associated React component receives the data via useFractal()
6. User Interaction: Users can interact with the UI, navigate to other tools, or trigger new requests