An analytics dashboard template for monitoring ChatBotKit usage, built with Next.js, Tailwind CSS, and Recharts. Includes Google authentication via NextAuth.
Building an AI-powered dashboard typically means sourcing models, a conversation layer, background processing, storage, a tested abilities catalogue, authentication, security, monitoring, and more from separate systems. The cost adds up fast - not just in money, but in engineering time.
ChatBotKit brings all of this into one platform. This template gets you started with a dashboard that connects to a single API for viewing analytics, usage trends, and recent activity.
| Layer | Technology |
|---|---|
| Framework | Next.js (App Router) |
| AI Platform | ChatBotKit SDK |
| Authentication | NextAuth (Google) |
| Charts | Recharts |
| UI | Tailwind CSS, Radix |
| Language | JavaScript / JSX |
npx create-cbk-appFollow the prompts and configure environment variables (see below).
# Clone the repository
git clone <repo-url>
cd template-nextjs-dashboard-js
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your values (see Environment Variables below)
# Start the development server
npm run devOpen http://localhost:3000 to get started.
| Variable | Required | Description |
|---|---|---|
CHATBOTKIT_API_SECRET |
Yes | ChatBotKit API token from chatbotkit.com/tokens |
NEXTAUTH_SECRET |
Yes | Random secret for NextAuth session encryption |
NEXTAUTH_URL |
Yes | Application URL (default: http://localhost:3000) |
GOOGLE_CLIENT_ID |
Yes | Google OAuth client ID from console.cloud.google.com |
GOOGLE_CLIENT_SECRET |
Yes | Google OAuth client secret |
- Sign up or log in at chatbotkit.com
- Go to chatbotkit.com/tokens and create an API token
- Copy the API token to
CHATBOTKIT_API_SECRETin your.envfile
No bots or other platform resources are needed. The dashboard displays usage analytics and event logs for your entire ChatBotKit account.
- Go to Google Cloud Console
- Create a new OAuth 2.0 Client ID
- Set authorized redirect URI to
http://localhost:3000/api/auth/callback/google - Copy the Client ID and Client Secret to your
.envfile
Run the following command and paste the output into your .env file:
openssl rand -base64 32├── actions/
│ └── analytics.js # Server actions for usage and event data
├── app/
│ ├── api/auth/[...nextauth]/
│ │ └── route.ts # NextAuth API handler
│ ├── auth/signin/
│ │ └── page.jsx # Google sign-in page
│ ├── dashboard/
│ │ └── page.jsx # Analytics dashboard page
│ ├── globals.css # Global styles with CSS variables
│ ├── layout.js # Root layout with providers
│ └── page.js # Home (redirects to dashboard or sign-in)
├── components/
│ ├── dashboard/
│ │ ├── dashboard-header.jsx # Header with user menu
│ │ ├── event-log.jsx # Recent activity feed
│ │ ├── usage-cards.jsx # Summary metric cards
│ │ └── usage-charts.jsx # Time-series line charts
│ ├── ui/ # Shared UI primitives (button, card, etc.)
│ └── providers.jsx # NextAuth session provider
├── lib/
│ ├── auth-options.js # NextAuth configuration
│ ├── chatbotkit.js # ChatBotKit SDK client
│ ├── session.js # Session helpers
│ └── utils.js # Tailwind merge utility
├── middleware.ts # Route protection
├── .env.example
├── next.config.mjs
├── tailwind.config.js
└── package.json
MIT - see LICENSE