Build Your AI Productivity Toolkit

From zero to shipping tools that save you hours – in 30 minutes

Paulo · Senior Revenue Operations Manager · FrankieOne

Scroll ↓

The Opportunity

You don't need to be an engineer to build tools that save real time and money.

$70K

saved with a single Deal Calculator tool

10x

faster than waiting for engineering tickets

lines of code written manually by me

Today's session: I'll show you the exact setup and thinking so you can do this too.

What We'll Cover

The AI Stack

Claude, IDE, folders – how they connect

5 min

Keys & Security

API keys, OAuth, client secrets – and where to keep them

5 min

Languages & Frameworks

React vs HTML, when to use what

5 min

MCPs & Context

What they are, why they're a game-changer, and how to teach Claude your business

5 min

Non-Tech Setup

Claude Code, IDEs, local servers – can anyone do this?

5 min

Hosting & Shipping

Getting your tool live – platforms and considerations

5 min

The AI Stack: How It All Connects

🧠

Claude AI

The brain. Writes code, solves problems, plans.

⟷

💻

IDE / Editor

Where files live. VS Code or Cursor recommended.

⟷

📁

Local Folders

Your project files on disk. Code, images, configs.

The Dynamic

You describe what you want → Claude writes the code → IDE saves it to your folder → You preview & iterate

Claude Code connects directly to your terminal – no copy-pasting code. It reads your files, writes changes, and runs commands.

API Keys, Client IDs & Secrets

Think of these as digital credentials – like a username and password for software talking to other software.

API Key

"Your ID badge"

A unique string that identifies you to a service. Like showing your badge at the door.

sk-abc123xyz...

Client ID

"Your employee number"

Identifies your app when talking to another service. Public – safe to share.

app-12345

Client Secret

"Your PIN code"

Proves your app is really yours. Private – never share, never commit to code.

sec_••••••••

⚠️

Golden rule: Never put secrets in your code files. Use environment variables (.env files) instead.

Keeping Secrets Secure

✓ DO THIS

Store keys in .env files
Add .env to .gitignore
Use hosting platform secrets (Vercel, Netlify, Cloudflare)
Rotate keys if exposed
Use separate keys for dev and production

✗ NEVER DO THIS

Hardcode keys in source code
Push secrets to GitHub
Share keys over Slack/email
Use production keys while testing locally
Ignore key rotation when team members leave

What Language Should I Code In?

The honest answer: it barely matters. Claude writes the code – you describe what you want.

Language	Best For	Difficulty	Notes
HTML / CSS / JS	Simple tools, dashboards, forms, calculators	Easiest	Opens in any browser. No build step needed.
React (JSX)	Interactive apps, complex UIs, component reuse	Moderate	Needs Node.js to build. More powerful but heavier.
Python	Data scripts, API integrations, automation	Easy	Great for backend tasks. Not for visual UIs.
Node.js	Server-side APIs, webhooks, real-time apps	Moderate	Same language as frontend. Good for full-stack.

My recommendation: Start with plain HTML. You can always add complexity later.

React vs HTML

HTML / Vanilla JS

✓ Single file – just open in browser
✓ No build tools, no Node.js
✓ Perfect for calculators, forms, dashboards
✓ Easy to host anywhere
✓ Claude can build a full tool in one file
✓ Great for prototypes and MVPs

React / Next.js

✓ Component-based – reusable pieces
✓ Better for complex, multi-page apps
✓ State management for dynamic data
⚡ Needs Node.js + npm to run
⚡ Steeper learning curve
⚡ Best when you'll maintain long-term

Rule of thumb: If a single HTML file can do it, don't reach for React. Complexity has a cost.

What's an MCP?

Model Context Protocol – A universal way for AI to talk to your tools and data.

🔧

Your Tools

HubSpot, Slack, Google Drive, databases...

→

🔌

MCP Server

Translates between AI and your tools

→

🚀

Claude

Understands context, takes actions

Plug and play

Pre-built MCPs for most popular tools. Install in minutes, not days.

Real-time data

Claude can read your actual CRM data, not just what you paste in.

Take actions

Update records, send messages, create tickets – from a conversation.

An MCP Is Just a Config File

Seriously. This is the entire setup to connect Claude to HubSpot:

          
          
          
          claude_desktop_config.json
        

{
  "mcpServers": {
    "hubspot": {
      "command": "npx",
      "args": ["hubspot-mcp-server"],
      "env": {
        "HUBSPOT_API_KEY": "your-key-here"
      }
    }
  }
}
        
Name it anything you want
The pre-built MCP package
(someone already made this)
Your API key from HubSpot
(the only custom part)

That's it. 10 lines. Save the file, restart Claude, and it can now read your entire CRM.

🔒 Where does this file live? In a system config folder on your machine (~/Library/Application Support/Claude/ on Mac). It's local only – never pushed to GitHub, never shared. Your API key here is as safe as a saved password in your browser.

Before vs After MCPs

WITHOUT an MCP

