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';

​
2. 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';

​
3. 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
});

​
4. Connection Method

Previously, connect() was called on the client instance without parameters. Now, you provide connection parameters directly to the connect() method. This allows for more flexibility and customization of the connection process. For ease of use, we’ve also introduced a startBot() and startBotAndConnect() method where you can provide an API endpoint that returns the connection parameters. Old 
await client.connect();
New There are three options for connecting now. For migration purposes, you are likely to use option 3 (startBotAndConnect()):
  1. Direct Connection: Provide the connection details directly to connect().
const cxnDetails = {
  url: 'https://your-daily-room-url',
  token: 'your-daily-token'
};
await client.connect(cxnDetails);
  1. Using startBot(): Fetch connection details from an API endpoint and pass them to connect().
let cxnDetails = await client.startBot({
  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
  }
});
cxnDetails = modifyCxnDetails(cxnDetails); // Modify if needed
await client.connect(cxnDetails);
  1. Using startBotAndConnect(): Fetch connection details and connect in one step.
await client.startBotAndConnect({
  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
  }
});

​
5. 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 startBot()/startBotAndConnect()/connect() methods
  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