This AI Writes Code, Not Just Text

Large Language Models (LLMs) fundamentally operate as probabilistic text predictors, not deterministic calculators. Their architecture excels at generating coherent, contextually relevant language by predicting the next most probable token in a sequence. This design makes them powerful for creative writing, summarization, and translation, but inherently ill-suited for precise, step-by-step mathematical computation. LLMs essentially "guess" numbers or logical outcomes based on patterns in their training data, rather than executing calculations with certainty.

This core limitation creates significant hurdles in data analysis and numerical tasks. LLMs frequently introduce mathematical errors, misinterpret logical relationships, and can even hallucinate data points or incorrect statistical summaries. Relying on an unassisted LLM for aggregating figures, calculating averages, or deriving complex insights from raw numerical data severely compromises accuracy and reliability. The output might *look* plausible, but its factual basis remains suspect.

Developers traditionally mitigate these issues through a "tool calling" or "function calling" paradigm. An LLM, recognizing a need for calculation, generates a structured call to an external, deterministic tool, such as a calculator API or a database query engine. While this approach improves accuracy, it introduces substantial operational overhead. Each interaction requires multiple round-trips between the LLM and the external tool, leading to high latency and significant token consumption for every intermediate step. Complex data workflows quickly become prohibitively slow and expensive.

Jack Herrington, in his video "Prompt to Dashboard in One AI Tool Call," precisely articulates this challenge. He states, "LLMs are terrible at natively doing math." Herrington highlights how solutions like Tanstack AI's Code Mode address this by having LLMs generate deterministic TypeScript code. This code then executes within a secure sandbox, offloading all mathematical operations to a reliable runtime. This method ensures calculations are performed accurately and efficiently, bypassing the LLM's inherent numerical weaknesses.

Tanstack AI introduces Code Mode, a novel solution addressing the inherent limitations of large language models, particularly their struggles with deterministic calculations and multi-step reasoning. Instead of relying on an LLM's probabilistic text prediction for complex logic, Code Mode fundamentally shifts the paradigm. It instructs the LLM to *write a program*—specifically, a TypeScript script—that orchestrates tools and executes tasks within a secure sandbox, transforming how AI interacts with external systems.

Traditional LLM approaches involve a 'chat' model, where the AI makes sequential Tool Call Using Code Mode decisions, often resulting in numerous back-and-forth interactions, higher token costs, and slower execution. Code Mode, however, embraces a deterministic programming model. The LLM receives a Prompt and, in response, generates a complete TypeScript program. This program then leverages injected functions like `query table`, `report text`, or `report grid` to perform all necessary operations in a single, efficient execution within a secure VM.

Jack Herrington’s video, "Prompt to Dashboard in One AI Tool Call," vividly demonstrates this capability. He showcases Code Mode connecting to a Netlify Database, generating a daily revenue trend Dashboard, and performing intricate calculations. The LLM, rather than attempting to do math itself—a known weakness that leads to inaccuracies—skillfully writes TypeScript that executes precise mathematical operations. This offloads computation to a deterministic runtime, ensuring accuracy and overcoming a major LLM hurdle.

This innovative approach grants the AI unprecedented agency to tackle complex, multi-step tasks within a single, optimized process. By consolidating multiple operations into one generated program, Code Mode dramatically reduces token usage and increases execution speed compared to traditional sequential tool calls. The system prompt provides the LLM with comprehensive details about all available injected tools, empowering it to write highly effective and integrated programs. This ensures the AI can perform intricate data transformations and generate rich outputs, like the dynamic Dashboard shown in Herrington's demonstration, with superior reliability and efficiency. This marks a significant step towards more autonomous and capable AI systems.

Tanstack AI's Code Mode fundamentally redefines how Large Language Models interact with complex systems. Instead of generating fragmented tool calls or attempting direct database queries, the LLM receives a robust system Prompt detailing a suite of available, pre-defined functions. These aren't just abstract commands; they are fully typed JavaScript/TypeScript functions, meticulously crafted to perform specific operations like querying databases or rendering UI components. This approach mitigates the LLM's inherent limitations, particularly its probabilistic nature, by offloading deterministic tasks to a secure, high-performance runtime.

Developers define standard Tanstack AI tools, such as `queryTable` for database interaction or `reportGrid` for UI rendering. Code Mode then takes these definitions and, crucially, injects them directly into a secure execution environment. This environment can be a Node.js V8 isolate, a lightweight QuickJS WebAssembly runtime, or even Cloudflare Workers, ensuring both security and scalability. This injection process provides the LLM with a concrete, executable API, bridging the gap between its text generation capabilities and the need for precise computational logic. For deeper technical insights, consult the Overview | TanStack AI Docs.

