Quickstart

Quickstart

Get from zero to a living map in about two minutes - add your services, workflows, or AI agents, map the connections, attach cost, and export a CLAUDE.md your agents can read.

Prerequisites

A Canopy account - the Free plan is enough to follow this guide.

1

Create a map

From the dashboard click New map, give it a name (e.g. acme-platform), then pick how you want to populate it. There's no wrong choice - all paths land on the same editable canvas.

Don't have a canopy.json yet?

No file yet? Generate one with AI

Paste this into any LLM, then paste the JSON it returns back.

You are an expert software architect and workflow designer. Generate a `canopy.json` map for Canopy (https://canopy.8starlabs.com).

First, read Canopy's machine-readable docs so you use the exact schema and only valid icon slugs:
- Map schema (every field + accepted values): https://canopy.8starlabs.com/docs/maps/architecture-as-code.md
- Icon / brand slugs: https://canopy.8starlabs.com/docs/maps/icons.md
- Full docs in one file (optional): https://canopy.8starlabs.com/llms-full.txt

Then, from the system or workflow I describe at the bottom, output ONLY a valid canopy.json - a single JSON object, no prose and no markdown code fence - shaped like:
{
  "name": "<short map name>",
  "nodes": [
    { "id": "web", "label": "Web app", "tech": "Next.js", "brand": "nextdotjs", "x": 80, "y": 120 },
    { "id": "agent", "label": "Review agent", "tech": "OpenAI", "brand": "openai", "purpose": "Classifies inbound requests", "x": 320, "y": 120 },
    { "id": "approval", "label": "Human approval", "tech": "review step", "brand": "generic-approval", "x": 560, "y": 120 }
  ],
  "edges": [
    { "source": "web", "target": "agent", "label": "submits request" },
    { "source": "agent", "target": "approval", "label": "needs review" }
  ]
}

Rules:
- Every node needs a unique `id` and a `label`. Use a real `brand` slug from the icon library above; for internal workflow steps use generic slugs like `generic-workflow`, `generic-agent`, `generic-approval`, `generic-webhook`, `generic-job`, or `generic-decision`.
- Add `edges` for real dependencies, handoffs, data flow, approval flow, or workflow order (`source` and `target` reference node ids).
- Optionally add `tech`, `spend`, `purpose`, `billing`, `x`, and `y` per the schema.
- Be accurate to what I describe - do not invent services, apps, agents, or manual steps.

My system or workflow:
<paste your architecture or workflow here: a description, your README / docs, your infra list, SOP, AI agent flow, customer journey, or repo file tree>
  • Import from GitHub - install the Canopy GitHub App, pick a repo, and Canopy detects services automatically from your package.json, lockfile, and infra files.
  • Browse the library - search tools, workflows, AI platforms, services, and hand-pick the pieces that make up your system.
  • Browse templates - start from a curated starter or community template in the templates gallery. Canopy copies it straight into your workspace, ready to edit.
  • Ask Canopy AI Coming soon - describe your system in plain English and Canopy generates the map. Pro
  • Start blank - drop nodes onto the canvas one at a time.
2

Connect GitHub (if you chose that path)

Canopy will prompt you to install the Canopy GitHub App on your account or organisation. Once installed, select the repo and Canopy parses it and places a node for each detected service.

No GitHub? Skip straight to step 3 and add nodes manually or from the library.

3

Map the connections

Every node has an edge handle on its right side. Drag it to another node to draw a directed arrow - web → api, api → db, and so on. Hit Auto-layout in the toolbar to re-flow the graph at any time, or drag nodes into position manually.

WebAPIDBLLM
drag the handle on any node to draw an edge

Labels are optional - double-click an edge to add one (gRPC, webhook, async).

4

Attach cost and metadata

Click any node to open the Inspector panel on the right. Fill in the monthly cost, billing model (usage-based, flat, per-seat), owner, SLA, and status. Costs roll up per group - see Intel for how roll-ups and budgets work.

API

node · trpc

Name
API
Tool / step
node · trpc
Purpose
API gateway
Monthly cost
$2.1k
Billing type
flat
5

Export for your agents

Open the map's Export menu and choose CLAUDE.md or AGENTS.md. Drop the file in your repo root so Claude Code, Cursor, or any agent that reads project files sees your full architecture - services, cost, owners, and topology - before it touches a line of code. See all export formats.

Here's what a finished export looks like - the 8starlabs/ui repo scanned into Canopy, with every format previewed:

8starlabs/ui
Web AppNext.js 16FreeUIReact 19 · RadixStylingTailwind v4DocsMDX · FumadocsTypesTypeScript 5Made with Canopy
A real example - 8starlabs/ui scanned into a map, then exported. PNG · Markdown · CLAUDE.md · AGENTS.md.

Next steps

  • Nodes - the building blocks and their metadata fields.
  • Intel - roll-ups, budgets, and display currency.
  • Stack suggestions - spot overlapping tools and gaps.
  • MCP server - let agents query your live map over MCP instead of a static file.
  • Roles & permissions - who can see and edit what.
  • Templates - clone a community map or sell your own.

to paste into any AI.

Ask ChatGPT about this page.

Ask Claude about this page.

Need help? Sign in to chat with support

Have ideas?

General inquiry? Email support.