# Boards

Boards Demo

1x

Boards let you visually plan features, map out dependencies, and turn your ideas into AI-powered development prompts — all in one place.

Think of Boards as a whiteboard for your project. You can lay out features as cards, draw connections between them to show how they relate, and when you're ready — hit **Build** to send the entire plan to AI for implementation.

## [Getting Started](/content/docs/boards#getting-started/index.html)

### [Creating a Board](/content/docs/boards#creating-a-board/index.html)

### [Switch to Boards](/content/docs/boards#switch-to-boards/index.html)

Switch to the Boards tab or press `Cmd+5` / `Ctrl+5`.

### [Create a New Board](/content/docs/boards#create-a-new-board/index.html)

Click **New Board** and give it a title (e.g., "User Authentication Flow" or "Q1 Roadmap"). Optionally add a description for extra context.

### [Start Planning](/content/docs/boards#start-planning/index.html)

You'll land on a blank canvas ready for your ideas.

### [Your Board Library](/content/docs/boards#your-board-library/index.html)

All your boards are displayed as cards in a grid. Each card shows the title, description, and when it was last updated. Click any card to open it, or hover and click the trash icon to delete it.

## [Working on a Board](/content/docs/boards#working-on-a-board/index.html)

### [Adding Features](/content/docs/boards#adding-features/index.html)

Click the **Add** button in the toolbar, give your feature a name and description, and it appears as a card on the canvas. You can add as many as you need.

### [Editing Features](/content/docs/boards#editing-features/index.html)

- **Double-click the title** to rename a feature
- **Double-click the description** to add or edit details
- Click anywhere else to save your changes

### [Mentioning Files](/content/docs/boards#mentioning-files/index.html)

Inside a feature's description, type `@` to reference files from your project. This is powerful — when you send the board to AI later, it will know exactly which files are relevant to each feature.

### [Connecting Features](/content/docs/boards#connecting-features/index.html)

Drag from one card's handle to another to draw a connection. These connections represent dependencies or relationships — for example, "User Login" might connect to "Dashboard" to show that login must happen first. Animated arrows show the direction of the flow.

To remove a connection, select it and press `Delete` or `Backspace`.

### [Organizing the Canvas](/content/docs/boards#organizing-the-canvas/index.html)

- **Drag cards** anywhere on the canvas to arrange them how you like
- Use **Auto Layout** to instantly organize everything into a clean grid
- **Zoom in and out** with the controls, and use the **minimap** for quick navigation

## [Building with AI](/content/docs/boards#building-with-ai/index.html)

This is where Boards really shine.

Once your board has features, descriptions, file references, and connections laid out, click the **Build** button. This takes everything on your board — every feature, every connection, every file mention — and sends it as a structured prompt to your active AI conversation.

The AI will:

- Read and understand each feature
- Respect the connection flow and dependencies
- Use your mentioned files as context
- Implement changes that satisfy each feature while keeping the overall system coherent

Instead of explaining your entire plan in a long message, Boards lets you **show** the AI what you want — visually.

## [Use Cases](/content/docs/boards#use-cases/index.html)

- **Feature Planning** — Map out your product roadmap with cards and connections
- **Architecture Design** — Visualize how components relate to each other
- **Step-by-Step Implementation** — Break a big task into ordered steps, then let AI handle the execution
- **Dependency Management** — Clearly see what needs to be built before what

## [Tips](/content/docs/boards#tips/index.html)

Keep feature descriptions focused — the clearer you are, the better AI understands your intent.

- Use `@` file mentions liberally so the AI knows which files to work with
- Draw connections to show order of implementation — AI respects this flow
- Use **Auto Layout** if things get messy, then fine-tune positions manually.