React SDK

Embed X-com surfaces directly in a React app — no iframe, full theming, live updates over WebSocket.

Install

npm install @x-com/react

Provider

import { X-comProvider } from "@x-com/react";

export default function App() {
  return (
    <X-comProvider
      token={process.env.NEXT_PUBLIC_XCOM_TOKEN!}
      visitor={{ externalId: user.id, name: user.name, email: user.email }}
    >
      {children}
    </X-comProvider>
  );
}

Chat panel

import { ChatPanel } from "@x-com/react";

<ChatPanel channelId={channelId} height={520} />

Task list

import { TaskList } from "@x-com/react";

<TaskList groupId={groupId} filter={{ assignee: "me", status: "open" }} />

Project board

import { ProjectBoard } from "@x-com/react";

<ProjectBoard projectId={projectId} onTaskClick={(t) => router.push(`/tasks/${t.id}`)} />

Hooks

import { useMessages, useTypingIndicator, usePresence } from "@x-com/react";

const { messages, sendMessage } = useMessages(channelId);
const { typers } = useTypingIndicator(channelId);
const { online } = usePresence(channelId);

Coming soon. The public npm release is scheduled with our GA launch — join the waitlist to get early access.