{"id":50849376,"url":"https://github.com/chatbotkit/template-nextjs-inbox-agent-js","last_synced_at":"2026-06-14T12:30:56.238Z","repository":{"id":349659626,"uuid":"1203321828","full_name":"chatbotkit/template-nextjs-inbox-agent-js","owner":"chatbotkit","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-07T00:24:21.000Z","size":91,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-07T02:21:29.635Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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":"2026-04-06T23:58:18.000Z","updated_at":"2026-04-07T00:24:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/chatbotkit/template-nextjs-inbox-agent-js","commit_stats":null,"previous_names":["chatbotkit/template-nextjs-inbox-agent-js"],"tags_count":null,"template":true,"template_full_name":null,"purl":"pkg:github/chatbotkit/template-nextjs-inbox-agent-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-inbox-agent-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-inbox-agent-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-inbox-agent-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-inbox-agent-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chatbotkit","download_url":"https://codeload.github.com/chatbotkit/template-nextjs-inbox-agent-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatbotkit%2Ftemplate-nextjs-inbox-agent-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34322072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-06-14T12:30:55.382Z","updated_at":"2026-06-14T12:30:56.226Z","avatar_url":"https://github.com/chatbotkit.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inbox Agent Template for Next.js / ChatBotKit / JS\n\nAn autonomous email inbox management agent powered by ChatBotKit. Sign in with Google, connect the personal secrets required by your ChatBotKit bot, then toggle pre-defined tasks on and off to let the agent draft responses, categorize emails, and generate daily digests automatically.\n\n\u003cimg width=\"30%\" src=\"https://github.com/user-attachments/assets/763acf3e-f640-4494-be7f-6f239a1494ad\" /\u003e \u003cimg width=\"30%\" src=\"https://github.com/user-attachments/assets/ffe794f7-795f-4984-8cd2-643c10bab086\" /\u003e \u003cimg width=\"30%\" src=\"https://github.com/user-attachments/assets/1211c910-a424-4b0b-a8f3-1e9f533ef064\" /\u003e\n\n\u003e **Note:** This template is deliberately bare-bones. It provides the minimal structure and wiring needed to get a working app, intentionally leaving styling, layout, and architectural choices open so you can build on top without fighting existing opinions.\n\n## Why ChatBotKit?\n\nChatBotKit provides the conversational AI backbone that powers the Inbox Agent's email processing. Instead of building complex NLP pipelines from scratch, you get:\n\n- **Pre-built AI models** for understanding email context, sentiment, and intent\n- **Task scheduling** for automated, recurring inbox processing\n- **Bot customization** to tailor how your inbox agent behaves\n- **Server-side SDK** for secure, authenticated API calls\n- **Personal secrets** for secure OAuth connection management (Gmail, etc.)\n\n## Features\n\n- **Google OAuth Sign-In** - Secure authentication using your Google account\n- **Dedicated Connections Page** - Connect and manage the integrations required by your bot via ChatBotKit personal secrets with connect/revoke controls\n- **Pre-Defined Tasks** - Three built-in tasks (email drafting, categorization, daily digest) that users simply toggle on or off\n- **Autonomous Operation** - The ChatBotKit bot handles email processing through its configured abilities on automatic schedules\n- **ChatBotKit Integration** - Powered by ChatBotKit's task, contact, and GraphQL APIs\n\n## Technology Stack\n\n- **Next.js 16** - App Router with server actions\n- **ChatBotKit SDK** - `@chatbotkit/sdk` for server-side operations (tasks, contacts, connections)\n- **next-auth** - Authentication with Google OAuth provider\n- **shadcn/ui** - Accessible UI components built on Radix primitives\n- **Tailwind CSS** - Utility-first styling\n\n## Setup\n\n### 1. Install dependencies\n\n```bash\nnpm install\n```\n\n### 2. Configure environment variables\n\nCopy `.env.example` to `.env.local` and fill in the required values:\n\n```bash\ncp .env.example .env.local\n```\n\n### 3. Set up Google OAuth credentials\n\n1. Go to [Google Cloud Console](https://console.cloud.google.com/apis/credentials)\n2. Create a new project (or select existing)\n3. Create OAuth 2.0 credentials (Web application type)\n4. Add `http://localhost:3000/api/auth/callback/google` as an authorized redirect URI\n5. Copy the Client ID and Client Secret to your `.env.local`\n\n### 4. Set up ChatBotKit\n\n1. Create an account at [ChatBotKit](https://chatbotkit.com)\n2. Create a new bot with the email abilities and personal secrets your workflow needs\n3. Copy your API secret token from [Tokens](https://chatbotkit.com/tokens)\n4. Add the bot ID and API secret to your `.env.local`\n\n### 5. Run the development server\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to get started.\n\n## Environment Variables\n\n| Variable                | Description                                   |\n| ----------------------- | --------------------------------------------- |\n| `CHATBOTKIT_API_SECRET` | Your ChatBotKit API secret token              |\n| `CHATBOTKIT_BOT_ID`     | The bot ID configured with Gmail abilities    |\n| `NEXTAUTH_SECRET`       | Random string for NextAuth session encryption |\n| `NEXTAUTH_URL`          | Your app URL (e.g., `http://localhost:3000`)  |\n| `GOOGLE_CLIENT_ID`      | Google OAuth client ID (for user sign-in)     |\n| `GOOGLE_CLIENT_SECRET`  | Google OAuth client secret                    |\n\n## How It Works\n\n### Authentication Flow\n\n1. User signs in via Google OAuth (basic profile/email scopes only)\n2. NextAuth manages the session with JWT strategy\n3. Protected routes redirect unauthenticated users to the sign-in page\n\n### Connections Flow\n\n1. After sign-in, the `/connect` page lists all personal secrets required by the configured ChatBotKit bot\n2. Each connection shows its authentication status (connected/disconnected)\n3. Users click \"Connect\" to authenticate via OAuth popup (managed by ChatBotKit)\n4. OAuth callbacks are handled via `postMessage` to update connection status in real time\n5. Users can revoke connections at any time with a confirmation dialog\n\n### Task Toggle Flow\n\n1. Once all connections are established, the dashboard shows pre-defined tasks\n2. Each task has a simple on/off toggle - no configuration needed\n3. Turning a task on creates it in ChatBotKit with its pre-set schedule\n4. Turning a task off deletes it from ChatBotKit, stopping execution\n5. Task status (active, running, error) is displayed in real time\n\n### Pre-Defined Tasks\n\n| Task                      | Description                                                 | Schedule   |\n| ------------------------- | ----------------------------------------------------------- | ---------- |\n| Draft Email Responses     | Scans inbox, analyzes emails, and drafts replies for review | Every hour |\n| Categorize \u0026 Label Emails | Categorizes emails by type and applies labels               | Every hour |\n| Daily Inbox Digest        | Generates a summary of inbox activity and highlights        | Daily      |\n\n### Autonomous Operation\n\nThe template leverages ChatBotKit's task system for autonomous email processing:\n\n- Users sign in and connect their services once\n- They toggle on the tasks they want the agent to perform\n- The ChatBotKit task scheduler runs the bot automatically on each task's schedule\n- The bot uses its Gmail abilities (via personal secrets) to process emails autonomously\n- No manual intervention needed after initial setup\n\n## Project Structure\n\n```\nactions/\n  connections.js         # Server actions: listConnections, revokeConnection\n  tasks.js               # Server actions: getTaskStates, enableTask, disableTask + task catalog\napp/\n  layout.jsx             # Root layout with providers\n  page.jsx               # Landing page (redirects to /connect or /auth)\n  auth/signin/page.jsx   # Google sign-in page\n  connect/page.jsx       # Connections page (server: lists connections + ConnectionList)\n  dashboard/\n    page.jsx             # Dashboard page (server: checks connections, fetches task states)\n    dashboard-page.jsx   # Dashboard page (client: pre-defined task toggles)\n  api/auth/[...nextauth]/\n    route.ts             # NextAuth API route\ncomponents/\n  app/\n    app-header.jsx       # Shared authenticated header with avatar dropdown\n  connections/\n    connection-list.jsx  # Connection list with connect/revoke + OAuth callback handling\n  providers.jsx          # Session provider wrapper\n  ui/\n    alert-dialog.jsx     # Alert dialog component (Radix)\n    avatar.jsx           # Avatar component (shadcn/ui)\n    button.jsx           # Button component (shadcn/ui)\n    card.jsx             # Card component (shadcn/ui)\n    dropdown-menu.jsx    # Dropdown menu component (Radix)\n    separator.jsx        # Separator component (shadcn/ui)\nlib/\n  auth-options.js        # NextAuth configuration\n  chatbotkit.js          # ChatBotKit client singleton\n  contact.js             # Contact fingerprint generation (UUID v5)\n  session.js             # Session validation helper\n  utils.js               # Utility functions (cn)\nmiddleware.ts            # Auth middleware for protected routes\n```\n\n## Customization\n\n### Configuring the AI Agent\n\nEdit your ChatBotKit bot's backstory and abilities to customize how it processes emails:\n\n- **Gmail abilities** - Configure which Gmail actions the bot can perform (read, label, draft)\n- **Priority detection** - Configure rules for what constitutes high/medium/low priority\n- **Auto-labeling** - Define label categories based on email content\n- **Response drafting** - Set tone, length, and style for draft replies\n\n### Adding New Tasks\n\nTo add more pre-defined tasks, edit the `TASK_CATALOG` array in `actions/tasks.js`:\n\n```js\n{\n  key: 'my-task',\n  name: 'My Custom Task',\n  description: 'What the agent should do...',\n  schedule: '@every 1d',\n  icon: 'file-text',\n}\n```\n\n## Learn More\n\n- [ChatBotKit Documentation](https://chatbotkit.com/docs)\n- [ChatBotKit SDK Reference](https://chatbotkit.com/docs/node-sdk)\n- [Next.js Documentation](https://nextjs.org/docs)\n- [NextAuth.js Documentation](https://next-auth.js.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-inbox-agent-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-inbox-agent-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatbotkit%2Ftemplate-nextjs-inbox-agent-js/lists"}