PerplexiGrid: Dashboards interactivos con lenguaje natural
PerplexiGrid convierte el lenguaje natural en dashboards interactivos y completos. ¡Conecta tus datos y mézclalos con datos web en vivo, haz una pregunta y deja que la API de Sonar haga el resto! Completo con diseño de arrastrar y soltar, generación de widgets con IA y visualizaciones impulsadas por ECharts.
Características
- Lenguaje Natural a Dashboards: Convierte prompts en inglés simple en dashboards de análisis completamente funcionales con más de 25 tipos de widgets
- Integración de Datos en Vivo: Combina tus propias fuentes de datos con datos web en tiempo real para obtener información completa
- Diseño de Cuadrícula Interactivo: Interfaz de arrastrar y soltar para personalizar diseños y estilos de dashboards
- Refinamiento Impulsado por IA: Refina o añade widgets usando actualizaciones conversacionales
- Exportar y Compartir: Genera exportaciones en PDF, imágenes de alta resolución y enlaces de dashboards compartibles
Cómo usa Sonar
PerplexiGrid aprovecha la API de Sonar a través de cuatro modos especializados:
- Generación Completa de Dashboard (f1): Crea dashboards completos con múltiples widgets usando las capacidades avanzadas de Sonar Pro
- Modo Ligero (l1): Genera visualizaciones rápidas para sistemas embebidos y aplicaciones en tiempo real
- Actualizaciones de Dashboard (r1): Permite modificaciones dinámicas a través del lenguaje natural mientras mantiene el contexto
- Refinamiento de Widgets (r2): Proporciona un control preciso sobre las actualizaciones de widgets individuales
El sistema utiliza respuestas de esquema JSON estructuradas para asegurar una salida consistente y compatible con ECharts que se puede renderizar directamente como visualizaciones interactivas.
Uso
- Abre la aplicación y comienza un nuevo dashboard
- Haz un prompt como: "Muéstrame las tendencias del mercado en startups de IA en 2024" (Sonar genera configuraciones de gráficos, que se analizan y renderizan como widgets en vivo)

- Reorganiza y estiliza los widgets con la interfaz de cuadrícula

- Añade tus propias fuentes de datos para combinar tus datos con datos web en vivo

- Refínalos a través de prompts de texto o exporta el dashboard según sea necesario
- Colabora y comparte fácilmente

Explicación del Código
El usuario envía mensajes que se convierten en prompts a una Supabase Edge Function que envuelve la API de Perplexity Sonar.
Dependiendo del modo (f1, l1, r1, o r2), la función genera salidas estructuradas completas para dashboards, visualizaciones ligeras o actualizaciones dirigidas.
El diseño generado se analiza en definiciones de widgets estructuradas y se pasa a través de nuestro motor de creación de widgets.
Explora nuestro servicio principal de sonar-api aquí.
Modos de Prompt
| Modo | Descripción | Caso de Uso | Notas |
|---|---|---|---|
f1 |
Generación completa de dashboard por primera vez | El usuario comienza con un lienzo vacío e introduce un prompt inicial | Produce un diseño de dashboard completo con múltiples widgets |
l1 |
Generación de dashboard ligero | Se usa para obtener información rápida o vistas previas con un mínimo de tokens | Más rápido y económico, pero devuelve menos widgets con menor profundidad de instrucción |
r1 |
Regeneración completa de dashboard | El usuario quiere reemplazar todos los widgets existentes con un nuevo prompt | Reconstruye todo el dashboard manteniendo el diseño intacto |
r2 |
Actualización de widget dirigida | El usuario quiere cambiar un widget específico (ej. "haz de esto un gráfico circular") | Solo el widget seleccionado se modifica según la nueva instrucción |
Pila Tecnológica
- Frontend: React + Vite (TypeScript), ECharts, react-grid-layout
- Backend: Supabase Edge Functions (TypeScript en Deno)
- Motor de IA: Perplexity Sonar Pro
- Infraestructura: Supabase (PostgreSQL, RLS, Auth), despliegue en Vercel