Instead of a page of charts, you can ask Claude to turn your business into a small 3D scene: a shop, shelves for products, vans for deliveries, a crowd for customers. Click any object and a card shows the stats behind it. Here's the three-step method from the reel, with all three prompts written out.
What you need
Claude (claude.ai, the desktop app or Claude Code). Connectors from the directory work on all plans; Team and Enterprise owners must enable a connector first.
Your sales data, through one of these:
Stripe connector: official, in Claude's connector directory, signs in with OAuth.
Square MCP server: official, in beta, at
https://mcp.squareup.com/mcp.Razorpay MCP server: official, covering payments, orders, refunds and settlements. Useful for Indian businesses.
Or simply a CSV export from your billing or POS software.
Three.js: a free, open-source JavaScript 3D library. Claude writes the code; you don't install anything for a single-file version.
Step by step
Connect your data. In Claude, open Customize, then Connectors, find Stripe (or add Square or Razorpay as a custom connector) and sign in. If you'd rather not connect an account, export the last 30 or 90 days as a CSV and upload it to the chat.
Prompt 1: pull a clean data summary. Paste:
Using my connected payments data (or the CSV I uploaded), build a data summary for the last 30 days. Read only; do not create, change or refund anything.
Give me one JSON object with:
- revenue_total, order_count, average_order_value
- top_products: name, units_sold, revenue (top 8)
- customers: total, new, returning
- refunds: count, amount
- daily_revenue: date and amount for each day
If a field is not available in my data, set it to null and tell me why. Don't invent numbers.Check the numbers against your dashboard before moving on.
Prompt 2: design your business as a 3D world. Upload a photo of your shop, or describe it, then paste:
Design my business as a small 3D world, using the photo or description I gave you. Don't write code yet.
Map each part of the JSON summary to a clickable object, for example:
- each top product = a shelf or box, sized by revenue
- customers = a group of simple people figures, new and returning in two colours
- daily revenue = a row of bars or a path along the floor
- refunds = a returns counter
List every object, what data it shows, its size or colour rule, and what the stats card says when clicked. Keep it simple: low-poly shapes, no external 3D models.Prompt 3: build it with Three.js. This is the step the reel calls the most important. Paste:
Now build the world you designed as a single self-contained HTML file using Three.js loaded from a CDN.
Requirements:
- Embed the JSON summary as a const at the top of the file so I can replace it later.
- Use OrbitControls so I can rotate and zoom.
- Use a Raycaster for clicks: when I click or tap an object, show a stats card with its numbers; click empty space to close it.
- Highlight an object on hover (desktop) and on tap (mobile).
- Add gentle idle animation (slow bobbing or rotation) and respect prefers-reduced-motion.
- Add a plain HTML fallback table of the same numbers below the canvas for accessibility.
- Make it work on a phone screen.
Test the click logic carefully before you give me the file.Refresh the numbers. The page you get is a snapshot. To update it, run Prompt 1 again and ask Claude to replace the JSON const in the file.
Good to know
"Live" needs more work. The connector gives Claude your data inside the chat. The HTML file holds the numbers from that moment. A truly live dashboard needs a small backend that calls the payments API with a restricted key, which is a separate project.
Stripe in India is invite-only. Stripe says businesses in India can't sign up for a new account through its website. Razorpay's official MCP server or a CSV export is the practical route for most Indian businesses.
Keep it read-only. Payment connectors can also take actions like refunds. Turn on tool approval in Claude and approve each action yourself. Stripe also requires human confirmation for some write actions.
Stripe key change: Stripe says full-access secret keys and non-agent restricted keys stop working with its MCP server in December 2026. Use OAuth or Stripe's agent API keys.
Square's remote server touches live data. Square recommends testing your prompts in a Sandbox first.
Privacy: your revenue and customer counts are business data. Don't publish or share the HTML file publicly unless you've removed anything sensitive.
Sources
Found this useful? Follow @kevinsingh.me on Instagram for a new AI tool every day, and subscribe so you don't miss the next one.