Breadcrumb arrow Back to Code Examples

Assistive Pivot: AI Assisted React Pivot Table (Syncfusion + Openai) ??

Sample date Updated on Jan 22, 2026
Browse Code Git logo Download
assistive-pivot pivot-grid pivot-table pivotview react react-pivot-grid react-pivot-table syncfusion-pivotview syncfusion-react

AI-powered, natural-language analytics for Pivot tables in React. Drive sorting, filtering, calculations, and formatting with plain English via Syncfusion’s AI AssistView and a secure Node/Express gateway to OpenAI.

Meta: React + Vite + TypeScript frontend with Syncfusion PivotView and AI AssistView, backed by an Express API proxy to OpenAI with per-visitor token budgeting.

Node >= 18 React 19 Vite 7 TypeScript 5.9 Express 4 OpenAI 4.x Last Updated

Optional hero image: A screenshot of the Pivot table with the AI Assist panel open, captioned “Ask AI to sort, filter, and calculate — instantly.”

Quick Overview ??

  • Problem: Configuring complex Pivot operations with UI clicks is time-consuming and error-prone. ?
  • Solution: An AI chat assistant lets you “tell” the Pivot what to do (e.g., “Sort Country descending,” “Show France and Germany,” “Average Sold”). ??
  • What’s unique: ?
    • Tightly couples Syncfusion’s PivotView with AIAssistView for grounded UI changes.
    • Secure server-side OpenAI access with per-visitor token budgeting and reset windows.
    • Ready-to-run Vite + TypeScript + React 19 development experience.

Real-world uses:

  • ?? Self-serve analytics portals
  • ?? BI dashboards with conversational pivots
  • ?? Guided data exploration/demos and PoCs

Key Features & Capabilities ?

  • ??? Natural language control of Pivot operations (sort/filter/aggregate/format).
  • ?? Prebuilt prompt suggestions for one-click examples.
  • ?? Live toolbar integration adds an “AI Assist” action to the Pivot.
  • ?? Response templating for AI outputs in the AssistView.
  • ?? Secure backend proxy to OpenAI; never expose API keys to the browser.
  • ?? Per-visitor token limits and hourly reset to manage usage.
  • ?? Vite HMR dev loop, React 19, TypeScript 5.9, ESLint 9.
  • ?? Easily configurable API base URL via VITE_API_BASE_URL.

Supported Technologies & Requirements ???

  • Languages/Frameworks: React 19, TypeScript 5.9, Vite 7, Express 4
  • Syncfusion React components:
    • @syncfusion/ej2-react-pivotview
    • @syncfusion/ej2-react-interactive-chat (AI AssistView)
    • @syncfusion/ej2-react-popups
  • Backend: [email protected], dotenv, cors, date-fns
  • Node.js: >= 18 (recommended 18/20+)
  • Browsers: Modern evergreen (Chromium, Firefox, Safari)

Installation & Setup ??

Prerequisites: ?

  • Node.js >= 18 and npm
  • An OpenAI API key

1) Backend API (Express)

  • Location: server
  • Create .env:
    # server/.env
OPENAI_API_KEY=sk-...
# Optional: override model (default: gpt-4o-mini)
OPENAI_MODEL=gpt-4o-mini
# Optional: CORS origin for frontend
CORS_ORIGIN=http://localhost:5173
  • Install & run:
    cd server
npm install
npm start
  • Server runs on http://localhost:3000 (default). Confirm the terminal log.

2) Frontend (Vite + React)

  • Location: assistive-pivot
  • Create .env (or .env.local) to point at the backend:
    # assistive-pivot/.env
VITE_API_BASE_URL=http://localhost:3000
  • Install & run:
    cd assistive-pivot
