Tutorial · Step-by-step

Intermediate

30–45 min

Build a CRM Dashboard from Spreadsheet Export

Turn CRM exports into live APIs and generate a working dashboard with customer overview, deal pipeline, and activity feed — using Cursor or Claude Code.

CRM Export

crm-export/

customers.csv
deals.csv
activities.csv
owners.csv
notes.csv

API Generated

GET/v1/apis/customers

GET/v1/apis/deals

+ activities, owners, notes

Dashboard

CRM Dashboard

Customer overview, deal pipeline, revenue metrics, and activity feed — powered by live APIs.

Why this matters

Most CRM data already exists in spreadsheets
Dashboards need APIs, not CSV files
AI coding tools can build the UI in minutes

Step 1 Step 2 Step 3 Step 4 Step 5 Step 6

Step 1

See the End Result

Before exporting CSV files, picture the CRM dashboard you are building. Each section maps to one API Butler endpoint — customer table, pipeline board, revenue cards, and activity feed.

Customer overview with search and industry filters
Deal pipeline board with stage columns
Revenue metrics aggregated from deal values
Recent activity timeline per account
Customer detail view with notes

$284KPipeline

GET /v1/apis/deals

18Open Deals

42Customers

Customer Table

GET /v1/apis/customers

Deal Pipeline

Lead

Proposal

Won

GET /v1/apis/deals

GET /v1/apis/customersCustomer Table
GET /v1/apis/dealsDeal Pipeline
GET /v1/apis/dealsRevenue Metrics
GET /v1/apis/activitiesActivity Feed
GET /v1/apis/notesCustomer Detail View

Step 2

Design Your Datasets

Create realistic CRM datasets. Use shared IDs — customers.csv is the hub. Deals, activities, and notes join through customer_id; owners link via deals.owner.

customers.csv

Central CRM table — deals, activities, and notes join through customer_id. Owners link via deals.owner.

deals.csvjoins via customer_idowner → owners.csv

activities.csvjoins via customer_id

notes.csvjoins via customer_id

owners.csvreferenced by deals.owner

customers.csv

Core CRM account records — the hub table every other dataset joins to.

idcompany_namecontact_nameemailindustrycreated_at

csv

      id,company_name,contact_name,email,industry,created_at
1,Acme Corp,Sarah Chen,[email protected],saas,2024-01-10
2,Northwind Labs,James Park,[email protected],saas,2024-02-14
3,Blue Ridge Co,Emily Walsh,[email protected],manufacturing,2024-03-22
4,Vertex Systems,Marcus Lee,[email protected],saas,2024-04-05
5,Coastal Analytics,Anna Rivera,[email protected],fintech,2024-05-18

deals.csv

Sales opportunities linked to customers — powers pipeline and revenue metrics.

idcustomer_idtitlevaluestageowner

csv

      id,customer_id,title,value,stage,owner
1,1,Enterprise Renewal,48000,proposal,sarah
2,2,Platform Expansion,125000,negotiation,james
3,3,Starter Upsell,8500,qualified,emily
4,4,Annual Contract,24000,closed_won,marcus
5,5,Analytics Add-on,12000,lead,anna
6,1,Support Package,6000,closed_won,sarah

activities.csv

Calls, emails, and meetings for the activity feed.

idcustomer_idtypedescriptioncreated_at

csv

      id,customer_id,type,description,created_at
1,1,call,Discovery call with Sarah Chen,2026-06-10T10:00:00Z
2,2,email,Sent proposal for Platform Expansion,2026-06-09T14:30:00Z
3,4,meeting,Contract review with Marcus Lee,2026-06-08T16:00:00Z
4,5,note,Follow-up on Analytics Add-on interest,2026-06-07T11:15:00Z
5,1,email,Renewal terms sent,2026-06-06T09:45:00Z

owners.csv

Sales reps and account owners referenced by deals.owner.

idnameemailteam

csv

      id,name,email,team
1,Sarah Chen,[email protected],enterprise
2,James Park,[email protected],enterprise
3,Emily Walsh,[email protected],smb
4,Marcus Lee,[email protected],mid-market
5,Anna Rivera,[email protected],smb

notes.csv

Account notes for customer detail views.

idcustomer_idcontentauthorcreated_at

csv

      id,customer_id,content,author,created_at
1,1,Interested in annual billing discount,sarah,2026-06-01T09:00:00Z
2,2,CTO wants API integration details,james,2026-05-28T14:00:00Z
3,4,Renewed for 2 years — reference account,marcus,2026-05-20T11:30:00Z
4,5,Evaluating competitor pricing,anna,2026-06-05T16:00:00Z

