Lección 34 · 5 min · Gratis

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

  1. Abre la aplicación y comienza un nuevo dashboard
  2. 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)

Prompt #1

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

Prompt #2 Prompt #3

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

Prompt #4

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

Prompt #5

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

Enlaces

Lección del curso «Perplexity API Cookbook» de Perplexity, publicado con licencia MIT. Traducción y adaptación al español de IA con Clase. IA con Clase no está afiliado a Perplexity. Ver el original · Licencia
Esta lección es gratuita. El resto del curso se abre con la Membresía de IA con Clase, que incluye todos los cursos del catálogo. Ver precios