Talk to your agentsReact

Embedded Chat

Copy page

Integrate Inkeep's embedded chat component directly into your React application for inline agent conversations.

The InkeepEmbeddedChat component provides a fully embedded chat interface that you can integrate directly into your React application's layout. Unlike modal or sidebar implementations, the embedded chat becomes part of your page structure, perfect for dedicated support pages, dashboards, or help centers.

Installation

Basic Implementation

Here's a simple implementation of the InkeepEmbeddedChat component:

import {
  InkeepEmbeddedChat,
  type InkeepEmbeddedChatProps,
} from "@inkeep/cxkit-react-oss";

export default function App() {
  const embeddedChatProps: InkeepEmbeddedChatProps = {
    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",
      },
    },
  };

  return <InkeepEmbeddedChat {...embeddedChatProps} />;
}
Add Sidebar Chat to ReactRun API Authentication