How It Works
Overview React SDK Cloud Backend
Documentation Pricing Blog GitHub
Sign in Get Started

Documentation

Backend Settings

Configure your InAppAI backend at app.inappai.com to control AI behavior, authentication, and API access.

Dashboard Overview

Log in to app.inappai.com to access your subscription dashboard:

  1. Subscription Details - Your Agent ID, plan, and usage
  2. Settings - Configure AI provider, model, and authentication
  3. Knowledge Base - Add URLs for RAG (Retrieval Augmented Generation)
  4. Usage - Monitor request counts and billing period status
  5. Billing - Manage payment method and subscription plan

Getting Your Agent ID

Your Agent ID is required for the React component:

  1. Go to app.inappai.com
  2. Sign in or create an account
  3. Create a subscription
  4. Copy your Agent ID from the dashboard

Use it in your React app:

<InAppAI
  agentId="your-agent-id"  // Your Agent ID from the dashboard
/>

AI Provider and Model Selection

Choose which AI provider and model to use for your chat assistant.

Supported Providers

InAppAI supports three major AI providers:

  • OpenAI - GPT models
  • Anthropic - Claude models
  • Google - Gemini models

Available models are shown in the dashboard and updated regularly.

Selecting Your Model

  1. Navigate to Settings in your dashboard
  2. Choose AI Provider (OpenAI, Anthropic, or Google)
  3. Select Model from available options
  4. Click Save

Changes take effect immediately for all new chat requests.

CORS Configuration

Configure which domains can access your backend API.

Allowed Origins

Add your website domains to the Allowed Origins list:

  1. Go to Settings → CORS
  2. Add your domain (e.g., https://yourdomain.com)
  3. For development, add http://localhost:3000 (or your dev port)
  4. Click Save

Example:

https://myapp.com
https://www.myapp.com
http://localhost:3000
http://localhost:5173

Important: Do NOT use wildcards (*) in production. Always specify exact domains.

Testing CORS

If you see CORS errors in the browser console:

  1. Check that your domain is in the Allowed Origins list
  2. Ensure the domain matches exactly (including https:// vs http://)
  3. Verify there are no trailing slashes
  4. Check browser console for the exact origin being sent

JWT Authentication (Optional)

Add an extra layer of security by requiring JWT tokens from your users.

When to Use JWT

Use JWT authentication if:

  • You have user accounts in your application
  • You want to identify which user is chatting
  • You need to enforce per-user rate limits
  • You want to personalize responses based on user identity

Skip JWT if: You’re building a public website or don’t have user authentication.

JWT Setup

  1. Generate a secret key in your backend:

    openssl rand -base64 32

  2. Configure JWT in dashboard:

    • Go to Settings → Authentication
    • Select JWT as authentication method
    • Enter your JWT Secret (used to sign tokens)
    • Click Save

  3. Sign JWT tokens in your backend:

    // Node.js example
const jwt = require('jsonwebtoken');

const token = jwt.sign(
  {
    userId: user.id,
    email: user.email,
    // Add any custom claims
  },
  process.env.JWT_SECRET,
  { expiresIn: '1h' }
);

  4. Pass JWT to React component:

    <InAppAI
  agentId="your-agent-id"
  jwtToken={userJwtToken}  // Pass the signed JWT
/>

JWT Token Claims

Your JWT token can include:

  • userId - User identifier
  • email - User email
  • name - User display name
  • role - User role (admin, user, etc.)
  • Custom claims specific to your application

Example JWT payload:

{
  "userId": "user_123",
  "email": "alice@example.com",
  "name": "Alice Chen",
  "role": "admin",
  "iat": 1703001234,
  "exp": 1703004834
}

Rate Limiting

InAppAI automatically rate limits requests to prevent abuse.

Default Limits

  • Per subscription: 60 requests per minute
  • Per IP address: 30 requests per minute (for public APIs)

How It Works

When rate limits are exceeded:

  1. Request returns 429 Too Many Requests status
  2. Response includes Retry-After header
  3. React component shows “Too many requests” message

Best Practices

  • Implement request debouncing in your UI
  • Show loading states to prevent duplicate requests
  • Handle 429 errors gracefully in your application

Usage Tracking and Limits

Monitor your subscription usage and billing.

Usage Metrics

View in Usage dashboard:

  • Requests this period: Current billing period request count
  • Limit: Total requests allowed per month
  • Usage percentage: How much of your quota is used
  • Resets on: Next billing period start date

Usage Alerts

InAppAI sends email alerts at:

  • 50% usage - Halfway through your quota
  • 75% usage - Three-quarters used
  • 90% usage - Approaching limit
  • 100% usage - Quota exhausted

What Happens at 100% Usage

When you reach your request limit:

  1. API returns 402 Payment Required status
  2. React component shows upgrade message
  3. No additional requests are processed until:
    • Billing period resets, or
    • You upgrade to a higher plan

Checking Usage Programmatically

You can’t currently check usage via API. Monitor the dashboard or wait for email alerts.

Subscription Plans

Developer Plan (Free)

  • Requests: 1,000/month
  • Knowledge Base: 10 KB URLs
  • Support: Community support

Startup Plan ($89/month)

  • Requests: 50,000/month
  • Knowledge Base: 100 KB URLs
  • Support: Email support

ScaleUp Plan ($299/month)

  • Requests: 300,000/month
  • Knowledge Base: 200 KB URLs
  • Support: Priority email support

View detailed pricing →

Changing Plans

To upgrade or downgrade:

  1. Go to Billing → Change Plan
  2. Select new plan
  3. Confirm change

Upgrades: Take effect immediately, prorated billing Downgrades: Take effect at next billing period

Cancellation

To cancel your subscription:

  1. Go to Billing → Cancel Subscription
  2. Confirm cancellation
  3. Access continues until end of current billing period

Testing Your Configuration

Test Chat Endpoint

Use curl to test your backend:

curl -X POST https://app.inappai.com/api/your-agent-id/chat \
  -H "Content-Type: application/json" \
  -d '{
    "messages": [
      {
        "role": "user",
        "content": "Hello, can you hear me?"
      }
    ]
  }'

Expected response:

{
  "role": "assistant",
  "content": "Yes, I can hear you! How can I help you today?"
}

Test with JWT

If using JWT authentication:

curl -X POST https://app.inappai.com/api/your-agent-id/chat \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_JWT_TOKEN" \
  -d '{
    "messages": [
      {
        "role": "user",
        "content": "Hello"
      }
    ]
  }'

Test Health Endpoint

Check if your subscription is active:

curl https://app.inappai.com/api/your-agent-id/health

Expected response:

{
  "status": "ok",
  "subscription": "your-agent-id"
}

Troubleshooting

“Invalid Agent ID” Error

Problem: React component shows “Invalid Agent ID”

Solution:

  1. Copy Agent ID from the dashboard (Subscription Details section)
  2. Use the exact ID without modification
  3. Check for typos or extra spaces
  4. Verify subscription is active (not cancelled)

CORS Error

Problem: Browser console shows “CORS policy” error

Solution:

  1. Add your domain to Allowed Origins in dashboard
  2. Include protocol (https://) and exact domain
  3. For development, add http://localhost:PORT
  4. Clear browser cache and reload

“Payment Required” Error

Problem: API returns 402 status code

Solution:

  1. Check usage in dashboard
  2. Wait for billing period to reset, or
  3. Upgrade to a higher plan

Rate Limit Error

Problem: API returns 429 status code

Solution:

  1. Wait 60 seconds before retrying
  2. Check for request loops or duplicate calls
  3. Implement request debouncing in your UI

Next Steps

Need Help?