diff --git a/docs/showcase/perplexigrid.mdx b/docs/showcase/perplexigrid.mdx new file mode 100644 index 0000000..d298a27 --- /dev/null +++ b/docs/showcase/perplexigrid.mdx @@ -0,0 +1,78 @@ +--- +title: PerplexiGrid | Interactive Analytics Dashboards +description: Instantly generate analytics dashboards from natural language using live data via Perplexity Sonar API. +sidebar_position: 5 +keywords: [perplexigrid, dashboard, analytics, BI, AI, Perplexity, sonar, echarts, supabase] +--- + +**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](https://www.perplexigrid.com/guide/prompt_dark.gif) + +3. Rearrange and style the widgets with the grid interface + +![Prompt #2](https://www.perplexigrid.com/guide/move_dark.gif) +![Prompt #3](https://www.perplexigrid.com/guide/customize_dark.gif) + +5. Add your own datasources to blend your data with live web data + +![Prompt #4](https://www.perplexigrid.com/guide/datasource_dark.gif) + +6. Refine them via text prompts or export the dashboard as needed +7. Collaborate and share easily + +![Prompt #5](https://www.perplexigrid.com/guide/invite_dark.gif) + +## 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.](https://github.com/PetarRan/perplexigrid/blob/main/server/supabase/functions/_shared/perplexityService.ts) + +## Prompt Modes + +| Mode | Description | Use Case | Notes | +|------|-------------|----------|-------| +| `f1` | First-time full dashboard generation | User starts with an empty canvas and enters an initial prompt | Produces a complete dashboard layout with multiple widgets | +| `l1` | Lightweight dashboard generation | Used for quick insights or previews with minimal tokens | Faster and cheaper, but returns fewer widgets with less instruction depth | +| `r1` | Full dashboard regeneration | User wants to replace all existing widgets with a new prompt | Rebuilds the entire dashboard while keeping layout intact | +| `r2` | Targeted widget update | User 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 + +## Links + +- [GitHub Repository](https://github.com/PetarRan/perplexigrid) +- [Live Demo](https://app.perplexigrid.com) +- [Website](https://www.perplexigrid.com) \ No newline at end of file