Quick start with AI prompt
Paste your public key to prefill the prompt, then copy it and run it in ChatGPT, Claude, or Cursor.
cossistant-prompt.md
Manually
1. Install the package
pnpm add @cossistant/react
2. Add your public API key
VITE_COSSISTANT_API_KEY=pk_test_xxxxAuto-detection
The SDK automatically detects your framework and reads the right
environment variable (VITE_COSSISTANT_API_KEY, NEXT_PUBLIC_COSSISTANT_API_KEY,
or COSSISTANT_API_KEY). You can also pass the key explicitly through publicKey.
3. Add SupportProvider
import React from "react";
import ReactDOM from "react-dom/client";
import { SupportProvider } from "@cossistant/react";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<SupportProvider>
<App />
</SupportProvider>
</React.StrictMode>,
);Passing the key explicitly
If your framework does not support automatic env variable detection,
pass publicKey directly:
<SupportProvider publicKey={import.meta.env.VITE_COSSISTANT_API_KEY}>.
4. Import styles
@import "tailwindcss";
@import "@cossistant/react/support.css";5. Render the widget
import { Support } from "@cossistant/react";
export default function App() {
return (
<main>
<h1>You are ready to chat</h1>
<Support />
</main>
);
}6. Identify logged-in visitors (optional)
import { IdentifySupportVisitor, Support } from "@cossistant/react";
export default function App() {
const user = {
id: "user_123",
email: "jane@acme.com",
name: "Jane Doe",
};
return (
<>
<IdentifySupportVisitor
externalId={user.id}
email={user.email}
name={user.name}
/>
<Support />
</>
);
}7. Display custom messages with SupportConfig defaultMessages
import { Support, SupportConfig } from "@cossistant/react";
import { type DefaultMessage, SenderType } from "@cossistant/types";
const user: { name: string | null } = {
name: "Jane Doe",
};
const defaultMessages: DefaultMessage[] = [
{
content: `Hi ${user.name ?? "there"}, anything I can help with?`,
senderType: SenderType.TEAM_MEMBER,
},
];
const quickOptions: string[] = ["How to identify a visitor?"];
export default function App() {
return (
<>
<SupportConfig
defaultMessages={defaultMessages}
quickOptions={quickOptions}
/>
<Support />
</>
);
}You can now customize behavior in the Support component guide.