PerplexiGrid turns natural language into rich, interactive dashboards. Connect your data and mix it with live web data, ask a question, and let the Sonar API do the rest! Complete with drag-and-drop layout, AI widget generation, and ECharts-powered visualizations.

​
Features

  • Natural Language to Dashboards: Convert plain English prompts into fully functional analytics dashboards with 25+ widget types
  • Live Data Integration: Blend your own data sources with real-time web data for comprehensive insights
  • Interactive Grid Layout: Drag-and-drop interface for customizing dashboard layouts and styling
  • AI-Powered Refinement: Refine or add widgets using conversational updates
  • Export & Share: Generate PDF exports, high-res images, and shareable dashboard links

​
How it uses Sonar

PerplexiGrid leverages the Sonar API through four specialized modes:
  • Full Dashboard Generation (f1): Creates comprehensive dashboards with multiple widgets using Sonar-pro’s advanced capabilities
  • Lightweight Mode (l1): Generates quick visualizations for embedded systems and real-time applications
  • Dashboard Updates (r1): Enables dynamic modifications through natural language while maintaining context
  • Widget Refinement (r2): Provides precise control over individual widget updates
The system uses structured JSON schema responses to ensure consistent, ECharts-compatible output that can be directly rendered as interactive visualizations.

​
Usage

  1. Open the app and start a new dashboard
  2. Prompt it like: “Show me market trends in AI startups in 2024” (Sonar generates chart configs, which are parsed and rendered as live widgets)
Prompt #1
  1. Rearrange and style the widgets with the grid interface
Prompt #2 Prompt #3
  1. Add your own datasources to blend your data with live web data
Prompt #4
  1. Refine them via text prompts or export the dashboard as needed
  2. Collaborate and share easily
Prompt #5

​
Code Explanation

The user sends messages that are turned into prompts to a Supabase Edge Function that wraps the Perplexity Sonar API.
Depending on the mode (f1, l1, r1, or r2), the function generates full structured outputs for dashboards, lightweight visualizations, or targeted updates.
The generated layout is parsed into structured widget definitions and passed through our widget creation engine. Explore our main sonar-api service here.

​
Prompt Modes

ModeDescriptionUse CaseNotes
f1First-time full dashboard generationUser starts with an empty canvas and enters an initial promptProduces a complete dashboard layout with multiple widgets
l1Lightweight dashboard generationUsed for quick insights or previews with minimal tokensFaster and cheaper, but returns fewer widgets with less instruction depth
r1Full dashboard regenerationUser wants to replace all existing widgets with a new promptRebuilds the entire dashboard while keeping layout intact
r2Targeted widget updateUser wants to change a specific widget (e.g. “make this a pie chart”)Only the selected widget is modified based on the new instruction

​
Tech Stack

  • Frontend: React + Vite (TypeScript), ECharts, react-grid-layout
  • Backend: Supabase Edge Functions (TypeScript on Deno)
  • AI Engine: Perplexity Sonar-Pro
  • Infrastructure: Supabase (PostgreSQL, RLS, Auth), Vercel deployment