Armed with this comprehensive system Prompt, the LLM no longer "guesses" at API calls. It generates a complete, self-contained TypeScript program designed to solve the user's request end-to-end. This program leverages the injected functions as its building blocks. For example, a user asking for "daily revenue trends" prompts the LLM to write TypeScript that first calls `queryTable` to fetch raw sales data from the Netlify Database.

Once the data is retrieved, the generated TypeScript program takes over the heavy lifting. It performs all necessary aggregations, date calculations, and trend analyses using standard, deterministic TypeScript logic. This is where Code Mode truly shines: LLMs are notoriously poor at native arithmetic, but they excel at producing accurate TypeScript code that executes mathematical operations flawlessly. Finally, the program uses injected UI functions like `reportText`, `reportGrid`, or `reportCard` to format the computed results into a structured, human-readable output, which is then returned to the LLM for summarization.

Consider this simplified conceptual flow: ```typescript async function generateDailyRevenueReport() { const rawData = await queryTable("purchases", { where: { date: { gte: "two_months_ago" } } });

// Perform complex date grouping and sum calculations in TypeScript const aggregatedData = calculateDailySums(rawData);

reportGrid("Daily Revenue Trend", aggregatedData); reportMetrics({ totalRevenue: sumAll(aggregatedData) });

return "Report generated successfully with daily revenue trends."; } ``` This single, generated TypeScript program executes within the sandbox, providing precise results and significantly reducing token costs compared to iterative LLM tool calls. The LLM then receives the program's return value, enabling it to craft a concise markdown summary for the user in the Discord chat.

Unlock your data with a single Prompt using Tanstack AI's Code Mode. The system brilliantly integrates with SQL databases, exemplified by a demo with Netlify Database. Users can simply request complex insights, transforming raw data into actionable intelligence without writing a single line of traditional code.

Jack Herrington's demonstration showcased an e-commerce scenario. A user issued the Prompt "daily revenue trend," instantly generating a comprehensive report. This report, displayed as a new Dashboard element, provided revenue trends for the last two months, complete with dynamic charts and a concise markdown summary.

Code Mode's superiority over direct LLM-to-SQL interaction stems from its intelligent orchestration. Instead of giving the AI raw `execute SQL` tools, the LLM generates TypeScript code. This program then uses injected functions, like `query table`, to fetch the necessary raw data from the database. This critical distinction offloads all complex data transformations and mathematical computations to the TypeScript runtime, where precision is guaranteed.

LLMs are notoriously unreliable for native mathematical operations. By having the LLM generate TypeScript that performs the math, Code Mode bypasses this fundamental limitation, ensuring accurate results. This approach also dramatically reduces token costs and improves execution speed compared to sequential LLM tool calls. The generated TypeScript subsequently uses other injected tools, such as `report text` and `report grid`, to format the processed data into the final report.

Underpinning this database interaction is Drizzle ORM. This Object-Relational Mapper defines the database schema for entities like customers and purchases, providing crucial portability across different PostgreSQL databases. Drizzle Kit's `defineConfig` simplifies the setup, making robust database integration both powerful and straightforward within the Code Mode ecosystem. The combination delivers a highly reliable and efficient method for AI-driven data analysis.

Jack Herrington selected Netlify's new Netlify Database as the robust backend for the Code Mode demonstration, praising its capabilities. As a serverless Postgres offering, it streamlines development with easy local setup and seamless production deployment. Herrington highlighted its "super cool" branch deploys, automatically provisioning isolated testing environments for every code branch, ensuring robust and conflict-free development.

The setup process commenced with installing necessary dependencies, prominently featuring `@netlify/database@1.0` in the `package.json`. Developers then initiated a local development environment, automatically starting a local database simulator in a separate terminal. This local simulation accurately mirrors the production environment, ensuring consistency and predictability from the earliest stages.

Next, Herrington demonstrated generating database schema migrations using `Drizzle Kit generate`, a critical step for defining the database structure. This command produced version-controlled migration files within the `netlify/database/migrations` directory, outlining tables like customers and products. Applying these migrations was swift, executed with `netlify database migrations apply`, ensuring the schema was correctly established.

With the schema firmly in place, populating the database with test data became the next crucial step. A simple `DB seed` command efficiently inserted a comprehensive set of sample customer and product data, preparing the database with realistic entries. This rapid seeding ensured the database was immediately ready for complex queries and sophisticated analysis by Code Mode, accelerating development.

