Build a Gemini Powered AI Dashboard Web App Google Apps Script

by

📘 Lesson 8 — Build a Gemini-Powered AI Dashboard Web App (Capstone Project)

Blog Post #8 in the Apps Script + APIs + Gemini Series

https://github.com/lsvekis/Google-Apps-Script-APIs-Gemini-8-Lessons-

You’ve learned how to:

  • Call APIs
  • Parse JSON
  • Secure API keys
  • Build web apps
  • Integrate Gemini
  • Embed AI into Sheets and Docs

Now it’s time to put everything together.

In this final lesson, you’ll build a Gemini-powered AI dashboard — a real web app where users can:

  • Enter prompts
  • Get AI responses
  • See results instantly
  • Log interactions
  • Reuse the app for learning, productivity, or internal tools

This is a full end-to-end Apps Script application.

🎯 What You’ll Build

By the end of this lesson, you’ll have:

✅ A deployed Apps Script web app
✅ A clean HTML UI for prompt input
✅ Gemini-powered AI responses
✅ Server-side security (no exposed keys)
✅ A response history stored in Google Sheets
✅ A reusable AI app architecture

This pattern is used for:

  • AI tutors
  • Internal AI assistants
  • Knowledge tools
  • AI dashboards
  • Learning platforms

🧠 Architecture Overview

User (Browser)
   ↓
HTML UI (index.html)
   ↓
google.script.run
   ↓
Apps Script (Server)
   ↓
Gemini API
   ↓
Response → UI + Sheet

Everything sensitive stays server-side.

📍 Step 1 — Server-Side: Web App Entry Point

/**
 * Web app entry point.
 */
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('Gemini AI Dashboard');
}

📍 Step 2 — Server-Side: Handle AI Requests

/**
 * Handles AI prompt requests from the UI.
 */
function runGeminiPrompt(prompt) {
  if (!prompt || !prompt.trim()) {
    return { ok: false, error: 'Prompt cannot be empty.' };
  }

  try {
    var response = callGemini(prompt);
    logPrompt(prompt, response);

    return {
      ok: true,
      result: response
    };

  } catch (err) {
    return {
      ok: false,
      error: err.message
    };
  }
}

📍 Step 3 — Server-Side: Log History to Google Sheets

/**
 * Logs prompt & response to a Google Sheet.
 */
function logPrompt(prompt, response) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName('AI History');

  if (!sheet) {
    sheet = ss.insertSheet('AI History');
    sheet.appendRow(['Timestamp', 'Prompt', 'Response']);
  }

  sheet.appendRow([
    new Date(),
    prompt,
    response
  ]);
}

📍 Step 4 — Client-Side HTML (index.html)

Create an HTML file named index:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="UTF-8">
    <title>Gemini AI Dashboard</title>

    <style>
      body {
        font-family: system-ui, sans-serif;
        padding: 2rem;
        max-width: 800px;
        margin: auto;
      }
      textarea {
        width: 100%;
        min-height: 120px;
        font-size: 1rem;
        padding: 0.5rem;
      }
      button {
        margin-top: 1rem;
        padding: 0.6rem 1.2rem;
        font-size: 1rem;
        cursor: pointer;
      }
      .output {
        margin-top: 1.5rem;
        white-space: pre-wrap;
        background: #f6f8fa;
        padding: 1rem;
        border-radius: 6px;
      }
      .error {
        color: #b00020;
      }
    </style>
  </head>

  <body>
    <h1>Gemini AI Dashboard</h1>

    <textarea id="prompt" placeholder="Enter your prompt..."></textarea>
    <br>
    <button onclick="sendPrompt()">Run Gemini</button>

    <div id="output" class="output"></div>

    <script>
      function sendPrompt() {
        var prompt = document.getElementById('prompt').value;
        var output = document.getElementById('output');

        output.textContent = 'Thinking...';
        output.className = 'output';

        google.script.run
          .withFailureHandler(function(err) {
            output.textContent = err.message;
            output.className = 'output error';
          })
          .withSuccessHandler(function(res) {
            if (!res.ok) {
              output.textContent = res.error;
              output.className = 'output error';
              return;
            }
            output.textContent = res.result;
          })
          .runGeminiPrompt(prompt);
      }
    </script>
  </body>
</html>

🚀 Step 5 — Deploy the Web App

  1. Click Deploy → New deployment
  2. Type: Web app
  3. Execute as: Me
  4. Access: Anyone
  5. Deploy and open the URL

🎉 You now have a live Gemini-powered AI app.

🧪 Try These Prompts

  • “Explain closures in JavaScript with examples.”
  • “Summarize this lesson in bullet points.”
  • “Create a study plan for learning Apps Script.”
  • “Rewrite this idea in simpler terms.”

Every interaction is logged automatically.

🧪 Capstone Exercises (Highly Recommended)

Exercise 1 — Prompt Presets

Add buttons:

  • Explain
  • Summarize
  • Generate Ideas

Each modifies the prompt before sending.

Exercise 2 — Conversation History

Display the last 5 responses from the sheet in the UI.

Exercise 3 — User Roles

Add a check:

  • Students → simplified responses
  • Developers → technical responses

💡 Pro Tips for AI Dashboards

Tip 1 — Always Label AI Output

Users should know what’s AI-generated.

Tip 2 — Log Everything

Logs improve:

  • Debugging
  • Prompt quality
  • Learning outcomes

Tip 3 — This Scales

This exact app can become:

  • A Workspace Add-on
  • An internal AI tool
  • A learning platform feature

🎓 Series Wrap-Up

You now know how to:

✅ Work with APIs
✅ Secure secrets
✅ Build web apps
✅ Integrate Gemini
✅ Embed AI in Sheets & Docs
✅ Build a complete AI application

You are no longer “experimenting with AI” —
you are building with it.