Questa dashboard l'abbiamo fatta espellere — e gira nel tuo browser

Come è stata costruita questa pagina

Tre passaggi, senza colla su misura. Ha fatto tutto un agente AI con accesso all'MCP di Vibedasher — esattamente come farebbe il tuo.

# 1. point your AI at the Vibedasher MCP
{ "mcpServers": { "vibedasher": { "command": "vibedasher-mcp",
    "env": { "VIBEDASHER_API_KEY": "…", "VIBEDASHER_REGION": "eu-central-1" } } } }

# 2. ask it to eject the dashboard
eject_viz(viz_id=1275)
  -> 45 files: App.tsx, pages/, charts/, components/, stores/,
     vibedasherWasm.ts, tailwind.config.js, package.json, main.tsx

# 3. mount it in your app and hand it a query function
<App viz={viz} useSQL={useSQL} />

Nulla nell'albero che l'MCP espelle è stato ritoccato a mano per funzionare in questa pagina — è tutta qui la promessa, ed è mantenuta. È vero output di eject_viz: i cinque file che l'MCP consegna identici a ogni cliente (config di build, tsconfig, il runner DuckDB-WASM) sono verificati byte per byte contro il suo output attuale da un test di CI, e tre punti in due file generati sono stati allineati a una correzione del generatore successiva a questo albero. tsc --noEmit su tutti e 45 i file è pulito, e la CI lo mantiene tale. L'unico file scritto da noi è il componente da ~40 righe che lo monta e gli passa una funzione di query.

La funzione di query che iniettiamo si appoggia a DuckDB-WASM, che legge un estratto Parquet del dataset. Sostituiscila con il client SDK di Vibedasher e gli stessi identici componenti girano sul motore ospitato — è l'unica cosa che cambia.