I Built an n8n AI Agent That Turns Data Into Beautiful Dashboards

By Zubair Trabzada | AI Workshop

Share:

Building an AI-Powered Data Cockpit with N8N and Thesis.dev

Key Concepts:

  • N8N: A no-code workflow automation platform.
  • Thesis.dev (C1): A generative UI layer that transforms AI responses into interactive user interfaces (dashboards, charts, etc.).
  • Generative UI: Automatically creating user interfaces based on data and AI responses.
  • API Key: A unique identifier used to authenticate and authorize access to an API (like Thesis.dev).
  • Streaming: A method of data transfer where data is sent continuously, allowing for real-time updates in the UI.
  • Chat Trigger: An N8N workflow trigger initiated by a chat message.
  • Tool (in N8N): A connection to an external service, like Google Sheets, allowing N8N to interact with that service.
  • Execution (in N8N): A single run of a workflow.

I. Introduction & Problem Statement

The video demonstrates how to move beyond static data representations (spreadsheets, CRMs) and create a dynamic, interactive data cockpit using N8N and Thesis.dev. The core problem addressed is the difficulty of quickly understanding and acting on data presented in traditional formats like rows and columns. The solution presented allows users to talk to their data – asking questions in natural language and receiving visually compelling, interactive dashboards in response. The presenter highlights the benefit of visually absorbing data, especially for those who dislike analyzing raw numbers.

II. Demo & Overview of Functionality

The initial demo showcases a workflow connected to a Google Sheet containing voice AI agent performance data. The user asks, "Compare last week's call volume with the previous two weeks," and Thesis.dev instantly generates a chart displaying the comparison. The dashboard includes interactive elements, allowing users to hover over sections for detailed metrics and adjust the visual appearance. The system pulls live data from the Google Sheet, presenting it in a user-friendly interface. Specifically, the demo data includes 4,200 appointments and 4,800 calls.

III. Step-by-Step Workflow Construction

The tutorial guides viewers through building the N8N workflow and connecting it to Thesis.dev.

A. N8N Setup (Initial Steps):

  1. Account Creation: Sign up for a free N8N account (link in description).
  2. Workflow Creation: Create a new workflow.
  3. Trigger: Add an "AI Agent" node with a "Chat" trigger to initiate the workflow via a chat interface.

B. Connecting to Thesis.dev:

  1. Chat Model Addition: Add a chat model by clicking the "+" button and selecting "OpenAI."
  2. API Key Configuration:
    • Click "New Credentials" to add the Thesis.dev API key.
    • Obtain the API key from the Thesis.dev account (link in description) by navigating to Account > API Keys > New API Key.
    • Paste the generated API key into the N8N credentials field.
    • Crucially: Change the "Base URL" from api.openai.com/v1 to https://api.thesis.dev/v1/embed.
    • Save the credentials.
  3. Model Selection: Select the latest GPT model (GPT-5 in the video) from the available models after the connection is established.
  4. Streaming Enablement: Disable "Use Response Mode API" for flexibility and enable streaming in both the AI Agent node and the Chat Message node to ensure seamless data flow.

C. Data Source Integration (Google Sheets):

  1. Tool Addition: Add a "Google Sheets" tool by clicking the "+" button and searching for "Google Sheets."
  2. Authentication: Sign in with Google to authorize N8N access to Google Sheets.
  3. Configuration:
    • Set "Automatically set tool description" to true.
    • Set "Resource" to "Sheet within a document."
    • Set "Operation" to "Get Rows."
    • Select the appropriate Google Sheet document (e.g., "AI phone agent data").
    • Select the specific sheet within the document (e.g., "Sheet1").

D. Chat URL & Workflow Activation:

  1. Make Chat Publicly Available: Double-click the Chat Message node and select "Make chat publicly available." This generates a unique chat URL.
  2. Publish Workflow: Copy the chat URL and click "Publish" (for N8N version 2) or "Activate" (for older versions) to make the workflow live.

IV. Thesis.dev/N8N Integration & Interaction

The presenter demonstrates accessing the integrated system by navigating to thesis.dev/n8n. Pasting the copied chat URL into the designated field allows interaction with the N8N workflow through the Thesis.dev interface. The presenter asks, "Which metrics improved the most over the last 3 weeks?" and then "Show the detection accuracy over time," demonstrating the system's ability to respond to natural language queries with dynamic charts and data visualizations. The N8N execution log confirms the successful interaction between the AI agent, Google Sheets, and Thesis.dev.

V. Key Arguments & Perspectives

The primary argument is that visualizing data through generative UI significantly improves data comprehension and decision-making compared to traditional methods. The presenter’s personal preference for visual data representation underscores this point. The video positions Thesis.dev as a powerful tool for bridging the gap between raw data and actionable insights, particularly for users who find data tables and spreadsheets cumbersome.

Notable Quote: "If you are like me I hate looking at numbers and uh and data tables like this. It's just a lot easier for me to take a look at it visually." – The Presenter

VI. Technical Terms & Concepts

  • API (Application Programming Interface): A set of rules and specifications that allow different software applications to communicate with each other.
  • Middleware: Software that connects different applications or systems. Thesis.dev acts as middleware between N8N and the UI.
  • JSON (JavaScript Object Notation): A lightweight data-interchange format used for transmitting data between a server and a web application. (Mentioned as a downloadable file for the AI agent).
  • CRM (Customer Relationship Management): A system for managing interactions with current and potential customers. The workflow can be adapted to connect to various CRMs.

VII. Conclusion & Takeaways

This video provides a practical guide to building an AI-powered data cockpit using N8N and Thesis.dev. The key takeaway is the ability to transform raw data from sources like Google Sheets into interactive, visually appealing dashboards that facilitate faster and more informed decision-making. The step-by-step instructions and clear demonstration empower viewers to replicate the workflow and adapt it to their own data sources and use cases. The combination of N8N’s automation capabilities and Thesis.dev’s generative UI creates a powerful solution for anyone seeking to unlock the full potential of their data.

Chat with this Video

AI-Powered

Hi! I can answer questions about this video "I Built an n8n AI Agent That Turns Data Into Beautiful Dashboards". What would you like to know?

Chat is based on the transcript of this video and may not be 100% accurate.

Related Videos

Ready to summarize another video?

Summarize YouTube Video