Getting Started with InAppAI

Add intelligent AI chat to your React application in just a few minutes. This guide will walk you through installation, backend setup, and your first integration.

Overview

InAppAI consists of two components:

React Component - Frontend chat interface (installed via NPM)
Backend Service - Handles AI requests securely (sign up for hosted service)

Your React App  →  InAppAI Component  →  Backend Service  →  AI Providers
                                                              (OpenAI, Anthropic, Google)

Prerequisites

Before installing InAppAI React, ensure you have:

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

Step 1: Install the React Component

Choose your preferred package manager:

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

Import the required styles in your main application file (e.g., App.tsx or main.tsx):

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

The backend handles AI API calls securely (your API keys are never exposed to the browser).

Go to app.inappai.com
Sign up for a free account
Create a subscription
Copy your Agent ID

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

Step 3: Add to Your React App

InAppAI uses controlled mode - you manage the conversation state:

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}
        theme="light"
      />
    </div>
  );
}

export default App;

Why controlled mode?

Full control over message persistence
Implement custom storage (localStorage, database, etc.)
Easy to debug and test
No hidden state

Step 4: Test Your Integration

Start your development server (npm run dev)
Click the AI chat button (bottom-right corner)
Try asking: “What can you help me with?”

That’s it! You now have AI chat in your application.

Complete Example

Here’s the complete code for a minimal working example:

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

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

  return (
    <div className="app">
      <header>
        <h1>My Awesome App</h1>
      </header>

      <main>
        <p>Welcome! Click the chat button to talk to our AI assistant.</p>
      </main>

      <InAppAI
        agentId="your-agent-id"
        messages={messages}
        onMessagesChange={setMessages}
        position="bottom-right"
        theme="light"
      />
    </div>
  );
}

export default App;

Common Customizations

Change Position

<InAppAI
  position="bottom-left"  // or top-right, top-left
  // ... other props
/>

Use Dark Theme

<InAppAI
  theme="dark"
  // ... other props
/>

Change Button Icon and Title

<InAppAI
  customStyles={{
    buttonIcon: '💬',
    headerTitle: 'Support Chat',
  }}
  // ... other props
/>

Next Steps

Understand Core Concepts

Agents - What are AI agents and how they work
Context - How agents understand your application
Tools - Enable agents to take actions

Customize the React Component

Display Modes - Popup, sidebar, panel, embedded layouts
Themes - Built-in themes and custom styling
Customization - Advanced styling techniques
Context - Give agents knowledge about your app
Tools - Let agents execute actions
Persistence - Save and restore conversations

Configure Your Backend

Backend Settings - AI provider, model selection, authentication
Knowledge Base - Add custom documentation for better responses

Reference

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

Need Help?

Troubleshooting - Common issues and solutions
GitHub - Source code and issues
Live Demo - Interactive examples
Contact: Contact Us

Common Issues

CORS Error

Make sure to add your domain to allowed origins in your subscription settings on the dashboard.

“Invalid Agent ID”

Double-check your Agent ID in the dashboard.

Chat button not appearing

Check that you’ve imported the CSS: import '@inappai/react/styles.css'
Verify your Agent ID is correct
Check browser console for errors

No Response from AI

Check your subscription status and usage limits in the dashboard.

TypeScript errors

If you see type errors with messages:

import { Message } from '@inappai/react';

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

Documentation