Talk to your agentsReact

Custom Trigger

Copy page

Create custom UI elements to trigger Inkeep modals with complete control over appearance and behavior.

Overview

Custom triggers give you complete control over how users open Inkeep modals in your React application. Instead of using pre-built components like InkeepChatButton, you can create your own UI elements that match your design system while maintaining full functionality.

Installation

Quick Start

Basic Implementation

Here's a simple example of creating a custom button to open an Inkeep chat modal:

import { useState } from "react";
import {
  InkeepModalChat,
  type InkeepModalChatProps,
} from "@inkeep/cxkit-react";

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const modalProps: InkeepModalChatProps = {
    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",
      },
    },
    modalSettings: {
      isOpen: isModalOpen,
      onOpenChange: setIsModalOpen,
    },
  };

  return (
    <>
      <button onClick={() => setIsModalOpen(true)}>
        Open Inkeep Assistant
      </button>

      <InkeepModalChat {...modalProps} />
    </>
  );
}
Chat ButtonAdd Sidebar Chat to React