{"id":35053847,"url":"https://github.com/chatbotkit/template-nextjs-dashboard-js","last_synced_at":"2026-05-24T14:33:27.222Z","repository":{"id":324969599,"uuid":"1099071678","full_name":"chatbotkit/template-nextjs-dashboard-js","owner":"chatbotkit","description":"Dashboard template built with Next.js and ChatBotKit SDK","archived":false,"fork":false,"pushed_at":"2026-03-30T12:48:03.000Z","size":14,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T14:38:08.576Z","etag":null,"topics":["ai","chatbot","chatbotkit","dashboard","javascript","nextjs","template"],"latest_commit_sha":null,"homepage":"https://chatbotkit.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chatbotkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-18T14:24:15.000Z","updated_at":"2026-03-30T12:47:59.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chatbotkit/template-nextjs-dashboard-js","commit_stats":null,"previous_names":["chatbotkit/template-nextjs-dashboard-js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chatbotkit/template-nextjs-dashboard-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-dashboard-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-dashboard-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-dashboard-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-dashboard-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chatbotkit","download_url":"https://codeload.github.com/chatbotkit/template-nextjs-dashboard-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-dashboard-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33438512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-24T13:13:05.286Z","status":"ssl_error","status_checked_at":"2026-05-24T13:13:03.728Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","chatbot","chatbotkit","dashboard","javascript","nextjs","template"],"created_at":"2025-12-27T09:41:13.588Z","updated_at":"2026-05-24T14:33:27.216Z","avatar_url":"https://github.com/chatbotkit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dashboard Template for Next.js / ChatBotKit / JS\n\nAn analytics dashboard template for monitoring ChatBotKit usage, built with Next.js, Tailwind CSS, and Recharts. Includes Google authentication via NextAuth.\n\n\u003cimg width=\"50%\" src=\"https://github.com/user-attachments/assets/513d499d-fa20-49fc-913f-2a519a1cd25b\" /\u003e\n\n\n## Why ChatBotKit?\n\nBuilding 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.\n\nChatBotKit 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.\n\n## Technology Stack\n\n| Layer          | Technology           |\n| -------------- | -------------------- |\n| Framework      | Next.js (App Router) |\n| AI Platform    | ChatBotKit SDK       |\n| Authentication | NextAuth (Google)    |\n| Charts         | Recharts             |\n| UI             | Tailwind CSS, Radix  |\n| Language       | JavaScript / JSX     |\n\n## Setup\n\n### Automated Setup\n\n```bash\nnpx create-cbk-app\n```\n\nFollow the prompts and configure environment variables (see below).\n\n### Manual Setup\n\n```bash\n# Clone the repository\ngit clone \u003crepo-url\u003e\ncd template-nextjs-dashboard-js\n\n# Install dependencies\nnpm install\n\n# Configure environment\ncp .env.example .env\n# Edit .env with your values (see Environment Variables below)\n\n# Start the development server\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to get started.\n\n## Environment Variables\n\n| Variable                | Required | Description                                                                                               |\n| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------- |\n| `CHATBOTKIT_API_SECRET` | Yes      | ChatBotKit API token from [chatbotkit.com/tokens](https://chatbotkit.com/tokens)                          |\n| `NEXTAUTH_SECRET`       | Yes      | Random secret for NextAuth session encryption                                                             |\n| `NEXTAUTH_URL`          | Yes      | Application URL (default: `http://localhost:3000`)                                                        |\n| `GOOGLE_CLIENT_ID`      | Yes      | Google OAuth client ID from [console.cloud.google.com](https://console.cloud.google.com/apis/credentials) |\n| `GOOGLE_CLIENT_SECRET`  | Yes      | Google OAuth client secret                                                                                |\n\n### Setting Up ChatBotKit\n\n1. Sign up or log in at [chatbotkit.com](https://chatbotkit.com)\n2. Go to [chatbotkit.com/tokens](https://chatbotkit.com/tokens) and create an API token\n3. Copy the API token to `CHATBOTKIT_API_SECRET` in your `.env` file\n\nNo bots or other platform resources are needed. The dashboard displays usage analytics and event logs for your entire ChatBotKit account.\n\n### Getting Google OAuth Credentials\n\n1. Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials)\n2. Create a new OAuth 2.0 Client ID\n3. Set authorized redirect URI to `http://localhost:3000/api/auth/callback/google`\n4. Copy the Client ID and Client Secret to your `.env` file\n\n### Generating a NextAuth Secret\n\nRun the following command and paste the output into your `.env` file:\n\n```bash\nopenssl rand -base64 32\n```\n\n## Project Structure\n\n```\n├── actions/\n│   └── analytics.js          # Server actions for usage and event data\n├── app/\n│   ├── api/auth/[...nextauth]/\n│   │   └── route.ts          # NextAuth API handler\n│   ├── auth/signin/\n│   │   └── page.jsx          # Google sign-in page\n│   ├── dashboard/\n│   │   └── page.jsx          # Analytics dashboard page\n│   ├── globals.css            # Global styles with CSS variables\n│   ├── layout.js              # Root layout with providers\n│   └── page.js                # Home (redirects to dashboard or sign-in)\n├── components/\n│   ├── dashboard/\n│   │   ├── dashboard-header.jsx  # Header with user menu\n│   │   ├── event-log.jsx         # Recent activity feed\n│   │   ├── usage-cards.jsx       # Summary metric cards\n│   │   └── usage-charts.jsx      # Time-series line charts\n│   ├── ui/                       # Shared UI primitives (button, card, etc.)\n│   └── providers.jsx             # NextAuth session provider\n├── lib/\n│   ├── auth-options.js        # NextAuth configuration\n│   ├── chatbotkit.js          # ChatBotKit SDK client\n│   ├── session.js             # Session helpers\n│   └── utils.js               # Tailwind merge utility\n├── middleware.ts              # Route protection\n├── .env.example\n├── next.config.mjs\n├── tailwind.config.js\n└── package.json\n```\n\n## Learn More\n\n- [ChatBotKit Documentation](https://chatbotkit.com/docs)\n- [ChatBotKit SDK](https://github.com/chatbotkit/node-sdk)\n- [Next.js Documentation](https://nextjs.org/docs)\n\n## License\n\nMIT - see [LICENSE](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-dashboard-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-dashboard-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-dashboard-js/lists"}