Board: AI Plan Generation

When you click Generate Plan on a board work item, Frenti sends the item details to Claude and saves an actionable implementation plan. This guide explains the feature from both a user and developer perspective.

Overview

Every work item on the Board can have an AI-generated implementation plan. The plan is a concise markdown document that breaks the work item down into concrete steps — naming specific files, functions, and components to create or modify. Plans are designed to be handed directly to a Claude Code session for automated implementation.

How to use it

  1. 1Open any work item by clicking its card on the Board view.
  2. 2In the detail panel, click the Generate Plan button (sparkle icon). If a plan already exists the button reads Regenerate.
  3. 3Wait a few seconds while Claude generates the plan. A loading spinner shows progress.
  4. 4The plan appears below the button in a monospace block. The work item status automatically advances (see below).

What you get

The generated plan follows a consistent structure:

  • Summary — 1-2 sentences describing the implementation approach.
  • Steps — Numbered list of implementation steps, each naming the file(s) to create or modify and the specific changes to make.
  • Testing — How to verify the work (manual checks, test cases to add).
  • Risks / Notes — Edge cases, required migrations, or breaking changes to watch for.

Plans are 150-300 words and designed to be actionable enough for a Claude Code session to execute directly.

Status transitions

Generating a plan automatically advances the work item status:

DraftorApprovedPlanning

If the item is already in a later status (Ready, In Progress, Review, Done), generating or regenerating the plan does not change the status — only the plan content is updated.

Developer Reference

Architecture overview

Plan generation is a straightforward request/response flow. The UI component makes a POST request to an API route, which builds a prompt from the work item data, calls Claude via the Vercel AI SDK, saves the result to the database, and returns the updated work item.

Prompt template

The prompt is built by the buildPrompt() function in app/api/work-items/[id]/plan/route.ts. It receives the work item's title, type, priority, description, and acceptance criteria:

app/api/work-items/[id]/plan/route.ts — buildPrompt()
You are a senior software engineer creating an implementation plan
for a work item in a Next.js + TypeScript + Supabase project.

Work Item:
- Title: ${title}
- Type: ${type}
- Priority: ${priority}
- Description: ${description ?? "(none)"}
- Acceptance Criteria:
  1. ${criterion.text}
  2. ...

Write a concise implementation plan in markdown. Include:

1. **Summary** — 1-2 sentences on the approach.
2. **Steps** — Numbered list of implementation steps. Each step
   should name the file(s) to create or modify and what changes
   to make. Be specific about function names, component names,
   routes, and database changes.
3. **Testing** — How to verify the work (manual checks, test
   cases to add).
4. **Risks / Notes** — Any edge cases, migrations, or breaking
   changes to watch for.

Keep it practical and actionable — this plan will be handed to a
Claude Code session for automated implementation.
Use 150-300 words total.

Model and SDK

Modelclaude-sonnet-4-20250514
SDKVercel AI SDK (ai)
Provider@ai-sdk/anthropic
FunctiongenerateText()
StreamingNo — waits for complete response before returning

API route

Endpoint
POST /api/work-items/[id]/plan

No request body is needed — the route fetches all item data from the database using the id path parameter. Returns the full updated work item as JSON.

Auth: Requires an authenticated session. The route calls getAuthContext() which validates the JWT and extracts the tenant ID.

Data flow

  1. 1.UI work-item-detail.tsx → POST /api/work-items/[id]/plan
  2. 2.API validates auth via getAuthContext()
  3. 3.API fetches work item via getWorkItemById(id)
  4. 4.API builds prompt from title, description, type, priority, criteria
  5. 5.AI generateText() calls Claude Sonnet 4
  6. 6.DB updateWorkItem(id, { plan, status? })
  7. 7.DB logActivity() — "AI plan generated for ..."
  8. 8.UI receives updated item, shows plan + success toast

Key files

FileRole
components/workspace/work-item-detail.tsxUI — Generate Plan button & plan display
app/api/work-items/[id]/plan/route.tsAPI — prompt builder, AI call, DB save
lib/data-access/work-items.tsDAL — getWorkItemById(), updateWorkItem()
lib/data-access/activity.tsActivity logging — logActivity()
components/workspace/board-view.tsxBoard Kanban view — renders work item cards