Step 3

Publish Your APIs

Upload CRM exports to API Butler. Each CSV becomes a hosted GET endpoint with filtering, pagination, and JSON responses — ready for your dashboard.

Export
CRM Export
Export contacts, deals, and activities from HubSpot, Salesforce, or your spreadsheet.
2
Upload Current
CSV Upload
Upload each CRM dataset to API Butler — customers, deals, activities, owners, notes.
3
Generate
API Generated
Each CSV becomes a hosted GET endpoint with filtering and pagination.
4
Connect
Endpoints Available
Copy URLs and wire them into Cursor or Claude Code.

CRM Export

crm-export/

customers.csv
deals.csv
activities.csv
owners.csv
notes.csv

API Generated

GET/v1/apis/customers

GET/v1/apis/deals

+ activities, owners, notes

Dashboard

CRM Dashboard

Customer overview, deal pipeline, revenue metrics, and activity feed — powered by live APIs.

GET/v1/apis/customers

Customer records with industry filtering

GET/v1/apis/deals

Pipeline deals with stage, value, and owner

GET/v1/apis/activities

Calls, emails, meetings per customer

GET/v1/apis/owners

Sales reps and team assignments

GET/v1/apis/notes

Account notes for detail views

bash

      # List customers with pagination
curl "https://api.getapibutler.com/v1/apis/customers?limit=25"

# Filter by industry
curl "https://api.getapibutler.com/v1/apis/customers?filter[industry]=saas"

# Pipeline deals in proposal stage
curl "https://api.getapibutler.com/v1/apis/deals?filter[stage]=proposal"

# Deals owned by Sarah
curl "https://api.getapibutler.com/v1/apis/deals?filter[owner]=sarah"

Sample response — GET /deals?filter[stage]=proposal

json

      {
  "data": [
    {
      "id": 1,
      "customer_id": 1,
      "title": "Enterprise Renewal",
      "value": 48000,
      "stage": "proposal",
      "owner": "sarah"
    },
    {
      "id": 2,
      "customer_id": 2,
      "title": "Platform Expansion",
      "value": 125000,
      "stage": "negotiation",
      "owner": "james"
    }
  ],
  "meta": {
    "limit": 25,
    "offset": 0,
    "count": 2,
    "total": 24
  }
}

Step 4

Map APIs to the Dashboard

Assign each dashboard section to the endpoint that owns its data. Revenue metrics aggregate from the deals API — same endpoint as the pipeline board, filtered and summed differently.

$284KPipeline

GET /v1/apis/deals

18Open Deals

42Customers

Customer Table

GET /v1/apis/customers

Deal Pipeline

Lead

Proposal

Won

GET /v1/apis/deals

GET /v1/apis/customersCustomer Table
GET /v1/apis/dealsDeal Pipeline
GET /v1/apis/dealsRevenue Metrics
GET /v1/apis/activitiesActivity Feed
GET /v1/apis/notesCustomer Detail View

Step 5

Wire Up Frontend & AI

Use Cursor and Claude Code to generate the CRM dashboard. Paste your endpoint URLs into the prompts below to build a customer table, pipeline board, revenue metrics, and activity timeline wired to live data.

CRM Data

customers.csv, deals.csv, activities.csv, owners.csv, notes.csv

API Butler

Five hosted GET endpoints with filtering and pagination

Cursor / Claude Code AI

Paste endpoint URLs — generate types, hooks, and dashboard UI

Dashboard Generated

Customer table, pipeline board, revenue metrics, activity timeline

Prompt for Cursor

prompt

      Build a modern CRM dashboard that consumes these API Butler REST endpoints.

Endpoints (paste your URLs):
- Customers: [PASTE_CUSTOMERS_ENDPOINT]
- Deals: [PASTE_DEALS_ENDPOINT]
- Activities: [PASTE_ACTIVITIES_ENDPOINT]
- Owners: [PASTE_OWNERS_ENDPOINT]
- Notes: [PASTE_NOTES_ENDPOINT]

Each endpoint returns { data: [], meta: { limit, offset, count, total } }.

Requirements:
1. CRM dashboard overview — total pipeline value, open deals, customer count, recent activity count
2. Customer table — company name, contact, industry, search, and filter by industry with pagination
3. Deal pipeline board — kanban columns by stage (lead, qualified, proposal, negotiation, closed_won)
4. Revenue metrics — aggregate deal values by stage; highlight top deals and won revenue
5. Activity timeline — recent calls, emails, meetings with customer context and relative timestamps
6. Customer detail view — header from customers API + notes list from notes API
7. Reusable API hooks/composables with loading, empty, and error states for each endpoint
8. Responsive layout — pipeline and tables stack on mobile
9. Reuse existing project conventions; do not add new state libraries unless already present
10. Never hardcode mock rows once endpoints are provided

