Add Sidebar Chat to React

The InkeepSidebarChat component provides a slide-out panel interface for conversing with your agents. It can be positioned on either side of your application and supports both manual triggering and automatic element triggers.

Installation

Trigger through react state

Here's a simple implementation of the InkeepSidebarChat component:

import { useState } from "react";
import {
  InkeepSidebarChat,
  type InkeepSidebarChatProps,
} from "@inkeep/cxkit-react-oss";

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  const sidebarChatProps: InkeepSidebarChatProps = {
    aiChatSettings: {
      graphUrl: "http://localhost:3003/api/chat",
      headers: {
        "x-inkeep-tenant-id": "your-tenant-id",
        "x-inkeep-project-id": "your-project-id",
        "x-inkeep-graph-id": "your-graph-id",
      },
    },
    position: "right",
    isOpen: isOpen,
    onOpenChange: setIsOpen,
  };

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Close" : "Open"} Sidebar Chat
      </button>

      <InkeepSidebarChat {...sidebarChatProps} />
    </div>
  );
}

Trigger through data attributes

import { useState } from "react";
import {
  InkeepSidebarChat,
  type InkeepSidebarChatProps,
} from "@inkeep/cxkit-react-oss";

export default function App() {
  const sidebarChatProps: InkeepSidebarChatProps = {
    aiChatSettings: {
      graphUrl: "http://localhost:3003/api/chat",
      headers: {
        "x-inkeep-tenant-id": "inkeep",
        "x-inkeep-project-id": "default",
        "x-inkeep-graph-id": "5dNDlFGC8tweVvtkaAFBz",
      },
    },
    position: "right",
  };

  return (
    <div>
      <button data-inkeep-sidebar-chat-trigger>
        Click here to open sidebar chat
      </button>

      <InkeepSidebarChat {...sidebarChatProps} />
    </div>
  );
}

Configuration Options

Required Props

Property	Type	Description
`aiChatSettings`	object	Configuration for the AI chat connection
`aiChatSettings.graphUrl`	string	The URL of your agent graph endpoint
`aiChatSettings.headers`	object	Headers for authentication and graph identification