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
COSSISTANT_API_KEY=pk_test_xxxx3. 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 publicKey={process.env.COSSISTANT_API_KEY}>
<App />
</SupportProvider>
</React.StrictMode>,
);When
process.env is unavailableIf you're using Vite, set VITE_COSSISTANT_API_KEY in .env and pass
publicKey={import.meta.env.VITE_COSSISTANT_API_KEY}. Otherwise, pass the
key directly to publicKey, or inject it through your app config.
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 <DefaultMessage />
import { DefaultMessage, Support, SupportConfig } from "@cossistant/react";
export default function App() {
return (
<>
<SupportConfig>
<DefaultMessage
senderType="team_member"
content="Hey, tell us what you are building and we will help."
/>
<DefaultMessage
senderType="ai"
content="I can answer setup questions right away."
/>
</SupportConfig>
<Support />
</>
);
}You can now customize behavior in the Support component guide.