Finally, Herrington showcased Drizzle Studio, a powerful and intuitive interface for visualizing and interacting with the database during active development. Accessed by running `DB Studio`, this "really cool interface" provides an immediate, graphical view of tables, data, and schema, described as "literally as easy as it gets." It greatly simplifies debugging and validation, offering a clear, real-time window into the database's state.

Tanstack AI's Code Mode ushers in a new era for AI-driven development, delivering a compelling trifecta of benefits: faster execution, significantly lower operational costs, and demonstrably smarter, more reliable outcomes. This innovative paradigm directly addresses the inherent shortcomings of Large Language Models when orchestrating complex, multi-step tasks that demand precision and efficiency.

Unprecedented speed gains redefine user experience. Traditional methods involve numerous sequential steps, each requiring a distinct network round trip and separate LLM invocation. By consolidating this entire workflow into a singular Tool Call Using Code Mode, the system drastically reduces network latency and user wait times. Instead of a series of back-and-forth conversational exchanges, the complete, generated TypeScript program executes within one consolidated burst, delivering results almost instantaneously.

Financial savings prove equally substantial. Traditional tool chaining demands extensive conversational turns, where an LLM might generate a piece of code, await its execution, receive the results, and then generate further instructions based on that feedback. Each of these iterative exchanges incurs significant token costs. Code Mode's single-call execution model largely eliminates this costly back-and-forth, providing a far more economical solution for complex operations.

Intelligence itself sees a profound upgrade, moving beyond approximation. Large Language Models, fundamentally probabilistic text predictors, notoriously struggle with deterministic mathematical operations and logical reasoning. By offloading all complex logic, data transformations, and calculations to a secure TypeScript runtime, Code Mode guarantees 100% accurate computations. This completely bypasses an inherent LLM weakness, ensuring reliable data analysis, report generation, and Dashboard outputs, particularly critical for database integrations like with Netlify Database. For further details on Netlify Database, consult the official documentation: Netlify Database | Netlify Docs. This consolidated, deterministic approach transforms AI interaction from a series of educated guesses into a precise, efficient, and highly reliable execution engine, fundamentally reshaping how AI assistants can perform complex, multi-step operations.

Tanstack AI's Code Mode introduces Generative UI, a groundbreaking capability where AI actively constructs user interfaces, not just data outputs. This pushes beyond traditional data manipulation, allowing the AI to design and render visual components on demand, creating full Dashboards from a natural language Prompt.

The AI’s generated TypeScript code is central to this process. It processes data and then leverages a comprehensive set of injected UI functions, such as `reportGrid`, `reportChart`, `reportText`, and `reportCard`. These functions act as high-level directives, enabling the AI to dictate precisely how processed information should appear, from simple summaries to complex visualizations.

For example, after calculating daily revenue trends from a Netlify Database, the AI can call `reportChart` to visualize the results as a line graph, or `reportGrid` for a detailed tabular display. The system also includes primitives like `progress`, `sparkline`, `grid`, and `VBox`, offering a rich toolkit for UI construction.

When the AI's TypeScript invokes these UI functions, they do not render components directly. Instead, they dynamically add structured "nodes" to a JSON array. Each node represents a specific UI element or layout primitive, abstractly defining what needs to be displayed and how, without dictating the exact React component implementation.

A specialized Node Renderer in the frontend application then takes over. This renderer iterates through the JSON array, acting as a sophisticated interpreter that maps each node type to its corresponding React component, effectively assembling the entire UI programmatically. This decoupled architecture ensures both flexibility and scalability, allowing for easy updates to frontend components without altering the AI’s core logic.

This sophisticated mechanism empowers the AI with extraordinary control over data visualization. It dynamically assesses the processed information, making autonomous decisions about the most impactful presentation format. The AI constructs a custom UI on the fly, precisely tailored to the data and the user's initial Prompt, offering a truly dynamic and personalized experience.

Users receive bespoke Dashboards, not static templates, reflecting the AI's deep understanding of both the data and optimal presentation strategies. This innovation moves beyond simple text generation, ushering in an era where AI can build rich, interactive UIs from a single Tool Call Using Code Mode.

The system dramatically enhances how developers and end-users interact with complex data. It transforms raw insights into visually compelling and easily digestible formats, effectively turning abstract data into a tangible, interactive experience. This showcases a powerful future for AI-driven application development.

