Installation

Get InAppAI React installed and running in your project in just a few minutes.

Prerequisites

Node.js 16.x or higher
React 18.x or higher
npm, yarn, or pnpm package manager

Install the Package

Choose your preferred package manager:

npm install @inappai/react
# or
yarn add @inappai/react
# or
pnpm add @inappai/react

Import the Styles

InAppAI React requires its CSS file to be imported. Add this to your main application file (e.g., App.tsx or main.tsx):

import '@inappai/react/styles.css';

Get Your Agent ID

To use InAppAI React, you need an Agent ID from the InAppAI platform:

Sign up at app.inappai.com
Create an agent in your dashboard
Copy your Agent ID - you’ll use this in your component

The Agent ID is a public identifier (similar to Stripe’s publishable key) that connects your frontend to the InAppAI backend.

Basic Setup

Import the component and add it to your app:

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

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

  return (
    <div>
      <h1>My Application</h1>

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

That’s it! The AI chat widget will appear in your application.

Verify Installation

Create a simple test to verify the package is installed correctly:

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

console.log('InAppAI imported successfully:', InAppAI);

If there are no errors, you’re ready to proceed!

TypeScript Support

InAppAI React is written in TypeScript and includes type definitions out of the box. No additional @types packages are needed.

import { InAppAI, Message, Tool, CustomStyles } from '@inappai/react';
// All types are available automatically

Troubleshooting

Module not found error

If you see Cannot find module '@inappai/react':

Ensure the package is installed: npm list @inappai/react
Delete node_modules and reinstall: rm -rf node_modules && npm install
Check your package.json includes the package in dependencies

CSS not loading

If styles aren’t applied:

Verify you’ve imported the CSS: import '@inappai/react/styles.css'
Ensure your bundler supports CSS imports (Vite, Create React App, Next.js all support this by default)
Check browser console for CSS loading errors

Version conflicts

If you have React version conflicts:

npm list react
# Ensure React version is 18.x or higher

Next Steps

Display Modes - Popup, sidebar, panel, embedded layouts
Themes - Built-in themes and styling options
Tools - Add function calling to enable AI actions
Context - Pass application state to the AI
API Reference - Complete props documentation

Documentation