Skip to main content

React SDK Overview

The Kapa React SDK allows you to easily integrate Kapa's conversational AI capabilities directly into your React applications. With the SDK, you can create custom chat interfaces, manage conversations, and collect user feedback, with full control over your application's look and feel.

Installation​

Install the package using your preferred package manager:

npm install @kapaai/react-sdk

Quick example​

import React, { useState } from 'react';
import { KapaProvider, useChat } from '@kapaai/react-sdk';

function ChatApp() {
  return (
    <KapaProvider
      integrationId="your-integration-id"
      callbacks={{
        askAI: {
          onQuerySubmit: (data) => console.log('Question asked:', data.question)
        }
      }}
    >
      <ChatInterface />
    </KapaProvider>
  );
}

function ChatInterface() {
  const [message, setMessage] = useState('');
  const {
    conversation,
    submitQuery,
    isGeneratingAnswer,
    isPreparingAnswer
  } = useChat();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    if (message.trim()) {
      submitQuery(message);
      setMessage('');
    }
  };
  
  return (
    <div className="chat-container">
      <div className="conversation">
        {conversation.map((qa) => (
          <div key={qa.id || `temp-${qa.question}`} className="qa-pair">
            <div className="question">{qa.question}</div>
            <div className="answer">{qa.answer}</div>
          </div>
        ))}
        {isPreparingAnswer && <div className="loading">Preparing answer...</div>}
      </div>
      
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          placeholder="Ask a question..."
          disabled={isGeneratingAnswer}
        />
        <button type="submit" disabled={isGeneratingAnswer}>
          Send
        </button>
      </form>
    </div>
  );
}

Getting started​

To get started with Kapa React SDK:

  1. Get your integration ID

    • Log in to your Kapa dashboard
    • Navigate to the "Integrations" section
    • Select or create a web integration
    • Copy the Integration ID from the setup page

  2. Set up the KapaProvider

    • Wrap your application (or the relevant part) with the KapaProvider component
    • Provide your integration ID and necessary callbacks
    <KapaProvider
      integrationId="your-integration-id"
      callbacks={{
        askAI: {
          // Add your callback functions here
        }
      }}
    >
      <YourApplication />
    </KapaProvider>

  3. Use the useChat hook

    • Import and use the useChat hook in your components
    • Access conversation data and SDK functions
    const { 
      conversation, 
      submitQuery, 
      isGeneratingAnswer 
    } = useChat();

  4. Build your custom UI

    • Create your chat interface using the data and functions from the hook
    • Style it to match your application's design

Documentation​