npm install
npm run dev
  • Open the URL shown by Vite (commonly http://localhost:5173).

Troubleshooting:

  • CORS errors: Ensure CORS_ORIGIN matches the Vite URL.
  • 403 token limit: Tokens reset on an hourly window per visitor ID.
  • 500/AI errors: Verify OPENAI_API_KEY and network access.

Quick Start ??

  • Start both backend (port 3000) and frontend (Vite dev server).
  • In the app, click the toolbar’s “AI Assist” button.
  • Try prompts such as:
    • “Sort Country field by descending”
    • “Show only data from France and Germany”
    • “Change the Sold field aggregation from sum to avg”
    • “Clear filtering”

First success checkpoint: The Pivot updates as requested. Next steps: Add new prompt suggestions or wire your own data.

Core Concepts & Architecture ???

  • Frontend:
    • Syncfusion PivotView renders the analytics grid/chart.
    • Syncfusion AIAssistView provides the chat surface and prompt execution.
    • Prompts trigger fetchAI(...) (via serverAIRequest) with the current Pivot’s state.
  • Backend:
    • Express /api/chat validates the request, checks token budget per visitor, and forwards chat messages to OpenAI.
    • Token store (user_tokens.json) uses a lightweight, file-based budget with hourly resets.

Data Flow:

  1. User prompt in AssistView
  2. Frontend gathers Pivot state
  3. POST to /api/chat with visitorId + messages
  4. Server consults token store, then calls OpenAI
  5. Server returns AI content; frontend applies to Pivot props

Project Structure ??

Features Deep Dive ??

  • AI Assist integration
    • ai-assistive-pivot.tsx sets up:
      • Toolbar button to open AI dialog
      • Prompt suggestions footer
      • Response template for AI messages
      • promptRequest handler calling fetchAI(...) with current Pivot state
  • Pivot operations via props
    • dataSourceSettings controls rows, columns, values, filters, and conditional formatting
    • AI responses translate to targeted prop changes on Pivot
  • Token budgeting
    • Default: 50,000 tokens per visitor per hour
    • Exempt visitors: configured in EXEMPT_VISITOR_IDS (for demos/tests)
    • Persists to server/user_tokens.json

Configuration & Customization ???

Frontend:

  • VITE_API_BASE_URL — API base (default http://localhost:3000)

Backend (.env):

  • OPENAI_API_KEY — required
  • OPENAI_MODEL — defaults to gpt-4o-mini
  • CORS_ORIGIN — default *, set to your Vite origin in dev

Token store (edit in server/token-store.js):

  • TOKEN_RESET_INTERVAL_HOURS — default 1
  • DEFAULT_TOKENS — default 50,000
  • EXEMPT_VISITOR_IDS — Array of visitor IDs bypassing deductions

Usage Examples & Patterns ??

1) Call the backend API directly

curl -X POST http://localhost:3000/api/chat \
  -H "Content-Type: application/json" \
  -d '{
    "visitorId": "dev-visitor",
    "messages": {
      "messages": [
        {"role":"system","content":"You help configure a Syncfusion Pivot grid."},
        {"role":"user","content":"Sort Country descending"}
      ]
    }
  }'

2) Use the frontend helper (ai-service.ts)

import { serverAIRequest } from '../backend/ai-service';

const response = await serverAIRequest({
  messages: {
    messages: [
      { role: 'system', content: 'Guide Pivot changes.' },
      { role: 'user', content: 'Show only France and Germany' }
    ]
  },
  temperature: 0.3
});
// Apply response to Pivot props as needed

3) Add a new prompt suggestion (ai-assistive-pivot.tsx)

const suggestions = [
  "Sort Country field by descending",
  "Show only data from France and Germany",
  "Change the Sold field aggregation from sum to avg",
  "Clear filtering",
  "Highlight Amount > 250000 in red" // new suggestion
];

Performance & Optimization ??

  • Vite HMR enables fast feedback in dev.
  • Keep prompts concise to reduce token usage and latency.
  • Limit returned content to minimal deltas; avoid verbose explanations where not needed.
  • Serve the API and app close to each other to reduce network hops.

API Reference ??

POST /api/chat

  • Request body:
    • visitorId (string) — required per-visitor budgeting key
    • messages (object) — OpenAI Chat API-compatible payload holder: { messages: Array<{ role, content }> }
    • Optional tuning: temperature, topP, maxTokens, frequencyPenalty, presencePenalty, stopSequences
  • Response 200:
    • { "response": "<model content string>" }
  • Response 403 (budget exceeded):
    • { "error": "You have reached your token limit..." }
  • Response 400/500:
    • { "error": "<message>" }

Troubleshooting & FAQ ?

  • CORS blocked
    • Set CORS_ORIGIN in server .env to your Vite URL (e.g., http://localhost:5173)
  • Token limit reached
    • You’ll see a banner and a 403 with reset time; try again after the window resets
  • “Failed to generate text”
    • Verify OPENAI_API_KEY and internet access; inspect server logs
  • Frontend can’t reach API
    • Check VITE_API_BASE_URL and that the server is listening on the expected port

Testing ??

  • Server tests:
    cd server
npm test
  • Framework: Node’s built-in node:test
  • What’s covered: token store initialization, deduction logic, exempt users

Contributing & Development ??

  • Branch from main, keep PRs focused and small.
  • Code style: ESLint 9 + TypeScript.
  • Frontend:
    cd assistive-pivot
npm run lint
npm run build
  • Backend:
    cd server
npm start
npm test

Community & Support

Get Help & Resources

Built with the technologies developers love:

React 19 ? | Webpack 5 ?? | Syncfusion EJ2 ?? | Node.js ??

Star ? This Project

If you find this project helpful, please:

  1. ? Star this repository
  2. ?? Share with your team
  3. ?? Mention in your portfolio
  4. ?? Contribute improvements

License

This project is licensed under Syncfusion Evaluation License.

Usage Rights:

  • ? Free for evaluation and development
  • ? Educational and learning purposes
  • ? Internal team projects
  • ? Production deployment (requires commercial license)
  • ? Redistribution without commercial license

For commercial licensing, contact Syncfusion Sales

Thank You!

Thank you for exploring this Fitness Tracker Dashboard! We hope this helps you:

  • ?? Master modern React development
  • ?? Learn advanced patterns with Syncfusion
  • ?? Understand micro-frontend architecture
  • ?? Build better applications

Made with ?? using Syncfusion EJ2

Version: 1.0.0 | Last Updated: January 2026 | Status: ? Production Ready

Up arrow