feat(docs): add PerplexiGrid showcase .mdx

Author: PetarRan

docs/showcase/perplexigrid.mdx

@@ -0,0 +1,140 @@
+---
+title: PerplexiGrid
+description: Instantly generate analytics dashboards from natural language using live data via Perplexity Sonar API.
+sidebar_position: 1
+keywords: [perplexigrid, dashboard, analytics, BI, AI, Perplexity, sonar, echarts, supabase]
+---
+
+# PerplexiGrid
+
+**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
+
+* Fully customizable dashboards generated from plain English prompts with 25+ supported widget types (charts, KPIs, tables, heatmaps, etc.)
+* Smart layout with a customizable drag-and-drop grid, shareable as PDF/image exports and shareable links  
+* Refine or add widgets using conversational updates  
+* Support for live data from the web + your own datasources
+
+## Prerequisites
+
+* Node.js 18 or newer  
+* Supabase project + API keys  
+* Perplexity Sonar API key  
+* Supabase CLI for deploying Edge Functions  
+
+## Installation
+
+Clone the repository:
+
+```
+git clone https://github.com/PetarRan/perplexigrid.git
+cd perplexigrid 
+```
+
+Install frontend dependencies:
+
+```
+cd client
+npm install
+```
+
+Create your `.env` file inside `client/`:
+
+```
+VITE_SUPABASE_URL=https://your-project.supabase.co  
+VITE_SUPABASE_ANON_KEY=your-anon-key  
+VITE_PPLX_API_KEY=your-perplexity-api-key  
+```
+
+Run the development server:
+
+```
+npm run dev
+```
+
+Open `http://localhost:5173` in your browser.
+
+## Supabase Edge Function Setup
+
+Install the Supabase CLI:  
+https://supabase.com/docs/guides/cli
+
+Link to your project:
+
+```
+supabase link --project-ref your-project-id
+```
+
+Create the Edge Function:
+
+```
+supabase functions new call-perplexity
+```
+
+Paste your implementation into:  
+`functions/call-perplexity/index.ts`
+
+Set the environment variable (via Supabase Dashboard):
+
+`PPLX_API_KEY=your-perplexity-api-key  `
+
+Deploy the function:
+
+```
+supabase functions deploy call-perplexity
+```
+
+Your frontend calls it at: `/call-perplexity`
+
+## 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 [mai 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)  
+* **Infra**: Supabase (PostgreSQL, RLS, Auth), CLI-based deploys + Vercel
+* **AI Model**: Perplexity Sonar-Pro
+
+## Links
+
+- [GitHub Repository](https://github.com/PetarRan/perplexigrid)
+- [perplexigrid.com](https://www.perplexigrid.com)
+- [Live Demo](https://app.perplexigrid.com)