Stop Starting from Scratch: Let AI Agents Handle Google Apps Script Integration and Development for You
Turning Waste into Treasure with AI — Using Claude Design & Claude Code to Create Your Personal Desktop Dashboard as an Example.
Final Product Demo
Turn an iPhone 8 Plus that has been gathering dust in a drawer for years into a personal desktop Dashboard Deck, fully customized and completely free.
Preface
TL;DR If you only want to know how to use AI to create your personal desktop Dashboard, please skip this section.
I started using Google Apps Script around 2021 to develop small tools for automating and optimizing workflows. Back then, AI and RPA automation were rarely discussed. The goal was simply to improve team collaboration efficiency or enhance personal comfort. All scripts were written line by line by myself (what would now be considered old-school programming). But the hardest part wasn’t writing the code itself; it was whether and how to connect different services, and how to think outside the box.
Previous Projects
-
Goal — When the public-facing email inbox receives a message, forward it to the Slack work channel.
Technically, Google Apps Script does not have an event triggered when Gmail receives an email, so we use a different approach with a scheduled trigger running every minute (or longer): check unread emails ➡️ read content ➡️ strip HTML and forward to Slack ➡️ mark as read.
If you want to target specific emails (by sender or subject), set up a label filter in Gmail and change “check unread emails” to “check unread emails + label” to achieve this.
ref: 「 Using Google Apps Script to Forward Gmail Emails to Slack 」 -
Goal — Automatically query GA traffic/Crash-free rate and send to Slack work channel.
Google Apps Script already has built-in AnalyticsData / AdSense Libraries. Just import and set parameters to use them, making integration almost painless.
If the app wants to query crash issue details or Top 10, just add one more step: Firebase to BigQuery, then import BigQuery Library in Google Apps Script and run SQL queries to achieve this.
ref: 「 Crashlytics + Google Analytics Automatic Query for App Crash-Free Users Rate 」、「 Crashlytics + Big Query to Build a More Real-Time and Convenient Crash Tracking Tool 」 -
Goal — Automatically consolidate operational data into Google Sheets.
Following the previous method, a Web App was created to display all operational data clearly on the team’s TV wall; the technical challenge at that time was that some data was internal and inaccessible from the external network. Fortunately, the solution was to reverse the process by scheduling internal tasks to send data daily to the Google Apps Script Web App, which then processed and filled the data back into Google Sheets.
ref:「 使用 Google Apps Script 實現每日數據報表 RPA 自動化 」 -
Goal — Build a Simple App Packaging Platform Using Existing Resources
The background was that the app packaging service moved to GitHub Actions, but non-engineering teams also needed app packaging. Previously, this was handled manually; a service was needed within the company team to connect GitHub Actions to execute packaging.
Using Google Apps Script Web App as the platform, access was restricted to accounts within the organization. Users filled in packaging info via a form on the platform, which then triggered GitHub Actions (GitHub API) and sent packaging Slack notifications to the recipient.
The packaged app was uploaded to Firebase App Distribution. However, Google Apps Script does not have a built-in library, but after some research, it can be done directly with googleapis, and in the end, it was integrated smoothly.
ref: “Using Google Apps Script Web App to Connect GitHub Actions and Build a Free, Easy-to-Use Packaging Tool Platform”
There are some smaller cases not listed here. In short, the point is that “there are always more solutions than difficulties.” Actually writing the code is the easiest part; the real challenge is overcoming various obstacles to connect everything together.
Technical Limitations
The premise of “there are more solutions than difficulties” is that it is technically feasible and reasonable; in other words, “if the direction is wrong, effort is in vain.” We may not need to actually write code, but we must know when to “choose” to use Google Apps Script to develop small tools.
-
User-Agent cannot be customized: For security and abuse prevention, the Google Apps Script User-Agent cannot be set manually. (However, other header fields can be specified.)
Impact: Some rare API services require data in the User-Agent, or target websites/APIs block the Google Apps Script User-Agent. Both cases are hard limits and cannot be bypassed.
Workaround: If you really need to use it, you can proxy through a Cloudflare Worker. -
Maximum execution time 6 minutes: Each run can last up to 6 minutes. For large or numerous tasks, it is recommended to split them into segments.
Additionally, there is a total quota limit, such as triggers running up to 90 minutes per day. (But this seems to be a soft limit; many of my scripts exceed the quota without being blocked.) -
Single execution is mainly synchronous and blocking: You cannot dispatch multiple threads to run tasks concurrently within a single execution; if tasks are time-consuming or require extensive parallel processing, it is recommended to split them into multiple executions or use scheduled triggers.
-
Cold Start: A common issue with FaaS services is that when a task hasn’t been triggered for a long time, it goes to sleep, causing a longer wait time on the next trigger.
This problem, combined with the requirement for synchronous (blocking) execution, makes it easy for webhook deployments to be seen as failed requests by other services, leading to repeated requests, duplicate receptions, and repeated executions.
For example, Slack strictly requires webhook servers to respond within 3 seconds, and this issue is frequently encountered based on past experience. -
Web App API will redirect: For security reasons, the Content service response will redirect to a one-time
script.googleusercontent.comURL; HTTP clients need to support follow redirects.
Some Webhook services will fail if they do not automatically follow 302 redirects (e.g., Jira Webhook). -
Web App HTML: The webpage header includes an anti-abuse notice, true RWD cannot be achieved (the page is actually an iframe within the Google framework), the URL is ugly and cannot be customized, and it cannot support full-screen PWA pages.
- Service Limits: Some services have usage limits, but under normal use, you usually won’t exceed them. However, if you require high-frequency checks or real-time responses, it’s easy to hit those limits.
https://developers.google.com/apps-script/guides/services/quotas?hl=zh-tw
Advantages and Features
Let’s first look at the advantages and features.
The biggest advantage is the seamless integration with native Google services. Web App access can be set to the script owner, organization members, signed-in Google accounts, or anyone. No need to handle complex OAuth flows yourself—one-click setup, one-click completion, one-click start:
內建整合服務 Built-in Services:
Can be used without importing in GAS services.
-
DocumentApp → Google Docs
-
SpreadsheetApp → Google Sheets
-
SlidesApp → Google Slides
-
FormApp → Google Forms
-
GmailApp → Gmail
-
CalendarApp → Google Calendar
-
DriveApp → Google Drive
-
SitesApp → Google Sites
-
Maps → Maps / Distance / Routes
-
Translate → Translation
Advanced Services: Must be enabled in GAS services before use.
-
Sheets API
-
Drive API
-
Calendar API
-
Gmail API
-
Analytics API / Analytics Data API
-
BigQuery API
-
Adsense API
-
YouTube Data API
-
Tasks API
-
Googleapis (Other/GCP)
Tools / System Services:
-
UrlFetchApp → Call external API
-
PropertiesService → Key-Value Storage
-
CacheService → Cache
-
LockService → Concurrency Control
-
Utilities → Date / Hash / Base64
-
Logger → Log Output
-
HtmlService → Build Web UI, supports Ajax asynchronous content updates
-
ContentService → Creating an API endpoint
-
Trigger → Scheduled Automatic Execution
Basically, all the necessary components for development are available. In practice, you just need to connect and combine these services to achieve process automation, for example:
-
Automatically Query GA Traffic/Crash-free Rate and Send to Slack Work Channel:
Use Analytics Data API to fetch data, PropertiesService to store Slack Bot Token, and UrlFetchApp to call Slack Send Message API. -
Automatically aggregate operational data into Google Sheets and data dashboard web:
Trigger scheduled function execution, use LockService to ensure only one instance runs, fetch data with Analytics Data API, get external service data via UrlFetchApp, write to Google Sheets with SpreadsheetApp, output web app interface using HtmlService, output JSON data with ContentService plus cache data with CacheService.
Differences from FAAS like Cloud Function / Lambda
Google Apps Script can be seen as a FAAS scripting tool centered around Google service scenarios. It has more limitations but is currently completely free and offers seamless integration with Google services; other FAAS services usually require payment, though some offer free tiers, and integrating with Google services typically involves complex IAM or OAuth procedures.
Unsuitable Scenarios
-
Not part of the Google ecosystem, for example, wanting to connect Microsoft Office or OneNote…
-
A hybrid of local and cloud is more suitable for n8n or AI Agent.
-
Complex calculations or large data processing cannot complete within the maximum 6-minute execution time per run.
-
Large-scale web scraping or ticket-snatching programs are not feasible. Google Apps Script is easily blocked or stopped by Cloudflare’s anti-scraping measures.
Suitable Scenarios
For personal or team workflow integration, I have many scripts managing my daily routines. For example, I get daily notifications about the website traffic overview of zhgchg.li, GitHub Repo Issues, and even update current stock prices on a Google Sheet. For teams, the app release process can integrate with Google Calendar to check calendar events, trigger the corresponding CI/CD workflows (calling GitHub Actions), then send messages to the team Slack channel and forward app review failure emails to Slack.
The above is a human perspective review of my experiences developing Google Apps Script over the years. Next, I will share my recent experience using AI Agents to develop GAS from scratch — a personal desktop Dashboard Deck — along with practical examples.
Let AI Agents Handle Google Apps Script Integration and Development for You Directly
Recently, I started trying to develop Google Apps Script directly from scratch using AI, combined with the basic knowledge above (even without it, AI proficiency is very high); the completeness and accuracy are almost 100%, so we can say the era of “AI writing code from zero” is over.
Practical Example — Turning Waste into Treasure with AI — Build Your Personal Desktop Dashboard Using Claude Design & Claude Code
Problem
I have an old iPhone 8 Plus (iOS 16.7) that I replaced and left unused in a drawer. I thought I could turn it into a desktop dashboard to display real-time information I want to see.
Infrastructure
To enable AI Agents to help you develop Google Apps Script, we need to complete some basic infrastructure.
Even if you are not developing for AI, it is highly recommended to use it when working on medium to large scripts. The Web Editor can sometimes crash or accidentally overwrite new code with old code when multiple tabs are open. Using Clasp makes writing and managing source code more convenient and secure.
Other Use Cases: Upload Google Apps Script Project to Git Repo for version control (excluding
.clasprc.jsonand.clasp.json), add CI to automatically run Jest JS unit tests, use Clasp Token for CD to pull the latest code, and use .claspignore to exclude files that should not be uploaded to the Google Apps Script Project.
-
Node.js >= 20.0.0 ( If you haven’t installed the Node.js environment, please install it first )
-
npm i @google/clasp -g
-
Run
clasp loginto sign in and generate an authorization token ( choose the Google Apps Script corresponding account ) -
Save clasprc (Clasp Token) to Keychain so the AI Agent can securely access it
security add-generic-password \
-U \
-s "com.google.clasp" \
-a "$USER" \
-w "$(cat ~/.clasprc.json)"
If you want to copy the Clasp Token and put it into the CI/CD Secret to run tasks, you can use cat ~/.clasprc.json \\| base64 \\| pbcopy (remember to add base64 encode). When using it, run echo "$CLASPRC" \\| base64 --decode > ~/.clasprc.json && chmod 600 ~/.clasprc.json
- Create Project Directory
You must create a project directory and then enter it.
- Create a Google Apps Script Project in the Directory (Using clasp)
clasp create
The project name will be the same as the directory name.
The current project is empty, containing only the appsscript.json configuration file.
My Design
If you want to save tokens, you can directly git clone my GAS Web App to reuse my design and the developed GAS code.
Designing Dashboard Using Claude Design or Design Agent Skill
Method 1 — Claude Design
In the previous article “Jekyll Blog Custom Theme Design｜Quickly Create a Unique Style with Claude Design + Claude Code”, the same steps were introduced. Adjust the design until satisfied, then export the Project, unzip it, and place it into the project’s ./Design directory.
Method 2 — Design Agent Skill
Use a third-party Design Skill to complete the design. My prompt is roughly as follows:
/huashu-design
Design a web dashboard that can be displayed in landscape mode on an iPhone 8 Plus, and place the design results in the ./Design directory
- It will be deployed later as a Google Apps Script Web App
- The top area fixedly shows the date, day of the week, and a flipping clock
- The bottom tabs switch periodically and display a timed progress bar
- The bottom tabs include:
-- Weather conditions
-- Calendar: current events or upcoming events of the day, showing remaining events
-- Countdown/count-up days
I use Model: Opus 4.7 (1M context) / Effort: Medium
⏺ I first grasped the context: iPhone 8 Plus landscape = 736×414 CSS px, content data structure (weather / calendar / countdown) is clearly defined in CLAUDE.md.
You haven’t specified the style yet. I will give you 3 distinctly different design directions as your "design consultant." Please choose one (or mix, e.g., "font from A + colors from C"), then I’ll create the full hi-fi design.
---
🅐 Direction One · Massimo Vignelli Style Swiss Grid (Information Architecture)
▎ Vignelli’s grid aesthetic for the NYC subway—Helvetica + strict columns + red, black, and white. Information itself is decoration, no illustrations, icons, or gradients.
- Fonts: Neue Haas Grotesk / Inter Tight (display) + IBM Plex Mono (clock/numbers)
- Colors: pure white background #FAFAFA · pure black ink #0A0A0A · single vermilion accent #E63946 (used in progress bar and active tab)
- Layout: 12-column baseline grid, all elements aligned; page-flip clock is black background with white large text + thin horizontal separators; tabs are block color with no rounded corners
- Keywords: rational / restrained / print-like / information density / timeless
- Suitable for: you want a dashboard that won’t age, like a high-quality newspaper front page
---
🅑 Direction Two · Dieter Rams × Braun Industrial Instruments (Minimalist Industrial)
▎ Rams’ aesthetics for Braun ET66 calculator and audio systems—light beige gray background + rounded hardware panel + single orange accent +
▎ physical button texture. Each block looks like an independent instrument panel.
- Fonts: Söhne / Inter (labels) + JetBrains Mono (clock in LCD seven-segment style)
- Colors: warm beige gray #E5E1DA · dark charcoal #2B2B2B · Braun orange #E85D2C accent · page-flip clock uses LCD yellow-green #A8B547 vintage LCD style
- Layout: each card has subtle inner shadow and 1px hairline border, giving a recessed physical instrument feel; tab switches look like pressed buttons
- Keywords: industrial design / tactile / 1970s Braun / steady / engineer aesthetic
- Suitable for: you like hardware feel and want comfort for long viewing
---
🅒 Direction Three · Teenage Engineering OP-1 / Terminal (Sportive Poetics)
▎ TE’s OP-1 synthesizer panel and old OLED terminal aesthetics—dark charcoal gray background + OLED teal glow + mono fonts + fine grid background. Page-flip clock is a large OLED
▎ flip display, progress bar like sequencer step lights.
- Fonts: JetBrains Mono / IBM Plex Mono (overall) + Berkeley Mono (display large text)
- Colors: background #0E0F0D · main text #E8E5DA off-white · OLED teal #9DEF8F accent · warning orange #FFB454
- Layout: very faint 8px dot grid background; page-flip clock large text occupies 1/3 width with subtle scan lines; tab progress bar as LED steps; weather uses ASCII style icons
- Keywords: OLED / cyberdeck / analog synth / hacker chic / hacker culture
- Suitable for: you want it to feel like a “device” on your desk, not just a “webpage”
---
Please tell me which one you choose (or which elements to mix), and I’ll proceed with the full hi-fi design into ./Design/. You can also say “none fit, show me more,” and I’ll suggest other styles.
You can choose your preferred style or tell the AI the style you want, such as paper texture style, off-white rice paper + red seal aesthetics.
Waiting for AI to complete the design… AI might use Playwright to take a screenshot for verification after finishing. If you want to save tokens and verify the result yourself, you can add that instruction in the prompt.
Click the .html file directly in the directory to view the design results:
調整直到滿意後，再進行下一個開發步驟。
Create the Countdown Data Source Google Sheet:
Finally, conveniently create a countdown data source Google Sheet. In the future, just add data to this Sheet.
title,date,repeat
Birthday,1994-07-18,yes
Trip to Japan,2026-12-12,
repeat=yes: An event that recurs every year
Note the Sheet Id: the red-highlighted part in the URL above / Gid: 0 (the first Sheet).
Register for the Central Weather Bureau API Key:
-
Register/Login: https://opendata.cwa.gov.tw/userLogin
-
Get Authorization Code
Developing and Implementing the Dashboard Using Claude Code
First, initialize Claude Code Memory Markdown:
/init
Execute Plan to organize development tasks:
/plan
Implement the Dashboard web page functionality and design from ./Design, deploy it to Google Apps Script Web App.
- Use the Central Weather Bureau API from the Ministry of Transportation and Communications for weather: https://opendata.cwa.gov.tw/api/v1/rest/datastore/F-C0032-00
- Display the weather for Taipei City, show all available fields
- During development, you can generate a Token yourself and deploy the Web App to trigger necessary methods and test; be sure to remove this open access after finishing development
- Deploy the Web App to be accessible by everyone but protected with a custom Token; first-time users can enter the Token or pass it via URL
- Default calendar to read: primary
- Countdown dates are read from the Google Sheet I gave you, with title, date, repeat; if repeat is yes, it means an annual recurring countdown, also display how many years and months have passed (floor value)
- API Key, Google Sheet ID/GID, etc. are all stored in PropertiesService settings
- Directly use clasp push & deploy for me; clasprc login token is stored in keychain security add-generic-password \ -U \ -s "com.google.clasp" \ -a "$USER"
- If there are steps I need to handle manually, please tell me each step in Traditional Chinese
- oauthScopes": [ "https://www.googleapis.com/auth/script.external_request", "https://www.googleapis.com/auth/calendar", "https://www.googleapis.com/auth/spreadsheets", "https://www.googleapis.com/auth/script.scriptapp" ]
- Double check that google.script.run integration and usage format are correct
- The live GAS Web App HTML is rendered inside an iframe wrapper.
- Files like ./Design that do not need to be uploaded to Google Apps Script should be added to .claspignore
-
Web Apps have four access levels: anyone, only yourself, only signed-in users, signed-in users within the organization
-
The design in the above example is simple: everyone can access it, but they need to enter the correct random Token to view the data. The weather can be changed to your own location, and multiple locations are also supported.
-
The calendar by default only handles the primary calendar. If you have other calendars, you can get their Calendar ID from Calendar Settings & Sharing -> Integrate Calendar -> Calendar ID.
-
Added a lazy development step here: directly let the AI deploy a test Web App entry so it can develop, test, and fix simultaneously, then notify me when it’s done
If there are any issues with the plan, ask the AI; if not, you can start implementation!
Making Coffee While Waiting for AI Development…
AI Agent Question:
Action needed from you (one-time):
1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
2. Top-right "Deploy" → "Manage deployments"
3. Delete both existing deployments (the bare @HEAD and dev v1 — the pencil-icon edit doesn't let you change access type)
4. Then "New deployment" → Type: Web app → Execute as: Me (your account) → Who has access: Anyone → Deploy
5. Grant OAuth on the consent screen (calendar.readonly, spreadsheets.readonly, external_request)
6. Copy the new web app URL (looks like https://script.google.com/macros/s/AKfycb.../exec) and paste it here
Also paste:
- CWA API Key (Central Weather Administration Open Data Authorization)
- Countdown Sheet ID (the long part in the Sheet URL between /d/ and /edit)
- Sheet GID (the number after gid= in the URL — defaults to 0 for the first tab)
Once I have the URL + secrets, I'll seed Properties via the dev endpoint, mint the access token, verify each handler, and wire you in.
(1. ) The first run still requires our authorization; after that, the AI Agent can run on its own. Go to the Script Editor URL:
Randomly select a file with functions, then choose a function to debug:
- Authorization is only required on the first run or when new permissions are added.
If AI keeps reporting permission issues but no authorization prompt appears during execution, you can go to the project settings and check “Show ‘appsscript.json’ manifest file in editor.” Then, return to the editor, edit
appsscript.jsonto change the oauthScopes content, run it once, and then change it back and run again. This should trigger the authorization process.
Only 1. You need to handle yourself; the rest can be done by AI:
1. OK, please deploy it for me directly
CWA API Key: CWA-XXXX-XXXX-XXXX-XXXX-XXXX
Countdown Sheet ID: XXXX / GID: 0
Assist AI in Setting Up Google Apps Script. .
⏺ Scope is updated and pushed but the deployer's OAuth grant needs to be re-authorized for the new scope. The web app runs under your account — newly added
scopes require you to re-grant.
Please do this once:
1. Open the editor: https://script.google.com/d/1KEWgIql-gqTNI_Tv_w2-5t7VE_R0eBtjAtd3iqLqabYLOnzJZ8Ga8N4s/edit
2. From the function dropdown at the top, pick setupConfig (or any function)
3. Click 執行 / Run — Google will pop a "需要授權 / Authorization required" dialog
4. Allow → grants the upgraded auth/spreadsheets scope
5. Tell me when done and I'll re-test the countdown handler
Although we have agreed with the AI, it may still get stuck in some areas and need manual help, such as the message above; we simply follow its steps to click and run a function once, then tell it OK—just helping out. (If the method it mentions doesn’t appear, just refresh the page)
AI development completed, acceptance!
If any issues are found, you can ask the AI to fix them.
Build Your Personal Desktop Dashboard with AI — Results
Desktop Version
iPhone Mobile Version
GAS Web App cannot achieve full-screen PWA with hidden address bar. For a 100% experience, please refer to the advanced content.
Final Code
Follow-up Tasks
-
[required] Tell the AI: Remove all development-stage interfaces/endpoints after completion
-
[optional] Google Apps Script Project -> Project Settings -> Script Properties ->
ACCESS_TOKEN-> regenerate a random string, and also replace the?token=in the URL with this string
On macOS, you can generate a random string with this command:openssl rand -hex 32 -
[optional] Regenerate the Ministry of Transportation and Central Weather Bureau API Key and enter it into Google Apps Script Project -> Project Settings -> Script Properties ->
CWA_API_KEY
⚠️ According to Claude Code warning: All tokens exposed in the conversation may leak and should be considered compromised. For development convenience, tokens are entered directly for verification but must be regenerated and replaced after verification.
If you are familiar with GAS, you can set up the script properties yourself from the start and then instruct the AI to use them directly.
Further Reading
If this article sparks your creativity, consider what else you can connect and display. For example, I also integrated Yahoo Finance to get real-time stock prices of my tracked stocks, and connected AnalyticsData / AdSense to obtain website traffic and ad performance.
Advanced
Because GAS Web Apps cannot achieve true RWD or full-screen PWA (hiding the address bar), I use GAS Web Apps only as API services that return JSON data. Then, I implement the frontend separately with GitHub Pages and deploy it as a full website. This way, I can provide a complete user experience.
iOS Full-Screen PWA Web Settings -> Open URL in Safari -> Share -> Add to Home Screen
This approach is a bit more complex. You can tell the AI during the /plan stage:
- GAS Web App only handles backend services, outputting JSON for frontend use
- Frontend uses GitHub Pages for design, presentation, and deployment, completing all development and deployment tasks for me
- A custom random string Token protects communication between frontend and backend
Summary
This concludes the introduction to using AI Agents for direct Google Apps Script development. Recently, I have also been using AI to refactor previously developed medium to large GAS projects with good results. It can even add function unit tests locally (using Jest, MOCK Google APIs) to improve stability (running on CI/CD, combined with clasp pull & backup GAS Project); the AI’s grasp of GAS and output accuracy is nearly 100%.
If it were 2021…
If it were in the era without AI, handcrafting everything from zero—including design, slicing, programming logic development, and deployment—I estimate it would take about 30 hours; now, with AI, it can be done within 3 hours.
Basically, I probably won’t develop GAS from scratch anymore, nor write code from zero with AI. Instead, I’ll have AI build the complete product for me from the start (code? IDGAF).
Case (2) — Personal Stock Portfolio Management
Another recent AI case I tried was having it directly handle Google Apps Script. I asked it to convert my Google Sheet stock portfolio into a visual Web App, combining Yahoo Finance to get the latest stock prices and display them in a table. Below, I can quickly enter buy and sell records, which will then be written back to the Google Sheet.
Further Reading
TL;DR These are all previously hand-crafted GAS services and tools
-
Quick Integration Method for Google Apps Script x Google APIs
-
Simple 3 Steps — Create a Free GA4 Automated Data Notification Bot
-
Slack Builds a Fully Automated WFH Employee Health Status Reporting System
-
Crashlytics + Big Query: Building a More Real-Time and Convenient Crash Tracking Tool
-
Crashlytics + Google Analytics Automatic Query for App Crash-Free Users Rate
-
Create a GitHub Repo Star Notifier for Free in Three Steps Using Google Apps Script
-
10-Minute Quick Migration from Line Notify to Telegram Bot Notifications
Comments