React SDK
Open-source React components for adding AI agents to your application. Fully customizable, TypeScript support.
Add an AI agent to your app with a single React component. No complex setup required.
Learn more →Popup, sidebar, panel, and embedded. Choose how the agent appears in your UI.
Learn more →Light, Dark, Professional, Playful, Minimal, Ocean, and Sunset. Match your brand.
Learn more →Register JavaScript functions as tools. AI calls your code to take action in your app.
Learn more →Quick Start
Install the package and add the component to your app:
npm install @inappai/reactimport { InAppAI } from '@inappai/react';
function App() {
return (
<InAppAI
apiKey=“your-api-key”
displayMode=“popup”
theme=“default”
/>
);
}
That’s it. You now have an AI agent in your application.
Display Modes
Choose how the agent interface appears in your application
Popup
Floating window. Best for help assistants and support.
Sidebar Left
Fixed panel on the left side of your app.
Sidebar Right
Fixed panel on the right side of your app.
Panel Left
Expandable panel from the left edge.
Panel Right
Expandable panel from the right edge.
Embedded
Fills its container. Build custom layouts and fullscreen experiences.
Built-in Themes
Seven pre-built themes to match your brand
Light
Clean and bright
Dark
Easy on the eyes
Professional
Corporate blue tones
Playful
Vibrant and fun
Minimal
Simple and clean
Ocean
Blue and teal palette
Sunset
Warm orange and pink
Custom
Your own CSS variables
Function Calling
Let AI take action in your application by registering tools
Define
Create JavaScript functions that do things in your app
Register
Tell AI what each tool does and its parameters
AI Calls
Based on user intent, AI chooses which tools to use
Execute
Your code runs, returns results to AI
Example: User says "Add a task called 'Review PR'" → AI calls your createTask tool → Task appears in your app.
Ready to Add AI to Your Application?
Join developers building intelligent applications with InAppAI