React Components

Beautiful, customizable AI chat component for React applications. Open source and available on GitHub.

Quick Links

Guides

Installation - Install the package and basic setup
Display Modes - Popup, sidebar, panel, embedded layouts
Themes - Built-in themes and custom styling
Customization - Advanced styling techniques
Context - Pass application state to AI
Tools - Enable function calling
Persistence - Save and restore conversations
Message Handling - Handle message events and analytics
Authentication - JWT authentication

Reference

API Reference - Complete props and types documentation
Advanced Topics - Architecture, performance, security

Overview

The InAppAI React component provides a complete AI chat interface that you can drop into any React application. Built with TypeScript and designed for flexibility, it offers multiple display modes, customizable themes, and powerful features like function calling and context awareness.

Whether you’re building a customer support chatbot, a documentation assistant, or an AI copilot for your application, InAppAI React provides the components and tools you need to create engaging conversational experiences.

Key Features

Multiple display modes - Popup, sidebar, panel, embedded
7 built-in themes - Light, dark, professional, playful, minimal, ocean, sunset
Function calling - Enable AI to execute actions in your app
Fully responsive - Works on desktop, tablet, and mobile
Secure by default - API key protection and origin allowlist
TypeScript support - Complete type definitions included

Installation

npm install @inappai/react

import { useState } from 'react';
import { InAppAI, Message } from '@inappai/react';
import '@inappai/react/styles.css';

function App() {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <InAppAI
      agentId="your-agent-id"
      messages={messages}
      onMessagesChange={setMessages}
    />
  );
}

Next Steps

Installation - Complete setup guide with TypeScript
Display Modes - Choose the right layout for your app
Themes - Customize appearance to match your brand
Tools - Let AI perform actions in your application

Documentation