Tanstack AI’s Code Mode enters an increasingly competitive arena of AI-powered business intelligence, yet it stakes a claim in a fundamentally different space. While many solutions focus on bringing AI to existing BI platforms, Code Mode positions itself as a foundational layer for developers. It empowers them to build AI-driven data capabilities from the ground up, rather than adapting to predefined analytical environments.

Major players have already integrated advanced AI features into their offerings. Microsoft's Power BI Copilot allows users to generate reports and visualizations from natural language. Tableau Pulse proactively delivers personalized, AI-driven insights. Google's Looker + Gemini combines advanced analytics with generative AI for intuitive data exploration. These tools democratize access to complex data through their established, user-facing platforms.

Code Mode, however, is not a

Moving beyond one-off interactions, Code Mode introduces Agent Skills, an advanced feature that fundamentally transforms how Large Language Models learn and operate. This capability allows the LLM to save and persistently store effective TypeScript code snippets it has previously generated, effectively building its own reusable library of solutions.

Agent Skills provide the AI with a form of persistent memory, where successful code blocks are not merely discarded after execution. Instead, the AI can name, type, and recall these 'skills' to address similar challenges in subsequent conversations. This significantly boosts efficiency, allowing the system to bypass redundant code generation for recurring tasks.

Consider a scenario where the AI generates a complex TypeScript function to perform multi-currency conversion and aggregate sales data across various regions. Rather than recreating this intricate logic from scratch every time, the LLM can save it as a 'skill' named 'generateRegionalRevenueReport'. Later, a simple Prompt like "Show me the regional revenue breakdown for Q3" can invoke this precise, pre-optimized function.

This paradigm shift moves the AI from a reactive code generator to a proactive problem-solver with a growing knowledge base. It means faster, more accurate results, reducing token costs and accelerating complex data analysis, especially when interacting with systems like Netlify Database. For developers keen on understanding the underlying data structures for such complex reports, exploring tools like Meet Drizzle Studio offers valuable insights into schema visualization and querying. This elevates Code Mode beyond a mere Tool Call Using Code Mode orchestrator, turning the AI into a continuously improving, highly efficient agent.

Era of probabilistic AI agents merely predicting text is drawing to a close. Tanstack AI’s Code Mode heralds a new future for human-AI collaboration, transforming Large Language Models into capable, deterministic programmers. This isn't just about improved tool calling; it's a fundamental paradigm shift where developers guide AIs to write and execute robust, verifiable Code, fundamentally changing how we build software.

Instead of wrestling with LLMs' inherent mathematical weaknesses or high token costs, Code Mode empowers them to generate TypeScript programs. These programs orchestrate complex data queries against systems like Netlify Database, perform precise calculations with guaranteed accuracy, and even construct dynamic Generative UI elements, all within a secure, efficient sandbox that dramatically reduces latency and expense.

This programmatic approach delivers more powerful and reliable AI agents, capable of complex, multi-step operations with unprecedented accuracy and lower token consumption. Developers will experience dramatically faster development cycles for data-driven features, moving from a natural language Prompt to a fully functional Dashboard in a single AI Tool Call Using Code Mode.

The implications extend beyond mere efficiency. We are witnessing the birth of a new class of AI-native applications, built from the ground up by intelligent agents that understand and generate executable logic. Imagine systems that not only answer complex data questions but actively build and maintain their own operational components, adapting dynamically to user needs.

With 'Skills,' these AI agents can learn and reuse effective code patterns, making them increasingly sophisticated and autonomous over time. This represents a profound evolution, moving AI from an assistant that *describes* solutions to one that *builds* them, fostering a symbiotic relationship between human and machine intelligence.

This future is not distant; it is accessible now. Developers eager to shape this next generation of AI-powered applications should explore the Tanstack AI GitHub repository. Begin experimenting with building your own programmatic AI tools today, contributing to a landscape where AI agents are not just intelligent, but demonstrably capable and robust.

What is Tanstack AI's Code Mode?

It's a feature that allows a Large Language Model (LLM) to write and execute a complete TypeScript program in a secure sandbox, instead of making multiple, sequential tool calls.

How does Code Mode improve on traditional AI tool use?

It reduces token costs and latency by bundling operations into one call. It also ensures mathematical accuracy by offloading calculations to the reliable TypeScript runtime instead of the LLM.

Can Code Mode connect to my own database?

Yes. It's designed to connect to SQL databases using injected functions. The video demonstrates this with Netlify Database and the Drizzle ORM.

What is Generative UI in this context?

It's the ability of the AI to dynamically create user interface components, like charts and grids, for a report or dashboard based on the data it has processed using its generated code.