Skip to content

tmcfarlane/zeroclickboards

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

126 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ZeroBoard

License: MIT GitHub Stars Issues

Try It Live - Features - Setup - Deploy - FAQ - Contributing - ZeroClickDev

Try it Live

ZeroBoard demo — AI-powered Kanban boards

ZeroBoard is an open-source, AI-powered Kanban board

Describe your task. Let AI organize it. ZeroBoard gives you a drag-and-drop Kanban board with an AI assistant that creates cards, moves tasks, and manages your workflow with plain-English commands.

  • AI assistant — natural-language board control (5 free queries/day, Pro unlimited at $3/month)
  • Drag-and-drop — smooth @dnd-kit interactions for cards and columns
  • Real-time sync — changes flow instantly across tabs via Supabase Realtime
  • Timeline view — Gantt-style planning for target dates
  • Open source & self-hostable — MIT license, bring your own Supabase

We're past the era of reading docs. Just paste this into your agent:

Read this and tell me why it's not just another Kanban clone: https://raw.githubusercontent.com/tmcfarlane/zeroclickboards/refs/heads/main/README.md

Contents

Features

Kanban Board

Drag-and-drop cards between columns and rearrange columns with smooth @dnd-kit interactions. Changes sync instantly across all open tabs via Supabase Realtime.

Kanban board with drag-and-drop columns and cards

AI Assistant

Tell it what to do in plain English — create cards, move tasks, organize your board. 5 free AI queries/day; unlimited with Pro ($3/month via Stripe).

AI assistant creating and organizing cards from natural language

Timeline View

Visualize card target dates on a Gantt-style timeline for project planning.

Timeline / Gantt view for project planning

Card Editor

Rich card editing with 6 label colors, cover images, checklists, and target dates. Archive cards to declutter, then restore or duplicate them anytime.

Card editor with labels, covers, and checklists

Board Sharing

Share boards with collaborators via email — grant view or edit access and keep everyone in sync through Supabase Realtime.

Share a board with collaborators

Templates

Save any board as a reusable template, then spin up new boards from it in one click.

Save board as template

Choose Background Color

Personalize each board with a gradient or solid color background — pick from curated presets or clear it to fall back to the default theme.

Choose a gradient or solid board background

Export to JSON

Export boards to JSON for backup, migration, or integration with other tools.

Export board data to JSON

Google OAuth + Email Auth

Sign in with Google or email/password via Supabase Auth — boards sync across devices the moment you log in.

Sign in with Google or email/password

Deploy with Vercel

One-click deploy straight from the GitHub repo — serverless API routes keep your Supabase and AI keys safe on the server.

Deploy ZeroClickBoards to Vercel from GitHub

Quickstart

# Prerequisites: Node.js 18+, npm
git clone https://github.com/tmcfarlane/zeroclickboards.git
cd zeroclickboards
npm install

npm run dev           # http://localhost:5173 (UI only)
vercel dev            # http://localhost:3000 (UI + API routes)
npm run build         # production build

Setup

Setup is a mix of agent-automatable tasks (cloning the repo, npm install, scaffolding .env.local, running the dev server) and dashboard-only tasks that require you to click around Supabase, Google Cloud, and Stripe. An agent can't create your Supabase project or enable Google OAuth — but it can walk you through each click and start the app once you've filled in your own keys.

Keep your secrets out of the chat. When the agent hands off a dashboard step, you should open .env.local and paste keys in yourself, then tell the agent you're done. Don't paste API keys, service-role keys, or webhook secrets into the agent conversation — they'd end up in logs, transcripts, and potentially the model provider's training data.

If your agent has the Supabase MCP server installed, it can go further — create the project and run migrations directly via MCP (keys stay in the MCP boundary, not the chat). Same idea with the Stripe MCP. Without them, the dashboard steps and env-file edits are on you.

For Humans

Copy and paste this prompt to your LLM agent (Claude Code, Cursor, Codex, AmpCode, etc.):

Walk me through installing ZeroClickBoards using this guide: https://raw.githubusercontent.com/tmcfarlane/zeroclickboards/refs/heads/main/docs/guide/installation.md

Do the automatable steps yourself (clone, install, scaffold .env.local with empty values, run the schema if you have Supabase MCP, start the dev server). For the dashboard-only steps (creating the Supabase project, enabling Google OAuth, setting up Stripe), pause and tell me exactly what to click and which env var each value maps to. I'll paste the keys into .env.local myself and tell you when I'm done — don't ask me to share secrets in this chat.

Or read the Installation Guide and do it all yourself.

For LLM Agents (click to expand — operating protocol for agents installing this repo)

 

If you were invoked to install ZeroClickBoards, follow this protocol exactly. Don't skim — read it all before starting.

1. Fetch the guide:

curl -sL https://raw.githubusercontent.com/tmcfarlane/zeroclickboards/refs/heads/main/docs/guide/installation.md

2. Probe your capabilities before starting. Report to the user which of these you have; it changes what you can automate:

  • Can you run shell commands? (for git, npm, cp, curl)
  • Is the Supabase MCP connected? (lets you create the project + apply the schema)
  • Is the Stripe MCP connected? (lets you create Products/Prices)
  • Is the Vercel CLI installed? (for vercel dev / vercel link)

3. Execute the guide top-to-bottom. Each step is tagged [automatable], [dashboard], or [MCP-automatable]:

  • [automatable] → run it yourself.
  • [MCP-automatable] → run it via MCP if connected, otherwise treat as [dashboard].
  • [dashboard]stop. Tell the user: (a) the exact dashboard URL/path, (b) what to click, (c) which env var each value maps to, (d) to reply when .env.local is updated. Then wait — do not proceed.

4. Never request secrets in chat. This is non-negotiable. Don't ask the user to paste API keys, anon keys, service-role keys, webhook secrets, OAuth client secrets, or Stripe keys into the conversation. Instruct them to edit .env.local directly. If you need to verify a value is set, check that the env var is non-empty — don't read or echo its contents.

5. Scaffold, don't assume. cp .env.example .env.local first, then let the user fill values. Never write placeholder secrets ("sk_test_xxx", "REPLACE_ME") into .env.local that the user might forget to replace — leave values empty so the app fails loudly on startup.

6. Success criteria. You are done when:

  • .env.local exists with required keys filled in (verified by env-var presence check, not value inspection),
  • the schema from supabase/schema.sql has been applied to the user's Supabase project,
  • npm run dev or vercel dev starts without errors,
  • the login page loads at the dev URL.

Report each criterion as checked or pending, then stop.

Architecture

sequenceDiagram
  participant User
  participant UI as React UI
  participant API as Vercel Functions
  participant AI as AI Gateway
  participant DB as Supabase

  User->>UI: Natural language command
  UI->>API: POST /api/ai/command
  API->>AI: Chat completion (board context)
  AI-->>API: Structured action response
  API-->>UI: Parsed actions
  UI->>DB: Apply changes (cards, columns)
  DB-->>UI: Real-time subscription update
Loading
Project layout
Path Purpose
src/components/board/ Kanban board, columns, cards, card editor
src/store/useBoardStore.ts Zustand store for board state
src/lib/database/ Supabase query builders
src/lib/supabase.ts Supabase client
api/ai/command.ts AI assistant endpoint
api/ai/usage.ts Daily usage limits
api/stripe/ Stripe checkout + webhooks
supabase/schema.sql PostgreSQL schema + RLS policies

Deploy to Vercel

Deploy with Vercel

  1. Import the repo in Vercel
  2. Add the environment variables from Setup in Project → Settings → Environment Variables
  3. Deploy

vercel.json configures SPA rewrites while preserving /api/* routes.

Pricing note: When you deploy your own instance, you pay for the AI usage your users generate (via your AI_GATEWAY_API_KEY). The app ships with a default pricing model to help you recoup those costs — 5 free AI queries/day per user (resets at midnight PT), and a Pro plan at $3/month for unlimited queries via Stripe. You're free to change the limits, price, currency, or remove paywalling entirely — edit api/ai/usage.ts and your Stripe STRIPE_PRICE_ID to match whatever model you want (higher free tier, different price, one-time payment, fully free, etc.).

FAQ

Is it really free?

Yes. The full app is MIT-licensed and self-hostable. On the hosted version, Pro ($3/month) unlocks unlimited AI queries — the free tier gives you 5 per day.

Do I need the AI assistant to use it?

No. ZeroClickBoards works as a regular Kanban board without any AI configuration. Skip the AI_GATEWAY_* variables if you don't want the AI assistant.

Can I self-host without Vercel?

Yes. The frontend is a static Vite build — any static host works. The /api/* serverless functions can run on any Node.js 18+ platform that supports the Vercel function signature (or can be trivially ported).

Where is my data stored?

In your own Supabase project. Row Level Security policies ensure users only see their own boards. See supabase/schema.sql.

How do feature requests work?

Submit one via the feedback page or open a GitHub issue. Feedback submissions are auto-converted to GitHub issues, where an AI agent picks them up and opens a draft PR for human review. See CONTRIBUTING.md.

Contributing

Contributions are welcome! Whether it's a bug fix, a new feature, or just better docs — see CONTRIBUTING.md for the dev loop.

Security issues: please report privately via SECURITY.md (if present) or email the maintainer.

Built With

React TypeScript Vite Tailwind CSS shadcn/ui Supabase Vercel Stripe

Built with AI assistance using Claude Code and Oh My ClaudeCode.

Star History

Star History Chart

License

MIT. See LICENSEbuild something great with it.