@personaai/react-native

Customizable, React Native & Expo UI components for the Persona AI agent runtime.

Requires @personaai/react ^0.3.5, react >= 18, and react-native >= 0.72.

📦 Installation

npm install @personaai/react-native @personaai/react
# or
pnpm add @personaai/react-native @personaai/react
# or
npx expo install @personaai/react-native @personaai/react

🚀 Quickstart (Expo / React Native)

import React from 'react';
import { View } from 'react-native';
import { PersonaProvider } from '@personaai/react';
import { PersonaChatView } from '@personaai/react-native';

export default function App() {
  return (
    <PersonaProvider
      baseUrl="https://api.yourdomain.com/api/persona"
      getAuthToken={async () => 'your_jwt_token'}
      defaultAgentId="your-agent-id"
    >
      <View style={{ flex: 1 }}>
        <PersonaChatView
          agentId="your-agent-id"
          title="Financial Copilot"
          greeting="How can I assist you with your finances today?"
          starterPrompts={[
            { title: 'Safe-to-Spend', prompt: 'What is my safe-to-spend runway for this week?', icon: '🛡️' },
            { title: 'Top Expenses', prompt: 'Analyze my spending categories this month.', icon: '📊' },
          ]}
        />
      </View>
    </PersonaProvider>
  );
}

🧩 Components Reference

| Component | Purpose | | :--- | :--- | | PersonaChatView | Full-screen React Native chat layout with safe-area handling, thread history modal, message list, and composer. | | PersonaMessageFeed | Optimized FlatList rendering message bubbles, starter prompts, tool traces, and streaming status. | | PersonaComposer | Multiline auto-expanding TextInput with stop/send states, and keyboard avoiding layout. | | PersonaMarkdown | Zero-DOM native markdown renderer for headings, lists, bold/italic, blockquotes, and code blocks. | | PersonaToolTrace | Collapsible cards displaying agent tool executions, parameters, and statuses. | | PersonaInterruptCard | Interactive Human-in-the-Loop (HITL) card for instant tool approval or rejection. |

🎨 Theming

You can customize colors across the entire UI:

<PersonaChatView
  agentId="your-agent-id"
  theme={{
    primaryColor: '#6366f1',
    backgroundColor: '#ffffff',
    cardBackgroundColor: '#f9fafb',
    textColor: '#111827',
    mutedTextColor: '#6b7280',
    borderColor: '#e5e7eb',
    userMessageBg: '#6366f1',
    userMessageText: '#ffffff',
    assistantMessageBg: '#f3f4f6',
    assistantMessageText: '#111827',
    inputBg: '#f3f4f6',
    inputBorder: '#e5e7eb',
    inputText: '#111827',
  }}
/>

📄 License

MIT © Hasan Raiyan