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 <DefaultMessage />
import { DefaultMessage, Support, SupportConfig } from "@cossistant/next";
export default function Page() {
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.