drafty
Customer.io logo

Build a Customer.io campaign dashboard with Claude

Connect the Customer.io CLI to Claude, ask for a campaigns, journeys, and deliverability dashboard from your live numbers, and publish it to a link your team comments on directly — no BI tool, no screenshots pasted into Slack.

What you'll build
A self-contained messaging dashboard — sends and deliverability this week, top campaigns by open and click rate, active journeys and where people are flowing through them, bounce and spam complaint rates — generated by Claude from your real Customer.io data, then published to a drafty.im/canvas/… link. Your team clicks the exact campaign or number they want changed and leaves a note. Claude reads the comments and ships a revised version to the same URL.

This is an end-to-end example: connect a data source over the CLI, generate a dashboard from live numbers, and close the review loop on one link. Total time, start to shared link, is under fifteen minutes. The same shape works for any of the other examples — only the connection step changes.

Here's the finished dashboard, published to a canvas — click any tile or number to leave a comment, exactly as your team would:

Live canvas — comment on any elementOpen ↗

The three moving parts

  1. The Customer.io CLI gives Claude read access to your workspace — campaigns, journeys, segments, message delivery metrics — through a single cio api command backed by a service account token. You decide what that token can touch.
  2. Claude pulls the numbers and writes a single self-contained HTML dashboard. You iterate on it in the artifact panel until it's right.
  3. Drafty turns that HTML into a stable link your team reviews. Comments pin to the exact element; Claude ships the fix to the same URL.

The generation step is fast now. The part this example is really about is the third one — getting the dashboard in front of people without losing their feedback to a screenshot circled in Preview.

Step 1 — Connect the Customer.io CLI

Customer.io ships an official command-line tool. Install it once, then authenticate with a service account token — the CLI exchanges it for a short-lived JWT and refreshes automatically.

Install it:

claude
npm install -g @customerio/cli

Authenticate — create a service account token under Account Settings → API Credentials → Service Accounts → Create Token, give it read permissions only, then log in:

claude
cio auth login

Paste the token (it looks like sa_live_…) when prompted, and confirm it took with cio auth status. From here, Claude can run cio api calls against the Journeys UI and CDP Data Pipelines APIs — cio schema lists the available read endpoints.

Safety first
Scope the service account token to read access only — this dashboard never needs to create or edit a campaign. Never paste the token into a config file you commit, and never share a token with write scopes for a reporting task. The CLI stores it locally after cio auth login; that's the only copy it needs.

Step 2 — Pull the numbers

Ask Claude in plain language. It uses the CLI's read endpoints to fetch real data:

claude
Using the Customer.io CLI (cio api), pull everything we need for a messaging dashboard: total messages sent and delivered over the last 7 days, overall delivery rate, bounce rate and spam complaint rate, the top 6 campaigns by open and click rate, and a list of active journeys with how many people are currently in each. Summarize the figures before you build anything.

Claude calls Customer.io, returns the figures, and you sanity-check them against the Customer.io app before going further. This is the moment to catch a wrong assumption — the wrong workspace, a date window that excludes a big send, a campaign you thought was paused — while it's cheap.

Step 3 — Build the dashboard

Once the numbers look right, ask for the artifact:

claude
Build a single self-contained HTML dashboard from those figures. Deliverability as the hero — sends, delivered, and delivery rate this week with the change vs last week — then tiles for bounce rate and spam complaints. A table of top campaigns with open and click rates, and a section showing active journeys with the count of people in each stage. Clean, no external dependencies — inline the CSS and any chart code.

Claude renders it live in the artifact panel. Iterate in place — you're not regenerating from scratch:

Step 4 — Publish to Drafty for review

A Claude artifact link is a preview, not a stable URL — iterate the artifact and the link you already sent now shows the old version. Ask Claude to publish it to a Drafty canvas instead, so the link you share always stays current:

claude
Publish this dashboard to Drafty as a canvas and give me the shareable link.

Claude pushes the dashboard and hands back a drafty.im/canvas/… link that renders on any device. Send it — your team opens it in a browser, no login and no Claude account needed.

Step 5 — The review loop

This is the part that's not obvious until you've done it once.

A reviewer clicks the specific tile, campaign, or number they want changed and leaves a pinned comment — "this bounce rate looks high, is the cold re-engagement campaign included?" The comment is anchored to that element, not floating in a Slack thread. Claude reads the comments through the CLI, reruns the relevant Customer.io query if needed, and pushes a revised dashboard to the same URL. The reviewer refreshes and sees the change; the thread stays attached to the element.

The mechanic matters because of what it removes. A Slack message about a chart produces "the number on the left looks wrong." A pinned comment on the actual tile produces "this — exclude the cold re-engagement campaign from the bounce rate." One of those produces a correct revision; the other produces a guess.

Keeping it fresh

A CLI-generated dashboard is a snapshot — it holds the numbers Claude pulled when it built it; it doesn't re-query Customer.io when someone opens the link. For a weekly review or a board-ready snapshot, that's fine.

To make it a live canvas that always shows today's figures, copy this prompt — Claude sets up the refresh for you and schedules it to run on its own:

claude
Turn this Customer.io dashboard into a live canvas: every morning, re-pull the latest sends, deliverability, campaign, and journey numbers via the Customer.io CLI, rebuild the dashboard, and push a new version to the same canvas URL so the link always shows today's figures. Schedule it to run daily on its own.

The link stays stable while the content updates underneath it — see keeping a canvas updated automatically.

What to watch for

Customer.io dashboard with Claude — FAQ

Do I need to paste my Customer.io credentials anywhere?
You create a service account token in Customer.io (Account Settings → API Credentials → Service Accounts) and pass it once to `cio auth login`. The CLI exchanges it for a short-lived JWT and stores it locally — you never put the raw token in a committed config file. Scope it to read access only for a reporting dashboard.
Is the dashboard live or a snapshot?
A snapshot. It contains the numbers Claude pulled when it built the file; it does not re-query Customer.io when someone opens the link. To refresh it, ask Claude to repull and re-push to the same URL — or put that on a daily schedule so the stable link always shows current numbers.
Can my team comment without a Customer.io or Claude account?
Yes. The dashboard is published to a Drafty canvas link that renders in any browser. Reviewers click the exact element they want changed and leave a pinned comment with no login required. Only the person connecting Customer.io needs access to the account.
Is it safe to give Claude access to my Customer.io workspace?
Use a service account token scoped to read access only, and a messaging dashboard never needs more than that. Every call goes through the official CLI, and in Claude you approve actions. Don't issue a token with write scopes for a read-only reporting task, and revoke it from Customer.io if you ever need to.
How is this different from Customer.io's built-in reports?
Customer.io's native reporting and Journeys analytics query live data inside the product — the right place for day-to-day campaign monitoring. This approach is for a fast, shareable snapshot that pulls across campaigns, journeys, and deliverability into one view you can spin up in minutes, iterate by talking to Claude, then collect feedback on inline. Different jobs: one is the standing product, the other is a quick reviewable deliverable.