{/* Connection UI */}
{/* Media Components */}
{/* Debug/Transcript Display */}
);
}
Check out the [example repository](https://github.com/pipecat-ai/pipecat/tree/main/examples/simple-chatbot)
for a complete client implementation with styling and error handling.
[](#running-the-application)
Running the Application
--------------------------------------------------------
From the `simple-chatbot` directory, start the server and client to test the chatbot:
###
[](#1-start-the-server)
1\. Start the Server
In one terminal:
python server/server.py
###
[](#2-start-the-client)
2\. Start the Client
In another terminal:
cd examples/react
npm install
npm run dev
###
[](#3-testing-the-connection)
3\. Testing the Connection
1. Open `http://localhost:5173` in your browser
2. Click “Connect” to join a room
3. Allow microphone access when prompted
4. Start talking with your AI assistant
Troubleshooting:
* Check that all API keys are properly configured in .env
* Grant your browser access to your microphone, so it can receive your audio input
* Verify WebRTC ports aren’t blocked by firewalls
[](#next-steps)
Next Steps
------------------------------
Now that you have a working chatbot, consider these enhancements:
* Add custom avatar animations
* Implement [function calling](/guides/features/function-calling)
for external integrations
* Add support for multiple languages
* Enhance error recovery and reconnection logic
###
[](#examples)
Examples
[Foundational Example\
--------------------\
\
A basic implementation demonstrating core Gemini Multimodal Live features and transcription capabilities](https://github.com/pipecat-ai/pipecat/blob/main/examples/foundational/26a-gemini-multimodal-live-transcription.py)
[Simple Chatbot\
--------------\
\
A complete client/server implementation showing how to build a Pipecat JS or React client that connects to a Gemini Live Pipecat bot](https://github.com/pipecat-ai/pipecat/tree/main/examples/simple-chatbot)
###
[](#learn-more)
Learn More
* [Gemini Multimodal Live API Reference](/server/services/s2s/gemini)
* [RTVI React SDK Documentation](https://docs.pipecat.ai/client/react/introduction)
[OpenAI Audio Models and APIs](/guides/features/openai-audio-models-and-apis)
[Function Calling](/guides/features/function-calling)
On this page
* [What We’ll Build](#what-we%E2%80%99ll-build)
* [Key Concepts](#key-concepts)
* [Understanding Pipelines](#understanding-pipelines)
* [Processors](#processors)
* [Gemini Integration](#gemini-integration)
* [Prerequisites](#prerequisites)
* [Server Implementation](#server-implementation)
* [Environment Setup](#environment-setup)
* [Server Setup (server.py)](#server-setup-server-py)
* [Creating Meeting Room](#creating-meeting-room)
* [Managing Bot Instances](#managing-bot-instances)
* [Connection Endpoints](#connection-endpoints)
* [Bot Implementation (bot-gemini.py)](#bot-implementation-bot-gemini-py)
* [Transport Setup](#transport-setup)
* [Gemini Service Configuration](#gemini-service-configuration)
* [Conversation Context](#conversation-context)
* [Processor Setup](#processor-setup)
* [Pipeline Assembly](#pipeline-assembly)
* [Client Implementation](#client-implementation)
* [Connection Setup](#connection-setup)
* [Media Handling](#media-handling)
* [Real-time Events](#real-time-events)
* [Complete Example](#complete-example)
* [Running the Application](#running-the-application)
* [1\. Start the Server](#1-start-the-server)
* [2\. Start the Client](#2-start-the-client)
* [3\. Testing the Connection](#3-testing-the-connection)
* [Next Steps](#next-steps)
* [Examples](#examples)
* [Learn More](#learn-more)
---
# SDK Introduction - Pipecat
[Pipecat home page](/)
Search or ask...
Search...
Navigation
React Native SDK
SDK Introduction
[Getting Started](/getting-started/overview)
[Guides](/guides/introduction)
[Server APIs](/server/introduction)
[Client SDKs](/client/introduction)
The Pipecat React Native SDK leverages the [Pipecat JavaScript SDK](/client/js/introduction)
to provide seamless integration for React Native applications. Since the JavaScript SDK is designed to work across both web and React Native platforms, the core functionalities remain the same:
* Device and media stream management
* Managing bot configuration
* Sending actions to the bot
* Handling bot messages and responses
* Managing session state and errors
The primary difference lies in the transport layer, which is tailored to support the unique requirements of the React Native environment.
For example, when using the SDK with React Native, you would install `RNDailyTransport` instead of `DailyTransport`.
[](#installation)
Installation
----------------------------------
Install the SDK and a transport implementation (e.g. Daily for WebRTC):
npm i @pipecat-ai/react-native-daily-transport
npm i @daily-co/react-native-daily-js@^0.70.0
npm i @daily-co/react-native-webrtc@^118.0.3-daily.2
npm i @react-native-async-storage/async-storage@^1.23.1
npm i react-native-background-timer@^2.4.1
npm i react-native-get-random-values@^1.11.0
Installing `@pipecat-ai/react-native-daily-transport` automatically includes the corresponding version of the JavaScript SDK.
If you are using Expo, you will also need to add the following dependencies:
npm i @config-plugins/react-native-webrtc@^10.0.0
npm i @daily-co/config-plugin-rn-daily-js@0.0.7
[](#requirements)
Requirements
----------------------------------
This package introduces some constraints on what OS/SDK versions your project can support:
* iOS: Deployment target >= 13
* Android: `minSdkVersion` >= 24
[](#quick-start)
Quick start
--------------------------------
Here’s a simple example using Daily as the transport layer:
import { RNDailyTransport } from '@pipecat-ai/react-native-daily-transport';
import { RTVIClient } from '@pipecat-ai/client-js';
// Create and configure the client
let voiceClient = new RTVIClient({
params: {
baseUrl: process.env.PIPECAT_API_URL || "/api",
},
transport: new RNDailyTransport(),
enableMic: true
});
// Connect to your bot
await voiceClient.connect();
> You can find a basic working example [here](https://github.com/pipecat-ai/pipecat-client-react-native-daily-transport/tree/main/example)
> and a more comprehensive example [here](https://github.com/daily-demos/daily-bots-react-native-demo/)
> .
[](#explore-the-sdk)
Explore the SDK
----------------------------------------
The Pipecat React Native SDK leverages the Pipecat JavaScript SDK for seamless integration with React Native applications. For detailed information, refer to our JavaScript documentation.
> Just ensure you use the appropriate transport layer for React Native.
[Client Constructor\
------------------\
\
Configure your client instance with transport and callbacks](/client/js/api-reference/client-constructor)
[Client Methods\
--------------\
\
Core methods for interacting with your bot](/client/js/api-reference/client-methods)
[API Reference\
-------------\
\
Detailed documentation of all available APIs](/client/js/api-reference)
[Helpers\
-------\
\
Utility functions for common operations](/client/js/helpers)
[Hooks](/client/react/hooks)
[API Reference](/client/react-native/api-reference)
On this page
* [Installation](#installation)
* [Requirements](#requirements)
* [Quick start](#quick-start)
* [Explore the SDK](#explore-the-sdk)
---
# Metrics - Pipecat
[Pipecat home page](/)
Search or ask...
Search...
Navigation
Features
Metrics
[Getting Started](/getting-started/overview)
[Guides](/guides/introduction)
[Server APIs](/server/introduction)
[Client SDKs](/client/introduction)
When developing real-time, multimodal AI applications, monitoring two key factors is crucial: performance (latency) and LLM/TTS usage. Performance impacts user experience, while usage can affect operational costs. Pipecat offers built-in metrics for both, which can be enabled with straightforward configuration options.
[](#enabling-performance-metrics)
Enabling performance metrics
------------------------------------------------------------------
Set `enable_metrics=True` in `PipelineParams` when creating a task:
Example config
task = PipelineTask(
pipeline,
params=PipelineParams(
...
enable_metrics=True,
...
),
)
Once enabled, Pipecat logs the following metrics:
| Metric | Description |
| --- | --- |
| TTFB | Time To First Byte in seconds |
| Processing Time | Time taken by the service to respond in seconds |
Sample output
AnthropicLLMService#0 TTFB: 0.8378312587738037
CartesiaTTSService#0 processing time: 0.0005071163177490234
CartesiaTTSService#0 TTFB: 0.17177796363830566
AnthropicLLMService#0 processing time: 2.4927797317504883
###
[](#limiting-ttfb-responses)
Limiting TTFB responses
If you only want the **first** TTFB measurement for each service, you can optionally pass `report_only_initial_ttfb=True` in `PipelineParams`:
Example config
task = PipelineTask(
pipeline,
params=PipelineParams(
...
enable_metrics=True,
report_only_initial_ttfb=True,
...
),
)
> **Note:** `enable_metrics=True` is required for this setting to have an effect.
[](#enabling-llm%2Ftts-usage-metrics)
Enabling LLM/TTS Usage Metrics
========================================================================
Set `enable_usage_metrics=True` in PipelineParams when creating a task:
Example config
task = PipelineTask(
pipeline,
params=PipelineParams(
...
enable_usage_metrics=True,
...
),
)
Pipecat will log the following as applicable:
| Metric | Description |
| --- | --- |
| LLM Usage | Number of prompt and completion tokens used |
| TTS Usage | Number of characters processed |
Sample output
CartesiaTTSService#0 usage characters: 65
AnthropicLLMService#0 prompt tokens: 104, completion tokens: 53
> **Note:** Usage metrics are recorded per interaction and do not represent running totals.
[Function Calling](/guides/features/function-calling)
[Noise cancellation with Krisp](/guides/features/krisp)
On this page
* [Enabling performance metrics](#enabling-performance-metrics)
* [Limiting TTFB responses](#limiting-ttfb-responses)
* [Enabling LLM/TTS Usage Metrics](#enabling-llm%2Ftts-usage-metrics)
---
# SDK Introduction - Pipecat
[Pipecat home page](/)
Search or ask...
Search...
Navigation
React SDK
SDK Introduction
[Getting Started](/getting-started/overview)
[Guides](/guides/introduction)
[Server APIs](/server/introduction)
[Client SDKs](/client/introduction)
The Pipecat React SDK provides React-specific components and hooks for building voice and multimodal AI applications. It wraps the core JavaScript SDK functionality in an idiomatic React interface that handles:
* React context for client state management
* Components for audio and video rendering
* Hooks for accessing client functionality
* Media device management
* Event handling through hooks
[](#installation)
Installation
----------------------------------
Install the SDK, core client, and a transport implementation (e.g. Daily for WebRTC):
npm install @pipecat-ai/client-js
npm install @pipecat-ai/client-react
npm install @pipecat-ai/daily-transport
[](#example)
Example
------------------------
Here’s a simple example using Daily as the transport layer:
import { RTVIClient } from "@pipecat-ai/client-js";
import {
RTVIClientProvider,
RTVIClientAudio,
useRTVIClient,
} from "@pipecat-ai/client-react";
import { DailyTransport } from "@pipecat-ai/daily-transport";
// Create the client instance
const client = new RTVIClient({
params: {
baseUrl: process.env.PIPECAT_API_URL || "/api",
endpoint: {
connect: "/connect",
},
},
transport: new DailyTransport(),
enableMic: true,
});
// Root component wraps the app with the provider
function App() {
return (