Chat Button
Add AI chat to your Next.js landing page or documentation site.
What is Next.js
Next.js is a React framework that provides tools for building web applications with server-side rendering and static generation.
Install the component library
npm install @inkeep/widgets
Customize your settings
Create a useInkeepSettings.ts
file that will contain a hook that will return the configuration for Inkeep component(s).
Make sure to add your Inkeep identifiers to your environment settings. An example next.config.js
file is below.
/** @type {import('next').NextConfig} */
const nextConfig = {
env: {
INKEEP_INTEGRATION_API_KEY: process.env.INKEEP_INTEGRATION_API_KEY,
INKEEP_INTEGRATION_ID: process.env.INKEEP_INTEGRATION_ID,
INKEEP_ORGANIZATION_ID: process.env.INKEEP_ORGANIZATION_ID,
},
};
module.exports = nextConfig;
You can alternatively use the NEXT_PUBLIC_
prefix in your environment variables to access them without a next.config.js
file.
Define the component
Next, create an InkeepChatButton
file for our Chat Button
component.
For Next.js apps that use the App router, use the use client
directive at the top of the file to load the widget on the client side.
For a full list of customizations, check out the Chat Button documentation.