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
- Package and Class Names
// Old
import { RTVIClient } from '@pipecat-ai/client-js';
// New
import { PipecatClient } from '@pipecat-ai/client-js';
- 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';
- 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
});
- 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
}
});
- 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
- Configuration Structure: Connection parameters are now passed to connect() instead of constructor
- Helper System: Removed in favor of direct
PipecatClient
member functions or client-server messaging.
- Component Names: All React components renamed from RTVI prefix to Pipecat prefix
- Hook Names: All React hooks renamed from useRTVI prefix to usePipecat prefix
Migration Steps
- Update package imports to use new names
- Move connection configuration from constructor to connect() method
- Replace any helper classes with corresponding
PipecatClient
methods or custom messaging
- Update React component and hook names
- Update any TypeScript types referencing old names