Do I need to paste my Shopify access token anywhere?

No. The Shopify AI Toolkit authenticates through the Shopify CLI — you authorize your store in the browser, as yourself, the first time Claude runs a query. There's no shpat_ token to paste into a config file. If you do use a custom-app access token for an unattended run, scope it to read access only and never commit it to a repo.

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 Shopify 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 Shopify 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 Shopify needs access to the store.

Is it safe to give Claude access to my Shopify store?

Authorize with read-only scopes — read_orders and read_products are enough for a sales dashboard. The toolkit's CLI restricts mutations to dev stores, so a reporting task can't alter production data even by accident, and in Claude you approve actions. Don't grant write scopes for a read-only reporting job.

How is this different from Shopify Analytics or a BI dashboard?

Shopify Analytics and BI tools query live data against reports you maintain — the right choice for governed reporting at scale. This approach is for a fast, shareable snapshot you can spin up in minutes and iterate by talking to Claude, then collect feedback on inline. Different jobs: one is a standing system, the other is a quick reviewable deliverable.

drafty

Build a Shopify sales dashboard with Claude

Connect Shopify to Claude with the official AI Toolkit, ask for a sales, orders, and AOV dashboard from your live store, 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 sales dashboard — total sales, order count, average order value, sales trend, and top products — generated by Claude from your real Shopify store data, then published to a drafty.im/canvas/… link. Your team clicks the exact chart 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 MCP, 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

The Shopify AI Toolkit gives Claude read access to your store through the Shopify CLI — it runs Admin GraphQL queries against your orders, products, and customers. You authorize the store once; you approve what it can touch.
Claude pulls the numbers and writes a single self-contained HTML dashboard. You iterate on it in the artifact panel until it's right.
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 Shopify

Shopify maintains the official, open-source AI Toolkit, distributed as a Claude Code plugin. It wraps the Shopify CLI so Claude can run read queries against your store's Admin GraphQL API. You connect once.

In Claude Code, add the marketplace and install the plugin:

claude

❯

/plugin marketplace add Shopify/shopify-ai-toolkit▌

claude

❯

/plugin install shopify-plugin@shopify-ai-toolkit▌

The first time Claude runs a store query, the toolkit triggers Shopify CLI authentication — you authorize through the Shopify admin in your browser, as yourself, to your own store. No secret key is pasted into a config file. When it asks for scopes, grant read scopes only (read_orders, read_products) — this dashboard never needs to write to Shopify.

Prefer to wire it manually? The toolkit's Dev MCP server installs the same way any MCP server does: claude mcp add --transport stdio shopify-dev-mcp -- npx -y @shopify/dev-mcp@latest. The plugin above is the recommended path because it also bundles the store-execute capability the dashboard needs.

Safety first

Authorize the store with read-only scopes — read_orders and read_products are enough for a sales dashboard. The Shopify CLI restricts mutations to dev stores, which keeps a reporting task from ever touching production data, but you should still never grant write scopes for a read-only job, and never commit a shpat_ access token to a repo.

Step 2 — Pull the numbers

Ask Claude in plain language. It uses the toolkit to run Admin GraphQL orders and products queries against your live store:

claude

❯

Using the Shopify AI Toolkit, pull everything we need for a sales dashboard: total sales and net sales for the last 30 days, total order count, average order value, daily sales for the last 30 days, sales this period vs. the previous 30 days, and the top 5 products by units sold. Summarize the figures before you build anything.▌

Claude runs the queries, returns the figures, and you sanity-check them against your Shopify admin Analytics before going further. This is the moment to catch a wrong assumption — a test order, an unexpected currency, refunds counted as sales — 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. Total sales as the hero number with month-over-month change, then tiles for order count and average order value, a 30-day daily sales chart, and a top-products table at the bottom. 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:

"Make total sales the biggest number and put AOV right under it."
"Add a 6-month sales trend line above the daily chart."
"Format the currency and round to whole dollars."

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, chart, or number they want changed and leaves a pinned comment — "this AOV looks high, are we including shipping and tax?" The comment is anchored to that element, not floating in a Slack thread. Claude reads the comments through the CLI, reruns the relevant Shopify 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 shipping and tax from AOV." One of those produces a correct revision; the other produces a guess.

Keeping it fresh

A toolkit-generated dashboard is a snapshot — it holds the numbers Claude pulled when it built it; it doesn't re-query Shopify 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 Shopify dashboard into a live canvas: every morning, re-pull the latest sales, orders, and AOV from Shopify via the AI Toolkit, 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

Read-only, always. A sales dashboard needs read access and nothing more. Grant read_orders and read_products, and let the CLI's dev-store mutation restriction be your second line of defense.
Check the figures before you share. The toolkit returns exactly what you ask for — if your "total sales" query includes refunds, or your AOV mixes gross and net, the dashboard will confidently show the wrong number. Reconcile against your Shopify admin Analytics once.
The link is the deliverable, not the artifact. Share the Drafty URL, not the Claude artifact preview — that's the one you can update in place.

Shopify dashboard with Claude — FAQ

Do I need to paste my Shopify access token anywhere?: No. The Shopify AI Toolkit authenticates through the Shopify CLI — you authorize your store in the browser, as yourself, the first time Claude runs a query. There's no shpat_ token to paste into a config file. If you do use a custom-app access token for an unattended run, scope it to read access only and never commit it to a repo.
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 Shopify 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 Shopify 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 Shopify needs access to the store.
Is it safe to give Claude access to my Shopify store?: Authorize with read-only scopes — read_orders and read_products are enough for a sales dashboard. The toolkit's CLI restricts mutations to dev stores, so a reporting task can't alter production data even by accident, and in Claude you approve actions. Don't grant write scopes for a read-only reporting job.
How is this different from Shopify Analytics or a BI dashboard?: Shopify Analytics and BI tools query live data against reports you maintain — the right choice for governed reporting at scale. This approach is for a fast, shareable snapshot you can spin up in minutes and iterate by talking to Claude, then collect feedback on inline. Different jobs: one is a standing system, the other is a quick reviewable deliverable.