This guide covers migrating from RTVIClient to the new PipecatClient in a React application. The new client introduces simplified configuration and improved client-server messaging. For an overview of the changes, see the top-level RTVIClient Migration Guide.

​
Key Changes

  1. Package and Class Names
// Old
import { RTVIClient } from '@pipecat-ai/client-js';

// New
import { PipecatClient } from '@pipecat-ai/client-js';
  1. React Components and Hooks
// Old
import { 
  RTVIClientProvider,
  RTVIClientAudio,
  RTVIClientVideo,
  useRTVIClient,
  useRTVIClientTransportState
} from '@pipecat-ai/client-react';

// New
import {
  PipecatClientProvider,
  PipecatClientAudio,
  PipecatClientVideo,
  usePipecatClient,
  usePipecatClientTransportState
} from '@pipecat-ai/client-react';
  1. Client and Transport Configuration
// Old
const transport = new DailyTransport();
const client = new RTVIClient({
  transport,
  params: {
    baseUrl: 'http://localhost:7860',
    endpoints: {
      connect: '/connect'
    }
  }
});

// New
const client = new PipecatClient({
  transport: new DailyTransport(),
  // Connection params moved to connect() call
});
  1. Connection Method
// Old
await client.connect();

// New
await client.connect({
  endpoint: 'http://localhost:7860/connect',
  requestData: {
    // Any custom data your /connect endpoint requires
    llm_provider: 'openai',
    initial_prompt: "You are a pirate captain",
    // Any additional data
  }
});
  1. Function Call Handling
// Old
let llmHelper = new LLMHelper({});
llmHelper.handleFunctionCall(async (data) => {
  return await this.handleFunctionCall(data.functionName, data.arguments);
});
client.registerHelper('openai', llmHelper);

// New
client.registerFunctionCallHandler('functionName', async (data) => {
  // Handle function call
  return result;
});

​
Breaking Changes

  1. Configuration Structure: Connection parameters are now passed to connect() instead of constructor
  2. Helper System: Removed in favor of direct PipecatClient member functions or client-server messaging.
  3. Component Names: All React components renamed from RTVI prefix to Pipecat prefix
  4. Hook Names: All React hooks renamed from useRTVI prefix to usePipecat prefix

​
Migration Steps

  1. Update package imports to use new names
  2. Move connection configuration from constructor to connect() method
  3. Replace any helper classes with corresponding PipecatClient methods or custom messaging
  4. Update React component and hook names
  5. Update any TypeScript types referencing old names