Vibe Coding Tutorial: Build Your First App in 90 Minutes (No Code Needed)

Open Google Sheets and create a new blank spreadsheet.

In the top menu go to Extensions → Apps Script. A new tab opens with an empty script editor. That is where the code lives.

I always start students with Google Apps Script because there is zero setup — it runs in the browser, it is free, and you can share the result instantly with anyone who has a Google account.

In your spreadsheet, label row 1 columns A, B, C, D as: Date, Description, Amount, Category. Leave row 2 onward empty for now.

Open Claude (claude.ai) or ChatGPT in another tab. Paste this exact prompt:

Create a Google Apps Script that:
1. Reads column A (date), B (description), C (amount) from my Google Sheet
2. Auto-categorizes each row into: Food, Transport, Housing, Entertainment, or Other
3. Puts the category in column D
4. Run this when I click a custom menu item called "Categorize Expenses"

Hit send. Claude or ChatGPT will reply with code that looks very close to this:

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu('AI Tools')
    .addItem('Categorize Expenses', 'categorizeExpenses')
    .toUi();
}

function categorizeExpenses() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();

  const categories = {
    food: ['restaurant', 'cafe', 'grocery', 'food', 'coffee', 'lunch', 'dinner', 'breakfast'],
    transport: ['uber', 'lyft', 'taxi', 'gas', 'transit', 'parking', 'bus', 'skytrain'],
    housing: ['rent', 'hydro', 'insurance', 'mortgage', 'strata', 'utilities'],
    entertainment: ['netflix', 'spotify', 'movie', 'concert', 'game', 'book'],
  };

  for (let i = 1; i < data.length; i++) {
    const description = String(data[i][1]).toLowerCase();
    let category = 'Other';

    for (const [cat, keywords] of Object.entries(categories)) {
      if (keywords.some(kw => description.includes(kw))) {
        category = cat.charAt(0).toUpperCase() + cat.slice(1);
        break;
      }
    }

    sheet.getRange(i + 1, 4).setValue(category);
  }

  SpreadsheetApp.getUi().alert('Done! ' + (data.length - 1) + ' expenses categorized.');
}

You did not write any of this. You described what you wanted in plain English and the AI translated. That is the entire point of vibe coding.

Back in the Apps Script editor, delete the empty function myFunction() block. Paste the code Claude gave you in its place. Hit Save (Ctrl+S or Cmd+S). Name the project Expense Tracker.

Reload your Google Sheet tab. You will see a new menu called AI Tools appear at the top, right next to Help.

Add a few sample rows: 2026-04-01, Starbucks coffee, 6.50, 2026-04-02, Uber to airport, 38.20, 2026-04-03, Netflix, 19.99.

Click AI Tools → Categorize Expenses. The first time you run it Google will pop up an authorization screen.

Common error message: You need to authorize this script. Click Review Permissions, pick your Google account, click Advanced → Go to Expense Tracker (unsafe), then Allow.

The first time I ran this I got an auth error and thought I had broken something. You have not. Just click through the permission screen — Google warns you any time a script is your own, not just malicious ones.

Run it again. Watch column D fill in with categories. That is your first vibe-coded feature, working.

Go to console.anthropic.com and create an API key. There is a free tier with enough credits to run this tutorial dozens of times. Copy the key — it starts with sk-ant-.

In Apps Script go to Project Settings (gear icon) → Script Properties and add a property named CLAUDE_API_KEY with your key as the value. This keeps the key out of your code.

Now back to Claude. Paste this prompt:

Write a Google Apps Script function called generateAISummary() that
reads my expense data from columns A-D, calls the Anthropic Claude API
to generate a plain-English spending summary, and displays it in a sidebar.
Add a menu item under "AI Tools" called "Summarize My Spending" that runs it.
The API key is stored in Script Properties under the key CLAUDE_API_KEY.

You will get back something close to this. Paste it under your existing functions:

function generateAISummary() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getDataRange().getValues();

  // Build expense summary string
  const expenses = data.slice(1).map(row =>
    `${row[0]}: ${row[1]} - $${row[2]} (${row[3]})`
  ).join('\n');

  const apiKey = PropertiesService.getScriptProperties().getProperty('CLAUDE_API_KEY');

  const response = UrlFetchApp.fetch('https://api.anthropic.com/v1/messages', {
    method: 'post',
    headers: {
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
      'content-type': 'application/json'
    },
    payload: JSON.stringify({
      model: 'claude-3-haiku-20240307',
      max_tokens: 500,
      messages: [{
        role: 'user',
        content: `Analyze these expenses and give me a 3-sentence plain-English summary of my spending patterns:\n\n${expenses}`
      }]
    })
  });

  const result = JSON.parse(response.getContentText());
  const summary = result.content[0].text;

  // Show in sidebar
  const html = HtmlService.createHtmlOutput(`<p style="font-family:sans-serif;padding:16px">${summary}</p>`)
    .setTitle('AI Spending Summary');
  SpreadsheetApp.getUi().showSidebar(html);
}

Update your onOpen() function to add a second menu item that runs generateAISummary. Save. Reload the sheet.

Add 10 sample expenses across different categories. Click AI Tools → Categorize Expenses. Confirm column D fills in. Then click AI Tools → Summarize My Spending.

A sidebar appears with a 3-sentence summary written by Claude. Read it. If the tone is too dry or too technical, head back to your Claude tab and paste this:

The summary is too technical. Rewrite the prompt inside the function
to give me actionable advice like a financial coach would —
warm, specific, and ending with one clear next step.

Claude returns an updated function. Replace your old generateAISummary with the new one. Save. Run it again. Better summary.

This is the real vibe coding loop. You run it, see what is wrong, describe the fix in plain English, paste the new code, run again. Repeat. This loop is how I built my first SaaS tool — by typing complaints into Claude until the complaints stopped.

Click Share in the top right of your sheet and send it to a friend. They get a working AI expense tracker — your first piece of distributed software.

Want to ship it as a real web app? In Apps Script click Deploy → New deployment → Web app. Pick Anyone with the link. You now have a public URL.

What to build next, using the same loop:

• Add a budget tracker that flags overspending categories.
• Email a weekly summary to yourself every Monday morning.
• Sync recurring bills from a Google Calendar feed.
• Add a simple chatbot sidebar that answers questions about your spending.

Each one of these is a single Claude prompt away. That is what changes when you stop writing code and start describing it.