https://github.com/watadarkstar/react-native-parlant
A React Native library for integrating Parlant AI agents into your React Native, Expo and React applications.
https://github.com/watadarkstar/react-native-parlant
agent ai-agents llm openai parlant react-native react-native-parlant typescript
Last synced: 7 months ago
JSON representation
A React Native library for integrating Parlant AI agents into your React Native, Expo and React applications.
- Host: GitHub
- URL: https://github.com/watadarkstar/react-native-parlant
- Owner: watadarkstar
- License: mit
- Created: 2025-08-20T23:36:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-09-06T01:33:18.000Z (10 months ago)
- Last Synced: 2025-10-11T14:56:42.559Z (9 months ago)
- Topics: agent, ai-agents, llm, openai, parlant, react-native, react-native-parlant, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-parlant
- Size: 1.1 MB
- Stars: 43
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
đŦ React Native Parlant
A React Native library for integrating Parlant AI agents
into your React Native, Expo, and React
applications.
đšī¸ Snack playground
âĸ
đ Watch a demo
đ Need help building your agent? Connect with Adrian on X
## Installation
Yarn:
```bash
yarn add react-native-parlant
```
Npm:
```bash
npm install --save react-native-parlant
```
Expo
```bash
npx expo install react-native-parlant
```
## Quick Start
```tsx
import { SafeAreaView, StyleSheet } from "react-native";
import { useChat } from "react-native-parlant";
import { GiftedChat, IMessage } from "react-native-gifted-chat";
export default function Example() {
const { messages, sendMessage, isTyping, isLoading } = useChat({
agentId: "agent-id",
api: "http://localhost:8800",
});
const onSend = (messages: IMessage[]) => {
const userMessage = messages[0]?.text || "";
sendMessage(userMessage);
};
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
},
textInput: {
flex: 1,
marginHorizontal: 10,
paddingVertical: 12,
paddingHorizontal: 16,
},
});
```
## API Reference
### `useChat(props: Props)`
The main hook for managing chat sessions with Parlant AI agents.
#### Props
| Prop | Type | Required | Default | Description |
| ----------------- | ------------------------ | -------- | ----------------------- | ------------------------------------- |
| `agentId` | `string` | â
| - | The ID of the Parlant AI agent |
| `api` | `string` | â
| `http://localhost:8800` | The Parlant API endpoint |
| `initialMessages` | `IMessage[]` | â | `[]` | Initial messages to populate the chat |
| `moderation` | `string` | â | `"auto"` | Moderation setting for messages |
| `customerId` | `string` | â | `"guest"` | Unique identifier for the customer |
| `title` | `string` | â | `"New Conversation"` | Title for the chat session |
| `maxRetries` | `number` | â | `3` | Maximum retries for message fetching |
| `headers` | `Record` | â | `{}` | Custom headers for API requests |
| `aiAvatar` | `string` | â | `""` | Avatar URL for AI agent messages |
#### Returns
| Property | Type | Description |
| ------------- | -------------------------------------------- | ------------------------------------- |
| `messages` | `IMessage[]` | Array of chat messages |
| `sendMessage` | `(message: string) => Promise` | Function to send a message |
| `isLoading` | `boolean` | Whether a message is being sent |
| `isTyping` | `boolean` | Whether the agent is currently typing |
### `append(currentMessages, newMessages, inverted?)`
Utility function for appending messages to the chat.
#### Parameters
- `currentMessages` (`TMessage[]`) - Existing messages array
- `newMessages` (`TMessage[]`) - New messages to append
- `inverted` (`boolean`, default: `true`) - Whether to prepend (true) or append (false) messages
## Types
### `IMessage`
```typescript
interface IMessage {
_id: string | number;
text: string;
createdAt: Date | number;
user: {
_id: string | number;
name?: string;
avatar?: string | number | renderFunction;
};
image?: string;
video?: string;
audio?: string;
system?: boolean;
sent?: boolean;
received?: boolean;
pending?: boolean;
quickReplies?: QuickReplies;
}
```
### `MessageEvent`
```typescript
interface MessageEvent {
id: string;
source: string;
kind: "message" | "status";
offset: number;
creation_utc: string;
correlation_id: string;
data: {
message: string;
participant: {
id: string;
display_name: string;
};
flagged: boolean;
tags: string[];
status?: "typing" | "ready";
};
deleted: boolean;
}
```
### `Session`
```typescript
interface Session {
id: string;
agent_id: string;
customer_id: string;
creation_utc: string;
title: string;
mode: string;
consumption_offsets: {
client: number;
};
}
```
## Features
- đ¤ **Real-time AI Chat** - Connect to Parlant AI agents with real-time messaging
- đą **Cross-Platform** - Works with React Native, Expo, and React applications
- đ **Auto-Reconnection** - Automatic retry logic for robust connections
- đ¯ **TypeScript Support** - Full TypeScript definitions included
- đž **Session Management** - Automatic session creation and management
- đ **Content Moderation** - Built-in support for message moderation
- ⥠**Long Polling** - Efficient real-time message fetching
- đ¨ **Customizable** - Flexible message and user interface customization
## Advanced Usage
### Custom Headers
```tsx
const { messages, sendMessage } = useChat({
agentId: "your-agent-id",
api: "https://your-api.com",
headers: {
Authorization: "Bearer your-token",
"X-Custom-Header": "custom-value",
},
});
```
### Initial Messages
```tsx
const initialMessages: IMessage[] = [
{
_id: 1,
text: "Hello! How can I help you today?",
createdAt: new Date(),
user: {
_id: 2,
name: "AI Assistant",
avatar: "https://example.com/avatar.png",
},
},
];
const { messages, sendMessage } = useChat({
agentId: "your-agent-id",
api: "https://your-api.com",
initialMessages,
});
```
### Error Handling
```tsx
const handleSendMessage = async (text: string) => {
try {
await sendMessage(text);
} catch (error) {
if (error.message === "Failed to send message") {
// Handle send failure
console.error("Message failed to send");
} else if (error.message === "Failed to create session") {
// Handle session creation failure
console.error("Could not establish chat session");
}
}
};
```
## Requirements
- React 16.8+ (for hooks support)
- TypeScript 4.0+ (optional but recommended)
## License
MIT
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Support
For questions and support, please contact [Adrian](https://x.com/icookandcode) on X or open an issue on GitHub.
---
**Ready to build AI agents that actually work?**
â **Star this repo** âĸ đŦ **[Contact Adrian to Build It](https://x.com/icookandcode)**
_Built with â¤ī¸ by [Adrian](https://x.com/icookandcode)_
---
**Keywords:** react-native, react, parlant, ai, agent, chat, conversation, typescript, react-native-parlant