Log into HubSpot
Navigate to the report you need
Export as CSV
Open Claude
Upload the CSV
Ask your question
Realise you need different data
Go back to step 1...

WITH an MCP

1. Ask Claude your question

That's it.

Claude reads HubSpot directly, pulls the data it needs, and answers in seconds.

Setup time: Copy config from readme + paste your API key + restart Claude = done in under 5 minutes

Teaching Claude About Your Business

Claude is powerful out of the box, but it doesn't know your frameworks, tone, or processes. Here's how to fix that:

Claude.ai

Projects

Upload docs (PDFs, frameworks, templates) to a Project. Every conversation inside it automatically has that context.

Drag and drop files. No code required.

Claude Code

CLAUDE.md

A plain text file in your project folder. Claude reads it automatically on every session. Write rules in plain English.

Create a text file. Save as CLAUDE.md.

Settings

Custom Instructions

A persistent note that applies to every conversation. Great for role, tone, and default preferences.

Type in Settings. Applies everywhere.

All three methods use plain English. No code, no special syntax – just describe what you want Claude to know.

What a Context File Actually Looks Like

This is a real CLAUDE.md – plain English that Claude reads automatically:

        
        
        
        CLAUDE.md
      

# Sales Analysis Rules

When analysing deals, always use the
MEDDPICC framework:
- Metrics: quantified business outcomes
- Economic Buyer: who signs off
- Decision Criteria: how they decide
- Decision Process: steps to close
- Paper Process: legal/procurement
- Implicate the Pain: why change now
- Champion: internal advocate
- Competition: who else is in play

# Email Tone
Write in a direct, professional tone.
No fluff. Australian English spelling.
Keep emails under 150 words.
      

What happens

Claude reads this file every time it starts. Now when you say "analyse this deal" or "draft an email", it automatically applies your frameworks and preferences.

Example prompts that just work

"Score this deal against MEDDPICC"

Claude now knows every criterion and scores each one

"Write a follow-up to the CFO"

Direct tone, AU spelling, under 150 words – automatically

OAuth – The "Login With" Flow

OAuth lets your tool access another service on behalf of a user – without ever seeing their password.

User clicks "Connect"

Your app sends them to the service's login page

User logs in & approves

They grant specific permissions to your app

Service sends a code back

A temporary authorization code returns to your app

Your app swaps code for token

Using your client_id + secret to get an access token

When do you need OAuth? When your tool accesses another service on behalf of multiple users. For personal tools with just API keys, you often don't need it – a simple API key works fine.

Can Non-Technical People Use Claude Code?

YES

...with the right setup and mindset.

✓ Node.js installed One-time setup, 5 minutes

✓ A terminal / command line Built into every Mac and PC

✓ An Anthropic API key Sign up at console.anthropic.com

✓ Willingness to describe problems clearly The real skill

💡 Do you need an IDE? Helpful but not required. VS Code or Cursor let you see files as Claude writes them. But Claude Code works purely from the terminal – the IDE is your "window" into what's happening.

"Running a Local Server" – What Does That Mean?

Think of it like this:

A local server is like a mini preview of your website, running only on your computer. Instead of visiting yoursite.com, you visit localhost:3000. Nobody else can see it – it's just for testing.

How Hard Is It?

Simple HTML – just double-click

Zero setup

With live reload – npx serve .

One command

React / Next.js – npm run dev

Few commands

Full-stack – docker compose up

More involved

Hosting Platforms

Getting your tool live

Vercel

Best for React / Next.js apps. Git push = live.

Free (generous)

Netlify

Great DX, built-in forms and auth. Static sites.

Free (generous)

Cloudflare Pages

Best free tier. Global speed. Workers for backend logic.

Free (very generous)

GitHub Pages

Simplest option for static HTML content. Commit to repo.

Free (always)

Railway / Render

Full-stack apps with databases. When you need a backend.

Free (limited)

Start with Cloudflare Pages or Vercel – both have excellent free tiers and deploy in seconds.

Your Setup Checklist

Everything you need to go from idea to live tool.

Essentials

Claude Pro or API key (console.anthropic.com)
VS Code or Cursor (free)
Node.js installed (nodejs.org)

Claude Code

npm install -g @anthropic-ai/claude-code
Set ANTHROPIC_API_KEY in terminal
Navigate to project folder, type: claude

Level Up

Git + GitHub account for version control
Hosting account (Vercel / Cloudflare)
MCP servers for your key tools

Key Takeaways

You don't need to code

Claude writes the code. You describe the problem. Focus on what, not how.

Start simple, ship fast

Begin with HTML. Deploy to Cloudflare Pages. Iterate. Complexity comes later.

Security is non-negotiable

Environment variables, .gitignore, never hardcode secrets. This takes 5 minutes to get right.

MCPs are the multiplier

Connect Claude to your real tools and data. This is where the ROI explodes.

The ROI is massive

A $20/month AI subscription replacing $70K+ in software or engineering time.

Now Go Build Something.

The best way to learn this is to pick a problem you have today and solve it by Friday.

Paulo · Senior Revenue Operations Manager · FrankieOne