Tutorial
How everything works
Every feature in DevvyBoard, explained step by step — no prior knowledge assumed. Buttons and menu items are shown exactly as they appear in the product, and web and mobile instructions are split wherever the gesture differs. Read it top to bottom, or jump to the feature you need from the list on the left.
1. Getting started
DevvyBoard is a kanban board with team chat, built for small dev teams — and for their AI tools. There are three ways in, and none of them takes more than a couple of minutes.
Option A — just look around first
Open the live demo. No account needed — it’s a real board with sample data you can poke at.
Option B — someone invited you
If you got an invite link, just open it. It handles sign-in and project access in one go, on web and mobile.
If you got a code (it looks like ABC12345), go to devvyboard.app/join, type it into the Invite code box, and press Continue.
Sign in when asked — press Sign in with Google, or type your email and press Send magic link, then open the link from your inbox. There is no password to remember, ever.
Option C — start your own project
Sign in at devvyboard.app/login (Google or magic link, same as above).
You land on Your projects. Press the New project button in the top corner.
Fill in Organization (your team or community name, e.g. Acme Dev) and Project (what you’re building, e.g. Launch board), then press Create project.
That’s it — you’re on your board. To set your display name and avatar (so teammates recognise you on cards and in chat), open Profile settings from the account menu.
💡 Good to know
Projects live inside an organization (we also call it a community). Your plan, member cap, and storage are counted per organization — see chapter 13.
⚠ If it didn’t work
Magic link never arrived? Check spam, and make sure you open the link on the same device and browser you requested it from.
Invite code rejected? Codes can expire. Ask the project owner to press Regenerate invite on their Team page and send you the fresh one.
2. The board
The board is columns of cards. Columns are stages (To do, In progress, Done); each card is one piece of work. Everything updates live — when a teammate moves a card, you see it move on your screen within a second, no refresh needed.
To do
Invite deep link on web
Onboarding copy pass
In progress
Auth refactor
Done
Landing hero
Add a card
Scroll to the bottom of any column and click the Add card… box.
Want it flagged from the start? Pick a Priority from the selector just above the box (optional).
Type the card’s title and press Enter. The card appears at the bottom of the column — for everyone, instantly.
Move a card
🖥️ On the web
Click and hold anywhere on a card, drag it to another column (or another spot in the same column), and let go. The gap shows you exactly where it will land.
📱 In the mobile app
Touch and hold a card until it lifts, then drag it where you want it and lift your finger. Drag towards the screen edge to scroll to other columns.
⚠ If it didn’t work
Your new card seems to be missing? Check the filter at the top of the board — if My tasks is selected, the board only shows cards assigned to you. Press All to see everything.
3. Cards in depth
A card’s title is only the headline. Click the card to open its detail panel — that’s where the full story lives, and it’s the same on web and mobile.
Auth refactor
Move session handling behind a single service. Track migration steps in comments before we cut over production traffic.
Attachments
migration-checklist.pdf
240 KB
Comments
Sam2h ago
JWT refresh path is ready for review on staging.
JoYesterday
Linked the rollout doc in the attachment above.
- Title — click it to rename the card.
- Description — the longer write-up: requirements, links, acceptance criteria. Editable on web and mobile.
- Assignee — who owns it. New cards start as Unassigned; pick a teammate from the list. The card then shows their avatar and appears in their My tasks view.
- Deadline — pick a date. Overdue cards are visibly flagged on the board.
- Priority — how urgent it is. Also settable without opening the card: right-click the card and choose Set priority (or Clear priority to remove it).
- Comments — discuss the task on the task. Comments update in realtime, so two people can talk on a card like a mini chat thread.
- Attachments — drop in screenshots, images, and PDFs. They stay with the card instead of getting lost in chat history.
💡 Good to know
On web, the card also shows an activity history — who changed the assignee or deadline, and when. Handy for “wait, who moved this?” moments.
4. My tasks filter
At the top of every board there are two buttons: All and My tasks. That’s the whole feature — and it’s the one you’ll use most.
Press My tasks. The board hides every card that isn’t assigned to you. Columns stay where they are, so you still see what stage your work is in.
Press All to go back to the full team view.
If you press My tasks and see “No tasks assigned to you.” — congratulations, your plate is clean (or nobody has assigned you anything yet; see chapter 3 for how assignment works).
5. Categories & groups
Columns answer “what stage is this in?”. Groups answer “what is this about?”. A group (think: Marketing, Auth, Bug bash) shows up as a collapsible folder inside every column, and a card keeps its group as it moves across the board.
Create a group
🖥️ On the web
1. Right-click any empty space in a column.
2. Choose ＋ Add group from the menu.
3. Type a name in the New group dialog and press Create group.
📱 In the mobile app
1. Touch and hold any empty space in a column.
2. A sheet slides up — choose the add-group option.
3. Name it and confirm. Same group, same board, every device.
Put cards in a group
- Drag it in — drop a card inside the group’s section. You can even drop a card straight onto a collapsed group header and it files itself inside.
- Or use the menu — right-click a card (long-press on mobile), choose Move to group, and pick one. Choose Remove from group to take it back out.
Collapse, rename, delete
- Collapse / expand: click (or tap) the group’s header. The arrow flips between ▼ (open) and ▶ (folded), and the header shows how many cards are inside.
- Rename: right-click the group header → Rename group.
- Delete: right-click the group header → Delete group. The cards are not deleted — they just become ungrouped again.
💡 Good to know
Collapse state is shared with your whole team, live. When you fold “Backlog grooming” before a demo, it folds for everyone — the board is curated together, not per person.
Boards support up to 50 groups, which is plenty before it stops being organising and starts being art.
⚠ If it didn’t work
Right-click opened the browser menu instead? Make sure you’re right-clicking empty column space, not a card — cards have their own menu (priority, move to group).
6. Team chat
Every project has a chat room, and you can open direct messages with any teammate. Chat isn’t a separate app bolted on — it’s wired into the board, which is what makes the next three features possible.
Chat
Alex
Sam
Sam
Set deadline from message?
Set Fri 19 Jun as the deadline for Auth refactor?
The basics
- Type in the Message… box and press the send button (or Ctrl+Enter).
- Images: use the attach button in the composer to share screenshots and mocks (JPEG, PNG, GIF, or WebP, up to 5 MB).
- DMs: pick a teammate from the member list to open a private conversation. Mentions and card links work there too.
- Unread badges: when someone @mentions you, a badge appears on the Chat tab so you don’t miss it.
Mentions — the @ key does three things
Type @ and a name — pick from Teammates to notify a person.
Type @ and a card’s title — pick from Tasks to drop a link that jumps straight to that card.
Type @devvy to summon the AI teammate — that one gets its own chapter, next.
Deadlines straight from conversation
Mention a card and a date in the same message — e.g. “@Auth refactor done by Friday” — and DevvyBoard asks: Set deadline from message? Press Assign deadline (or Update deadline if the card already has one) and the card is dated; press Not now and nothing changes. A commitment in chat becomes a deadline on the board in one click.
💡 Good to know
Owners and coordinators can rename the project room — useful when one project has a few eras (“v1 sprint”, “beta”, “launch week”).
7. @devvy, your AI teammate
Devvy is an AI teammate that lives in your project chat. It can see the recent conversation and the board, and it acts only when you mention it. There is nothing to install or configure.
How to summon it
In any project room, type @devvy — the autocomplete shows it with a 🤖 and an AI badge.
Write your request in plain English in the same message, then send.
Devvy replies in the chat like a normal teammate (with the AI badge so nobody is fooled), and confirms anything it changed on the board.
What it can do — with example prompts
- Answer & summarize — “@devvy what’s still blocking the release?”
- Create cards — “@devvy make a card for the login bug Sarah just described”
- Move cards — “@devvy move the API rework to In progress”
- Set priorities — “@devvy bump the payment bug to urgent”
- Set deadlines — “@devvy give the beta signup card a Friday deadline”
- Edit cards — “@devvy rewrite the onboarding card’s description to include the new steps”
💡 Good to know
Devvy deliberately can’t delete cards or change who’s assigned — if you ask, it says so. Destructive things stay human-only.
Every plan includes free monthly Devvy credits; Pro raises the pool.
⚠ If it didn’t work
Devvy didn’t respond? Make sure @devvy is actually in the message text, and that your request is in the same message as the mention. One request per message works best.
8. Ideas backlog
Not everything deserves a card yet. The Ideas page is a lightweight backlog for rough concepts — park them there, and promote the good ones onto the board when their time comes.
Offline draft mode for cards
Autosave card edits when the connection drops.
Slack notifications for mentions
Forward @mentions to a channel webhook.
Recurring deadlines on cards
Repeat weekly stand-up tasks without retyping dates.
Open the Ideas tab in your project.
Type a title in Idea title, optionally add Description (optional), and press Add idea.
When an idea is ready to become real work, select it, look for Promote to column, and press the name of the column it should land in. It becomes a card at the top of that column, and leaves the backlog.
Changed your mind about one? Select it and press Delete idea.
9. Public roadmap
Share what you’re building with people who shouldn’t need an account — users, stakeholders, your Discord. The public roadmap is a read-only page at a link you choose, fed live by your board.
Publish it (owners only)
Open the Team tab and find the Public roadmap section.
Choose a Slug — that’s the last part of your public link, e.g. my-product-roadmap becomes devvyboard.app/p/my-product-roadmap. At least 3 characters, lowercase letters, numbers, and hyphens.
Give it a Title and an optional Summary (optional) — a short devlog-style intro visitors see at the top.
Press Save, then Publish. Use Copy link to grab the URL and share it anywhere.
Extras
- Copy embed code — an iframe snippet to drop the roadmap into your own site.
- Download PNG / Download JSON / Download HTML — snapshots for announcements, data, or a static copy.
- Press Unpublish any time — the page immediately returns 404 and is not indexed.
10. Blueprints (Pro)
Blueprint is a drawing canvas for your product’s vision: map screens, services, data stores, and decisions as connected nodes, link them to real cards, and watch the diagram light up as work gets Done. It’s a Pro feature, and it’s desktop-only — on a phone you’ll see “Blueprint is a desktop experience”, because the canvas genuinely needs the room.
Draw your first diagram
Open the Blueprint tab in your project (desktop browser).
In the Add to canvas palette on the left, click a node type to drop it on the canvas. There are seven: screen (a page or view), component (a UI piece), service (backend logic), data (a store or table), decision (a branch point), note (free commentary), and group (a resizable frame to visually gather related nodes).
Drag nodes by their body to arrange them. Connect two nodes by dragging from the small handle on one node’s edge to another node.
Click a node and use the inspector on the right to set its Title, Description, and Color. Click a connection to change its kind — flow (user moves this way), calls (this invokes that), or depends (this needs that) — and give it a label.
Link nodes to cards — the killer feature
Select a node and find Linked cards in the inspector.
Type in Find card to link… and pick a card from your board.
When that card reaches a Done column, the node visibly lights up on the canvas. Your architecture diagram becomes a live progress map — anyone can see at a glance which parts of the vision are built.
The toolbar, left to right
- Blueprint switcher + ★ — a project can hold several blueprints; the dropdown switches between them, + New creates one, and the star marks one as primary (the default one agents and teammates see first). Click the title to rename; Delete asks for confirmation first.
- Save state — the canvas autosaves as you work: Saved, Saving…, or Unsaved changes. You never press save.
- History — opens Version history. Versions are captured automatically while you edit; you can also type a name in Label this version… and press Save to bookmark a moment. Press Restore on any version to go back — a safety snapshot called “Before restore” is taken first, so even a restore can be undone.
- ⛶ Full screen — the whole editing suite (canvas, palette, inspector, history) goes edge-to-edge. Press ✕ Exit full screen or Esc to come back.
- Export PNG — downloads the diagram as an image for docs and decks.
Editing with teammates
Everyone can watch live, but only one person draws at a time — you’ll see who: “You are editing” or “Alex is editing”, with avatars of everyone present. If a teammate holds the pen and you need it, press Take over. No merge conflicts, no overwritten work.
💡 Good to know
AI agents connected over MCP (chapter 11) can read your blueprint as a text outline and draw on it — adding nodes and connections without ever moving anything you placed by hand. A snapshot is automatically taken before any agent edit, so an AI change is always one Restore away from undone.
⚠ If it didn’t work
Seeing “Read-only — editing the Blueprint needs an active Pro plan”? Your organization is on Free. Anyone can still view; drawing needs Pro — see chapter 13 for how to upgrade.
Canvas won’t let you edit? Check the presence pill — a teammate may be holding the pen. Press Take over.
11. MCP & AI agents
If you use an AI coding tool — Claude Code, Cursor, Codex CLI — it can operate your DevvyBoard directly: read the board, file and move cards, triage ideas, post in chat, and read or draw the Blueprint. The connection standard is called MCP (Model Context Protocol); you don’t need to understand it, just plug it in.
Connect in three steps
Click your profile picture (top-right) and choose Connectivity.
Under API keys, create a key: give it a name (e.g. Cursor on laptop), tick read and/or write, pick which projects it may touch, and press Create. Copy the key immediately — it starts with dbk_live_ and is shown only once.
Add the server to your AI tool with npx -y devvyboard-mcp and your key — the exact config block for each tool is on the developer docs page. Then ask your AI to “list my DevvyBoard projects” to confirm it works.
💡 Good to know
Keys are scoped and revocable: a read-only key can never change anything, and Revoke on the Connectivity page kills a key instantly. Free includes 300 requests and 50 writes per day per organization; Pro lifts the limits.
12. Team & roles
Invite people
Open the Team tab and find Invite teammates.
Press Copy link and send it — one link handles install, sign-in, and project access on web and mobile. Or read them the Code shown next to it.
Worried a link leaked? Press Regenerate invite — the old code stops working immediately.
The three roles
- OWNER — runs the project: manages roles, removes members, publishes the roadmap, sees the activity feed.
- COORDINATOR — can assign work and rename the project room; the trusted-lieutenant role.
- MEMBER — full board and chat access; ships the work.
Owners change roles from the member list: Make coordinator / Remove coordinator, and Remove to take someone off the project (each asks you to confirm first).
💡 Good to know
The Team page also shows an activity feed — who moved which card, who changed deadlines, and when.
13. Plans & the mobile app
Free vs Pro
| Plan | Price | Members | Storage | Extras |
|---|---|---|---|---|
| Free | $0 | 3 per community | 250 MiB | Core collaboration, MCP (300 req/day), Devvy credits |
| Pro | $14.99/mo or $149.99/yr | 25 per community | 50 GiB | Blueprint editing, higher MCP limits, bigger Devvy pool |
Limits are per organization (community). Exact prices are shown in the app and may vary by region.
Upgrading
Subscriptions are purchased and managed in the mobile app via Google Play in-app purchase — the web app can’t process payments. Open the app → your project → Billing, upgrade there, and the whole organization gets Pro everywhere, web included. Cancel or restore purchases any time from the same place.
The mobile app
The Android app carries the full kit: the board with drag-and-drop, categories with long-press menus, card details with comments and attachments, team chat with @devvy, ideas, and My tasks — all live-synced with the web in realtime.
The home-screen widget (Android)
Long-press your home screen and tap Widgets.
Choose Devvyboard Kanban and drop it where you like.
Pick the workspace when prompted. The widget shows a live snapshot of your board — swipe between column chips, and tap any card to jump straight to it in the app.
⚠ If it didn’t work
Widget stuck on “Loading board”? Open the app once so it can fetch a fresh snapshot, then check the widget again.
Still stuck?
The fastest way to learn is to click around the live demo — you can’t break anything. Setting up AI tools? The developer docs have copy-paste configs. And a human reads every mail to the contact address in the footer.