Prompt for Claude Code

prompt

      Generate a CRM dashboard from these API Butler GET endpoints.

Endpoints (paste your URLs):
- Customers: [PASTE_CUSTOMERS_ENDPOINT]
- Deals: [PASTE_DEALS_ENDPOINT]
- Activities: [PASTE_ACTIVITIES_ENDPOINT]
- Owners: [PASTE_OWNERS_ENDPOINT]
- Notes: [PASTE_NOTES_ENDPOINT]

Phase 1 — Do not write code yet.
Ask me exactly 2–3 focused questions:
- Framework and routing conventions (React, Vue, file structure)
- Which CRM views to prioritize (dashboard, customer detail, pipeline)
- Styling approach and whether customer detail is a modal or separate route

Stop and wait for my answers.

Phase 2 — After I answer:
- Generate TypeScript types from API response shapes
- Create a typed API client with reusable fetch utilities for all five endpoints
- Build hooks/composables with loading, error, and empty states
- Implement customer table with search and industry filtering
- Build pipeline board grouped by deal stage
- Add revenue metrics cards from deals data
- Activity feed with customer names joined from customers API
- Customer detail page with notes panel
- Responsive dashboard shell with navigation
- Keep API keys in env only—never commit secrets
- Do not use placeholder JSON once real endpoints are provided

Step 6

Compare & Ship

A spreadsheet alone cannot power an interactive CRM dashboard. API Butler gives you real export data with production-like APIs — not fake placeholder JSON.

Spreadsheet Only

— Disconnected from live apps
— Not interactive for teams
— Difficult to share securely

JSONPlaceholder

— Fake generic data
— Unrealistic CRM structures
— No customer–deal relationships

API Butler

Real CRM data from your exports
Realistic sales workflows
Dashboard-ready APIs with filtering

Next Steps

CRM API from Spreadsheet

Turn customer and pipeline spreadsheets into production-ready REST APIs.

Internal Tools from CSV

Power dashboards and admin panels without a backend.

APIs for AI Agents

Structured data layer for Cursor, Claude Code, and custom agents.

FAQ

CRM dashboard tutorial questions

Can I use HubSpot exports?

Yes. Export your contacts, deals, and activities from HubSpot as CSV files. Map columns to the tutorial schema—customers, deals, activities, owners, and notes—then upload each file to API Butler for hosted GET endpoints.

Can I use Salesforce exports?

Yes. Use Salesforce Report exports or Data Export to CSV. Match Account fields to customers.csv, Opportunity fields to deals.csv, and Task/Event fields to activities.csv. API Butler turns each export into a queryable REST endpoint.

How large can the dataset be?

API Butler supports large CSV uploads with pagination on every endpoint. Start with a few hundred rows for prototyping; use ?limit=25 and filter params to keep dashboard queries fast while you iterate.

Can Cursor generate the dashboard automatically?

Yes. Paste your five API Butler endpoint URLs into the Cursor or Claude Code prompts in Step 5. The AI generates typed hooks, a customer table, pipeline board, revenue metrics, and activity timeline wired to live data.

Can I connect multiple CSV files?

Yes—that is the recommended approach. Upload one CSV per resource (customers, deals, activities, owners, notes). Each becomes its own endpoint. Join data in the dashboard using shared customer_id fields.

Ready to build

Upload CSV. Get API. Build your CRM dashboard.

Start with your CRM export and have dashboard-ready endpoints in minutes.

Documentation Cursor integration Claude Code integration All tutorials

Build a CRM Dashboard from Spreadsheet Export

See the End Result

Design Your Datasets

customers.csv

deals.csv

activities.csv

owners.csv

notes.csv

Publish Your APIs

CRM Export

CSV Upload

API Generated

Endpoints Available

Map APIs to the Dashboard

Wire Up Frontend & AI

Prompt for Cursor

Prompt for Claude Code

Compare & Ship

CRM API from Spreadsheet

Internal Tools from CSV

APIs for AI Agents

CRM dashboard tutorial questions

Can I use HubSpot exports?

Can I use Salesforce exports?

How large can the dataset be?

Can Cursor generate the dashboard automatically?

Can I connect multiple CSV files?

Upload CSV. Get API. Build your CRM dashboard.