Back to Blog
⚛️ React Integration

How to Integrate AI Chatbot with React

Complete step-by-step guide to add Nexus AI chatbot to your React application. Includes code snippets, hooks, theming, and best practices.

📅 July 18, 2026 ⏱️ 6 min read 👤 By Kaif Ansari

⚡ Quick Start: Add Nexus AI to your React app in 4 steps. Copy the component below, add your API key, and you're done. No complex setup required.

Why Add AI to Your React App?

AI chatbots are transforming how users interact with websites. By adding an AI assistant to your React application, you can:

Prerequisites

Step-by-Step Integration

1

Get Your Nexus API Key

Sign in to the Nexus Dashboard. In the Nexus Keys tab, click "New Key", give it a name (e.g., "React App"), and copy the generated key.

2

Store Your Groq API Key

In the Dashboard, navigate to the Settings tab. Paste your Groq API key into the Groq Configuration section and click "Save Changes".

3

Whitelist Your Domain

In the Dashboard, go to the Domains tab. Add your React app's domain (e.g., localhost:3000 for development and your production domain).

4

Create the Nexus Component

Create a new component file NexusWidget.jsx in your React project and paste the following code:

import { useEffect } from 'react';

export default function NexusWidget() {
  useEffect(() => {
    window.NexusConfig = {
      apiKey: 'YOUR_NEXUS_API_KEY',
      model: 'meta-llama/llama-4-scout-17b-16e-instruct',
      botName: 'Nexus AI',
      greeting: '👋 Hello! How can I assist you today?',
      theme: 'auto'
    };
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/nexus-web-assistant@3.0.0/dist/nexus-assistant.min.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }, []);

  return null;
}

Note: Replace YOUR_NEXUS_API_KEY with your actual Nexus API key.

5

Add the Component to Your App

Import and add the NexusWidget component to your main App.jsx file (or anywhere in your component tree):

import NexusWidget from './components/NexusWidget';

function App() {
  return (
    <div className="App">
      <NexusWidget />
      <!-- Your app content -->
    </div>
  );
}

export default App;

That's it! Your React app now has an AI assistant. The chatbot will appear as a floating button on your page.

Advanced Configuration

Using Environment Variables

For better security, store your API key in environment variables. Create a .env file in your project root:

REACT_APP_NEXUS_API_KEY=your_nexus_api_key

Then update your component:

window.NexusConfig = {
  apiKey: process.env.REACT_APP_NEXUS_API_KEY,
  // ... other config
};

Customizing the Widget

You can customize the widget's appearance and behavior by modifying the NexusConfig object:

window.NexusConfig = {
  apiKey: 'YOUR_NEXUS_API_KEY',
  model: 'llama3-70b-8192',
  botName: 'Support Bot',
  greeting: '📚 Welcome to our support! Ask me anything.',
  systemPrompt: 'You are a helpful support assistant.',
  theme: 'dark'
};

Lazy Loading the Widget

If you want to load the widget only on specific routes, use React's lazy loading:

const NexusWidget = React.lazy(() => import('./components/NexusWidget'));

function App() {
  return (
    <Suspense fallback={null}>
      <NexusWidget />
    </Suspense>
  );
}

Framework-Specific Integrations

Nexus works with all major React frameworks. Visit the Integrations page for framework-specific guides:

⚛️ React (this guide) ▲ Next.js 🔴 Angular 🟢 Vue 🚀 Astro 🟠 Svelte

Common Issues and Troubleshooting

Widget not showing up?

Check the browser console for errors. Ensure your Nexus API key is correct and your domain is whitelisted in the Dashboard.

403 Forbidden error?

Your domain is not authorized. Go to the Dashboard → Domains tab and add your domain (e.g., localhost:3000 or your production domain).

API key not working?

Verify your Nexus API key is correct. If you're using environment variables, ensure they're properly loaded.

Styling conflicts?

The widget uses CSS-in-JS and is isolated from your app's styles. If you need to override styles, use the #ai-widget-root selector.

Next Steps

Ready to Add AI to Your React App?

Get started with 1,000 free requests – no credit card needed.

Get Started for Free