AI Developer Toolkit Setup
Independent instructor for TECHNEST 2026. GitHub: github.com/ChanMeng666 · LinkedIn: linkedin.com/in/chanmeng666. The full course site lives at programming.chanmeng.org. The course's RAG-powered AI assistant (built on the same retrieval pattern we'll meet in Week 4) indexes every weekly handout — feel free to ask it questions when you're stuck between lectures.
Learning Objectives
By the end of this session, students should be able to:
- Install and sign into the three AI coding environments we will use all term — Cursor (primary IDE), Claude Code (terminal-native AI), and Gemini CLI (free-tier scripting AI) — and know when to reach for each one.
- Install a Skill and an MCP server into Claude Code / Cursor and describe, in one sentence, what each extension lets the AI do on the student's behalf.
- Recognise and apply the Delegation Rules — know which operations to hand off to AI through a CLI or MCP server, and which (OAuth, DNS, provider-side credentials) the student must do with their own hands.
Core Topics
- Why "natural language is the source code" — course doctrine and how it changes the way students think about programming.
- The three AI environments: Cursor, Claude Code, Gemini CLI — when to use each.
- What MCP servers and Skills are, and how they turn an AI chat into a tool-using agent.
- Voice-first prompting with Wispr Flow (optional but strongly recommended).
- Cursor's Plan Mode — review the AI's plan before any file is touched. From Week 2 onwards, this is the default for any non-trivial prompt.
- GitHub as the source-of-truth layer that every later week's deploy flow depends on.
Tools / Stack
| Tool | Purpose this term |
|---|---|
| Cursor | Primary IDE; built-in AI chat; all weekly work lives here |
| Claude Code | Terminal-native AI with MCP + Skills; preferred for W8 PDF flow |
| Gemini CLI | Free-tier AI for throwaway scripts and quick explorations |
| Wispr Flow | Voice-to-text; dictate long prompts without typing |
| GitHub | Source of truth; auto-triggers every Vercel deploy |
GitHub CLI (gh) | AI invokes it to create repos, edit Description / Topics, manage releases |
| Vercel CLI | AI invokes it to deploy, read logs, manage env vars |
| Neon CLI + Neon MCP | AI invokes them to provision databases and auth (from W4) |
| Typst skill | AI invokes it to generate pixel-perfect PDFs (used in W8) |
Session Plan
| Time | Activity |
|---|---|
| 0 – 15 min | Recap & Check-in. First class — no recap. 10-min icebreaker: everyone says what they think "programming" means before and after watching a Cursor demo. |
| 15 – 40 min | Concept Teaching. The Delegation Rules. Why we let AI drive CLIs. What MCP servers are. How voice + AI changes keyboard-heavy work. Live comparison: Cursor vs Claude Code vs Gemini CLI on the same task. |
| 40 – 75 min | Live Demo. Instructor opens Cursor from scratch, installs the Vercel MCP, and tells Cursor to "build and deploy a simple personal site to my Vercel". Class watches the AI pick a starter, push to GitHub, deploy, and return a live URL. |
| 75 – 105 min | Hands-On Lab. Each student repeats the demo on their own laptop and ends with a live *.vercel.app URL they can share. |
| 105 – 120 min | Q&A + Wrap. Troubleshooting as a group. Everyone leaves with working tools. |
Hands-On Lab
Task. Get from "no dev tools installed" to "Cursor just deployed a simple personal site to Vercel under my account, and I watched it happen". This is the only lecture with heavier-than-usual manual setup — from Week 2 onwards, almost every step is a single spoken prompt.
If you fall behind during steps 1–4 (installations), don't stress. The goal is to finish Phase 4 (your first AI-driven Vercel deploy) before we wrap. Installers can finish while we continue — AI can start working even while Claude Code is still downloading in the background.
Phase 1 — Install the three AI environments
Install Cursor from cursor.com. Open it, sign in with GitHub, and accept the terms. When Cursor asks "Would you like to import VS Code settings?" choose Skip — we want a clean slate.
Why manual: Cursor's installer + GitHub OAuth require clicks and consent screens that no CLI can perform for you.
Install Claude Code by following the official quickstart. On Windows, run the installer and accept defaults. When it prompts for login, sign in with your Anthropic account.
Why manual: Anthropic's login flow opens a browser for consent — human required.
Install Gemini CLI by following Google's readme. Run npm install -g @google/gemini-cli in any terminal (Cursor's built-in terminal works), then gemini login and sign in with your Google account.
Why manual: Installing Node + signing into Google both require consent screens.
Please install the GitHub CLI (
gh) on my system using whatever package manager is appropriate for my OS (Homebrew on macOS, winget or the official installer on Windows, apt on Debian/Ubuntu). Once it's installed, rungh auth loginfor me — when the OAuth browser tab opens, pause and tell me to confirm the device code in the browser. After auth, rungh auth statusand confirm it printed my username.
Wispr Flow (wisprflow.ai) lets you dictate prompts instead of typing. Almost every prompt from Phase 2 onwards is a spoken sentence — Wispr Flow makes the rest of this term significantly faster.
Phase 2 — Prove the AI can act
Switch to Plan Mode first. Then: I just installed you. Can you introduce yourself, tell me what tools you have access to (for example, can you run shell commands in a terminal, edit files on disk, and open URLs?), and create a brand-new empty folder called
technest-week-1in my home directory? After creating it, open that folder as the Cursor workspace.
Plan Mode lets Cursor write a plan you can review before any file is created or any command is run. You approve the plan, then it executes. From this term onwards, Plan Mode is the default for anything more complex than a one-line edit — it catches misunderstandings before they hit your filesystem.
No spaces, no Chinese characters, lowercase preferred. Some CLIs and deploy platforms still misbehave with spaces in paths, and a folder you create today will follow you into Vercel build logs for the rest of the term. technest-week-1 — TechNest Week 1.
- Cursor reports its capabilities in its own words — take a moment to read them.
- A folder
technest-week-1exists in your home directory. - The Cursor window is now inside that folder (the file-tree pane shows it).
Phase 3 — Install an MCP server so the AI can drive Vercel
Please install the Vercel MCP server so you can call Vercel's API on my behalf. Add it to my Cursor configuration. Once installed, tell me which tools it gives you — I want to see the list. If the MCP server needs me to paste a Vercel token, pause and tell me exactly where to get the token before continuing.
When Cursor pauses and asks for a Vercel token, open vercel.com/account/tokens in your browser, sign in, click Create Token, name it cursor-mcp, copy the token, and paste it back into Cursor's chat.
Why manual: Vercel never exposes account-creation tokens through any API — only the web dashboard.
- Cursor prints the list of Vercel tools it now has (create deployment, read logs, manage env vars, etc.).
- No error messages.
Phase 4 — The "wow" moment
Now prove to me that the delegation model works. Recommend a starter that fits a simple personal landing page — could be Next.js, Vite + React, or even plain HTML/CSS/JS — and tell me in one short paragraph why you picked it. Then create that project inside this folder (call it
hello-technest), initialise a git repo, push it to a new public GitHub repo under my account (use theghCLI we installed in Phase 1), and deploy it to Vercel using the Vercel MCP. When the deployment is live, open the production URL in my browser. Commit along the way with sensible messages. I'll just watch.
Many students will end up on Next.js because Vercel's templates assume it — that's fine, and it matches the Magic Portfolio template we'll fork in Week 2. If your AI suggests a lighter starter (Vite, or even pure HTML/CSS/JS for a single landing page), that's also fine. The lesson today is the deploy pipeline, not the framework.
- Your browser opens a live
hello-technest-*.vercel.appURL showing your starter. - A new repo appears on your GitHub account.
- Your local folder has a commit history Cursor wrote for you.
The deployment failed with a build error. Can you read the Vercel build logs through the MCP, find the root cause, fix it, and redeploy? I want the production URL to load without errors before we move on.
Phase 4.5 — Make the repo look like a real project
Optimise this project's
README.md. Include: a clear one-line project description, a screenshot or live URL of the deployed site, a tech-stack table (what you picked + why), a short "how to run locally" section, and one Mermaid diagram visualising the deploy pipeline (Local edits → git push → GitHub → Vercel webhook → live URL). Commit and push.
Now make the repo discoverable. Use the
ghCLI to set the GitHub repo's Description to a one-sentence summary of what this site is, and add five sensible Topics (e.g.,personal-website,nextjs,vercel,ai-coded,technest-2026— adjust to match what you actually built). When done, rungh repo view --webso I can confirm the chips and description rendered.
- Open the repo on GitHub. The README shows a Mermaid diagram that renders inline (GitHub renders Mermaid natively).
- The repo's About sidebar shows your one-line description and five topic chips.
- A
gh repo view --webcommand opened the repo page in your browser.
Phase 5 — A second AI for variety
Open a terminal,
cdintohello-technest, and confirm you can see the project. Then list every Claude Code skill currently active for me — say "I currently have access to the following skills: …" — so I can see what's bundled with my install today. We'll add the Typst skill in Week 8 (it lives in a separate GitHub repo and is installed manually — Claude Code does not auto-discover skills).
- Claude Code prints the list of skills it currently has access to (built-ins like the project's slash commands, and any plugin skills you may have already installed).
- The Typst skill is not expected to appear yet — that's intentional, we wire it up in Week 8.
Phase 6 — Internalise the Delegation Rules
Let the AI drive provisioning, env-var plumbing, git, installs, edits, migrations, deploys, and PDF generation — all through CLIs, APIs, MCP servers, and Skills. Do it yourself only for OAuth consent screens, provider-side API-key creation, DNS, and the rare .env.local line where no CLI exists to set it. If you're ever unsure, ask the AI which category a task falls into — this is a perfectly good prompt: "Is this something you can do via a CLI, or do I need to do it myself?"
Weekly Assignment
Build / Implement.
- One live
*.vercel.appURL deployed entirely through AI-invoked CLIs. - A polished
README.mdon the repo with a Mermaid deploy-pipeline diagram, plus the GitHub Description and at least five Topics filled in (see Phase 4.5). - A screenshot of your Cursor conversation showing the prompt that kicked off the deploy.
- A second screenshot showing the Vercel MCP tool-call output.
Requirements.
- The repo must exist on your GitHub account.
- The deploy must have been triggered by AI, not by you running
vercel deployby hand. (This is the whole point of the term.) - You must have both Cursor and Claude Code installed and signed in. (The Typst skill comes in Week 8 — not required this week.)
Submission. Post the artifacts (live URL + repo URL + two screenshots) in the course Slack channel before the start of Week 2.
Resources
| Docs | Videos | Repos |
|---|---|---|
| Cursor docs — getting started | The instructor's recorded "first AI deploy" demo | her-waka/tutorial/vibe-coding — deeper dive for curious students |
| Claude Code — quickstart | Fireship — "Cursor in 100 seconds" | ChanMeng666/typst-claude-skill — the Typst skill we install in Week 8 |
| Claude Code — Skills reference | ||
| Vercel MCP server — readme | ||
| GitHub CLI — manual | ||
| Wispr Flow — setup |
Real-World Application
Every modern AI-engineering job interview expects you to demo a workflow, not recite syntax. Hiring managers in 2026 want to see a candidate open Cursor, describe a feature, and ship it live in 10 minutes — because that's how senior engineers on their teams already work. Today's lab is exactly that interview artefact: a clip of you dictating a sentence and getting a live URL. Save the screen recording.
LinkedIn bio upgrade for next week: "Full-stack AI developer · I prompt, I ship · vercel.app/my-project".
Challenges & Tips
- "Cursor is asking me to confirm each shell command." Good — in a classroom setting keep manual approvals on. By Week 3 you can enable auto-approve for low-risk commands if you want faster iteration.
- "The MCP server says 'authentication required'." Your Vercel token is missing or expired. Re-paste a fresh token from
vercel.com/account/tokens. - "
gh auth loginkeeps failing on the device-code step." Make sure you're pasting the code into the same browser you're already signed into GitHub with. If it still fails, trygh auth login --webfor the OAuth-flow alternative. - "Gemini CLI says I've hit a rate limit." Use Cursor or Claude Code for the rest of the class. Gemini's free tier resets hourly.
- "I can't tell whether I should do the step myself or ask the AI." Ask: "Can you do this through your tools, or do I need to do it?" The AI will answer honestly.
- "My prompts aren't specific enough — the AI keeps asking follow-ups." Watch the instructor's prompts in this lecture carefully. Good prompts name the tool the AI should use, the inputs it has, and the signal that the task is done.
Paste your last prompt and the AI's last response into a fresh Claude Code window and say: "This didn't work. What's the most likely next step to try, and why?" Treating a stuck AI session like a debuggable object — that you can restart, inspect, and redirect — is the most important skill of this course.