Prompt to Dashboard in One AI Tool Call

Key Concepts

• CodeMode: A system that allows LLMs to execute TypeScript/JavaScript in a sandboxed VM rather than relying on native LLM math capabilities.
• TanStack AI: A framework for building AI-powered applications, integrating seamlessly with CodeMode.
• Generative UI: A UI construction method where the LLM dynamically generates components (charts, grids, text) based on data analysis.
• Netlify Database: A database wrapper that supports local development, production deployment, and branch-based workflows.
• Drizzle ORM/Kit: A TypeScript-based ORM used for database schema management, migrations, and studio visualization.
• Isolate Driver: A virtual machine environment used to safely execute code generated by the LLM.

---

1. The CodeMode Workflow

The video demonstrates a paradigm shift in how LLMs interact with data. Instead of asking an LLM to perform complex math (which they are notoriously bad at), CodeMode instructs the LLM to write TypeScript that performs the math.

• Process:
  1. Querying: The LLM uses injected tools (e.g., queryTable) to fetch raw data from the database.
  2. Computation: The LLM writes TypeScript code to process the data.
  3. UI Generation: The LLM uses injected UI tools (reportText, reportGrid, reportCard) to format the results.
  4. Execution: The code runs in a secure VM (Isolate Driver), and the output is returned to the chat interface.

2. Database Setup and Management

The speaker utilizes Netlify Database combined with Drizzle ORM for a streamlined development experience.

• Methodology:
  • Initialization: Use netlify database commands to manage the lifecycle.
  • Migrations: drizzle-kit generate creates migration files, which are then applied via netlify database migrations apply.
  • Seeding: A custom db seed script populates the database with initial e-commerce data (customers, products).
  • Visualization: drizzle-kit studio provides a GUI to inspect the database state locally.
• Configuration: The drizzle.config.ts file defines the PostgreSQL dialect and schema location, ensuring database portability.

3. Integrating CodeMode with Tools

A key technical insight is the reusability of tool definitions.

• The queryTable tool is defined as a standard TanStack AI tool.
• Because CodeMode uses the same tool-calling interface as standard LLMs, the same tool can be injected into the VM environment without modification.
• System Prompting: When createCodeMode is called, it returns both the tool definition and a system prompt. The system prompt provides the LLM with the necessary context about the injected database and UI tools available within the VM.

4. Generative UI Architecture

The UI is built dynamically using a Node Renderer pattern:

• Primitives: The application provides a library of React components (charts, data tables, sparklines, grids).
• Node Mapping: The system maintains a lookup table that maps "node types" (requested by the LLM) to specific React components.
• Rendering: The nodeRenderer iterates through an array of nodes generated by the LLM and maps them to the corresponding UI components, allowing the LLM to "build" a dashboard on the fly.

5. Notable Quotes

• "Instead of giving the AI tools like execute SQL, it instead just writes TypeScript and then uses injected functions... LLMs are terrible at natively doing math, but they're very good at creating TypeScript that does math."
• "The secret sauce here is... [that] it actually works with exactly the same tools as the standard LLM stuff. It just injects those tools into the VM that runs the JavaScript."

---

Synthesis and Conclusion

The video presents a robust framework for building data-intensive AI applications. By decoupling the data retrieval/computation logic (handled by TypeScript in a VM) from the LLM's reasoning (handled by the chat interface), the system overcomes the inherent limitations of LLMs regarding mathematical accuracy. The use of Netlify Database and Drizzle ORM provides a modern, developer-friendly stack, while the Node Renderer pattern enables a highly flexible, generative UI that can adapt to any data query result. This approach is highly recommended for developers looking to build dynamic, report-generating AI interfaces.