Skip to Content
Consumer SdkConsumer Overview

Consumer Overview

What is a Consumer?

As a Consumer in the Fractal ecosystem, you’re building a user-facing chat application that connects to Fractal’s MCP proxy to display rich UI components. Instead of traditional text-only chat responses, your users will see interactive weather cards, charts, forms, and other visual components.

Core Consumer Libraries

@fractal-mcp/client

The main client library for connecting to Fractal’s MCP proxy and accessing the tool registry.

Key Features:

  • Connect to Fractal’s MCP proxy
  • Search and discover available tools
  • Authenticate with consumer API keys
  • Manage tool registry access

Usage:

import { FractalSDK } from '@fractal-mcp/client';
 
const fractalClient = new FractalSDK({ 
  apiKey: process.env.FRACTAL_CONSUMER_KEY! 
});
await fractalClient.connect();

@fractal-mcp/render

Handles rendering of Fractal components in your React application.

Key Features:

  • Render interactive UI components from MCP responses
  • Handle component events and user interactions
  • Convert tool invocations to React components
  • Manage component lifecycle

Usage:

import { renderLayoutAsComponent, FractalFrameEvent } from '@fractal-mcp/render';
 
// Render components from tool invocations
const component = renderLayoutAsComponent(toolInvocation, handleFrameEvent);
 
// Handle events from interactive components
const handleFrameEvent = useCallback((event: FractalFrameEvent) => {
  append({
    role: 'data',
    content: JSON.stringify(event),
  })
}, [append]);

@fractal-mcp/vercel-connector

Specialized connector for integrating with Vercel AI SDK and handling streaming responses.

Key Features:

  • Seamless integration with Vercel AI SDK
  • Stream handling for real-time responses
  • Message processing and cleanup
  • Event handling for component interactions

Usage:

import { FractalVercel, cleanMessages } from '@fractal-mcp/vercel-connector';
 
const fractalVercel = new FractalVercel(fractalClient);
const tools = await fractalVercel.getTools();
 
// Handle data messages from component events
const wasHandled = await fractalVercel.handleDataMessage(messages, res);

Key Concepts

Component Rendering

Fractal components are rendered using the renderLayoutAsComponent function from @fractal-mcp/render. This function takes tool invocations and converts them into React components.

Event Handling

Interactive components can trigger events that are handled by your handleFrameEvent callback. These events are sent back to the server as data messages.

Message Processing

The cleanMessages function from @fractal-mcp/vercel-connector processes messages to handle component events and tool calls properly.

Tool Integration

Tools are automatically discovered and made available through the FractalVercel.getTools() method, which integrates seamlessly with the Vercel AI SDK.

Quick Start Guide