🚧 Experimental

🤖 React Native Ajora

> [!NOTE]
> Port of CopilotKit
>
> This library is a React Native port of CopilotKit. Most concepts, hooks, and patterns from CopilotKit apply here as well. You can refer to the CopilotKit Documentation for more in-depth conceptual references and runtime configuration details.

---

✨ Features

- 🎨 Beautiful UI Components - Pre-built, customizable chat components with modern design
- 🧠 AI Agent Ready - Built on top of CopilotKit for robust agent interactions
- 🎯 TypeScript Support - Full TypeScript definitions for all components and props
- 🔧 Highly Customizable - Extensive customization options via slots and props
- ⚡ Streaming Support - Real-time message streaming via Server-Sent Events (SSE)
- 🔌 Native Tools - Easy integration of client-side tools with useFrontendTool
- 💡 Smart Suggestions - Context-aware suggestions using useConfigureSuggestions
- 📱 Mobile First - Optimized for mobile interactions with keyboard handling and animations

🚀 Quick Start

$3

``bash
npm install react-native-ajora


or


yarn add react-native-ajora
`

$3

Make sure you have these peer dependencies installed:

`bash
npm install expo @expo/vector-icons react-native-reanimated react-native-keyboard-controller react-native-svg react-native-gesture-handler @gorhom/bottom-sheet expo-document-picker
`

$3

Wrap your application with AjoraProvider and use the AjoraChat component:

`tsx
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { AjoraProvider, AjoraChat } from "react-native-ajora";

const App = () => {
return (
// Initialize the provider with your agent runtime URL


labels={{
chatEmptyStateTitle: "Hello there! 👋",
chatEmptyStateSubtitle:
"I'm your AI assistant. How can I help you today?",
}}
/>


);
};

export default App;
`

📖 API Reference

$3

#### Core Components

- AjoraProvider: The root provider component. Handles connection to the CopilotKit runtime and manages global agent state.
- AjoraChat: The main chat interface component. Includes message list, input area, and suggestions.
- AjoraPopup: A pre-built popup wrapper for the chat interface, useful for "chat bubble" implementations.
- AjoraSidebar: A sidebar wrapper for the chat interface.

#### UI Building Blocks

Can be used individually or passed as custom slots to AjoraChat.

- AjoraChatInput: The text input component with support for attachments and audio recording.
- AjoraChatView: The container view for the chat interface.
- AjoraChatMessageView: Renders a single message bubble (user or assistant).
- AjoraChatUserMessage: Specific component for user messages.
- AjoraChatAssistantMessage: Specific component for assistant messages.
- AjoraChatThinkingIndicator: Animated indicator shown while the agent is processing.
- AjoraChatSuggestionView: Container for suggestion pills.
- AjoraChatSuggestionPill: Individual suggestion button.
- AjoraChatEmptyState: Component shown when there are no messages.
- AjoraChatLoadingState: Component shown while connecting or loading history.

$3

#### Agent Interaction

- useAgent: Hook to interact with a specific agent instance. Returns the agent object and its state.
- useAgentContext: Provides application context to the agent (e.g., current screen, user data).
- useFrontendTool: Defines a client-side tool that the agent can call.
- useMakeCopilotReadable: (Alias for useAgentContext) Makes data readable by the Copilot.
- useCopilotAction: (Alias for useFrontendTool) Defines an action/tool for the Copilot.
- useHumanInTheLoop: Hook to handle human-in-the-loop interactions, allowing the AI to ask for user input or confirmation.

#### UI & Presentation

- useConfigureSuggestions: Configures what kind of suggestions should be generated for the user.
- useSuggestions: Hook to fetch and manage suggestions.
- useRenderToolCall: Customizes how specific tool calls are rendered in the chat stream.
- useRenderActivityMessage: Customizes the rendering of activity/status messages.
- useRenderCustomMessages: Hook for rendering custom message types.
- useKeyboardHeight: Utility hook for handling keyboard height (used internally but exported).

$3

#### AjoraProvider Props

| Prop | Type | Description |
| ------------------- | ------------------------ | ----------------------------------------------------------------------- |
| runtimeUrl | string | The URL of your CopilotKit runtime API. |
| useSingleEndpoint | boolean | Whether to use a single endpoint for all operations (default: false). |
| headers | Record | Custom headers for API requests. |
| renderToolCalls | ToolCallRenderer[] | Custom renderers for tool calls. |
| agentId | string | helper for the default agentID to use |

#### AjoraChat Props

| Prop | Type | Description |
| -------------------- | -------------- | -------------------------------------------------- |
| agentId | string | The ID of the agent to use. |
| threadId | string | The ID of the conversation thread. |
| labels | object | Custom labels for UI elements (empty state, etc.). |
| starterSuggestions | Suggestion[] | Suggestions to show when the chat is empty. |
| chatView | Component | Slot to replace the entire chat view. |
| isLoading | boolean` | helper for if the chat is loading. |

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---