If you are contributing to the Cossistant repo itself, start with the Contributor Setup Guide so you boot the full monorepo and local services, not just the widget in an existing app.
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/next
2. Add your public API key
NEXT_PUBLIC_COSSISTANT_API_KEY=pk_test_xxxx3. Add SupportProvider
import { SupportProvider } from "@cossistant/next";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<SupportProvider>{children}</SupportProvider>
</body>
</html>
);
}4. Import styles
@import "tailwindcss";
@import "@cossistant/next/support.css";5. Render the widget
import { Support } from "@cossistant/next";
export default function Page() {
return (
<main>
<h1>You are ready to chat</h1>
<Support />
</main>
);
}6. Identify logged-in visitors (optional)
import { IdentifySupportVisitor } from "@cossistant/next";
export default function AppLayout({ children }: { children: React.ReactNode }) {
const user = {
id: "user_123",
email: "jane@acme.com",
name: "Jane Doe",
};
return (
<>
<IdentifySupportVisitor
externalId={user.id}
email={user.email}
name={user.name}
/>
{children}
</>
);
}7. Display custom messages with SupportConfig defaultMessages
import { Support, SupportConfig } from "@cossistant/next";
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 Page() {
return (
<>
<SupportConfig
defaultMessages={defaultMessages}
quickOptions={quickOptions}
/>
<Support />
</>
);
}You can now customize behavior in the Support component guide.