#152: You're one file away from your First AI App
And how zero config, one API key, and a single function call is all it takes
Meet the expert: Fabio Biondi
Fabio Biondi is a freelance developer and instructor who has dedicated his professional life to technical education, mentoring thousands of developers.
Recognized as a Google Developer Expert (GDE) in Angular since 2018, he has devoted himself to mastering frontend technologies before expanding his focus to generative AI.
Through his platform Learn by Do.ing, and presence on social media, Fabio regularly shares technical videos and insights. His mission continues to be empowering the dev community by evolving from core web technologies to the latest innovations in artificial intelligence.
If you’ve been telling yourself that “getting into AI” means wrestling with heavy toolchains, build steps, and a wall of configuration, here’s some good news: it has never been simpler to start. In fact, thanks to recent changes in Node.js, you can go from an empty folder to a working AI request in a few seconds.
For years, this is genuinely how it felt. You wanted to try a new model, and before you’d written a single line of actual logic, you were neck deep in a tsconfig.json, a webpack config, a babel setup, and three different flavors of module resolution. By the time everything compiled without errors, the excitement was gone. That friction wasn’t imagined. It was the real reason so many curious developers never got past “I should try this AI stuff sometime.”
What changed is not the AI itself, but the plumbing around it. Node.js closed the gap between “I have an idea” and “I have working code,” and that helped more than any single model release.
When the setup cost drops to zero, the only thing left standing between you and your first request is deciding to write it. And unlike a lot of shiny developer trends, this one costs nothing to try: no license, no signup wall beyond a free API key, no dependency tree to untangle before you even see output.
Node & TypeScript with zero config
Modern Node.js (v24+) can run TypeScript files natively. No tsc, no ts-node, no bundler. Node simply strips the types and runs the file. That means a “project” can be as small as a package.json with two lines that matter:
{
“type”: “module”,
“scripts”: { “start”: “node index.ts” }
}”type”: “module” enables modern import/export syntax, and node index.ts runs your TypeScript directly. That’s the whole setup.
It’s worth pausing on what “strips the types” actually means, because it’s the whole trick. TypeScript was never a language the JavaScript engine understood on its own; it was always a superset that got compiled away before execution. Tools like tsc, ts-node, esbuild and Babel existed purely to do that translation, and each one came with its own configuration surface, its own quirks, and its own way of breaking on a Tuesday afternoon for no obvious reason.
Node’s native support skips that translation step entirely for straightforward TypeScript syntax. Type annotations are simply erased at parse time, the same way comments are ignored, and the underlying JavaScript runs untouched. There’s no source map to manage, no separate build artifact to keep in sync, no watcher process chewing through your CPU in the background. You edit the file, you run the file, and Node does the rest.
This matters more for a newsletter about AI than it might first appear. It means the code samples you see below, and the ones you’ll eventually write yourself, are not simplified for teaching purposes. They are the actual production shape code, with nothing hidden behind a build step you can’t see. What you read is what runs.
Now, add AI
This is the part people overestimate. Talking to a real Large Language Model is just a function call. You can pick any library or AI framework, install its package, and start experimenting in a handful of lines.
Strip away the marketing language around “AI integration” and what’s left is refreshingly mundane: you send some text to an endpoint, and the endpoint sends text back. That’s genuinely the whole mental model you need to hold onto. The model itself, whether it’s Gemini, Claude, GPT or anything else, is just a very sophisticated function sitting behind an HTTP request. You give it a prompt, it gives you a completion, and everything else you’ve heard about “agents,” “chains” or “pipelines” is scaffolding built on top of that one basic exchange.
Every provider wraps this exchange in an SDK so you don’t have to construct raw HTTP requests by hand, but the SDK is a convenience, not a requirement. Once you’ve made one of these calls successfully, you’ve effectively made all of them. The parameters change (which model, what temperature, whether you stream the reply token by token), but the shape of the call stays remarkably constant. That’s why the setup below only takes three steps.
For example, to get started with Gemini:
Install the package:
npm install @google/genai:Grab a free API key from Google AI Studio
Write your
index.tsfile:
import { GoogleGenAI } from “@google/genai”;
const ai = new GoogleGenAI({ apiKey: YOUR_GEMINI_KEY });
const res = await ai.models.generateContent({
model: “gemini-3.5-flash”,
contents: “Explain what an LLM is, in one sentence”,
});
console.log(res.text);Now you can simply run the script in your terminal using npm start and wait for the result.
Let’s unpack that handful of lines, because each one is doing a specific, deliberate job. The apiKey you grab from Google AI Studio is what authenticates your request. It’s the equivalent of a password that tells Gemini’s servers “yes, this request is allowed to happen, and here’s who to bill for it.” Never commit that key to a public repository. For anything beyond a quick local experiment, pull it from an environment variable instead of pasting it directly into your source file.
The model field is where you choose which version of Gemini answers your prompt. Providers typically offer a range of models trading off speed, cost, and capability, and swapping between them is usually as simple as changing this one string; no other code needs to move.
The contents field is your prompt, the actual instruction or question you want answered. In this example it’s a single string, but the same field can just as easily hold a full back-and-forth conversation history, an image, or a mix of text and files, which is how multimodal requests work under the hood.
Finally, res.text is the model’s reply, already extracted and ready to use. Behind that convenient property sits a larger response object carrying metadata like token usage and finish reason, but for a first script, that one line is all you need to see something come alive on your screen.
That’s it. No build step, no framework, no boilerplate, just a few lines and your first AI-generated response prints to the terminal. From here, everything else (streaming, chats, images and videos generation, tool calling or MCP integration) is a variation on this same call.
Streaming, for instance, is the same generateContent call with a different method name, and instead of waiting for the full answer, you get the response piece by piece as the model generates it, which is what powers that familiar “typing” effect you see in chat interfaces. Multi-turn chats are just an array of previous messages passed back in with each new request, so the model has context on what was already said. Tool calling and MCP let the model request that your code run a function on its behalf, checking a database, calling an API, doing a calculation, and feeding the result back in before it finishes its answer. None of these are architecturally different from the nine lines you just ran. They’re the same idea, repeated and combined.
The best part is that none of this is Gemini-specific. Swap the package name and the constructor for almost any other provider, and the shape of the code barely changes: an API key, a model name, a prompt, a reply. Once this pattern is in your hands, moving between providers becomes a five-minute exercise instead of a research project.
Where to go next
The point of this issue isn’t to build something big. It’s to remove the excuse!
The barrier to entry for AI development is now essentially zero. Once that first response comes back, experimenting becomes addictive.
If you take nothing else from this issue, take this: stop treating the first script as a chore to get through before the “real” project starts. The first script is the project. Once you’ve seen a model respond to something you typed yourself, in a file you wrote yourself, with no framework standing between you and the result, you’ll understand why so many developers describe this moment as the one that got them hooked on building with AI in the first place.
So open a folder, drop in a two-line package.json, write your index.ts, and run it. Nothing about this newsletter issue requires a weekend, a course, or a new laptop. It requires about five minutes and a Google AI Studio key. Everything after that first console.log is just you following your own curiosity, one small script at a time.
For the full API surface, models, parameters, streaming, multimodal inputs and more, the official Google Gemini API documentation is the place to explore.
And when you’re ready to go beyond a single script and build real, production-grade AI features into a modern front end, my book walks you through it end to end: Building AI-Powered Apps with Angular.
Fabio Biondi | Google Expert
Follow me on LinkedIn
🔥 48% Off the Full-Stack Bible You Actually Need: Full-Stack React, TypeScript, and Node (2nd Edition) covers React 19, TypeScript, and a Node/Express backend, plus new chapters on Docker and AWS deployment. If you've been meaning to go from "comfortable with React" to "can ship the whole stack," now's the time — 48% off on Amazon.
This Week in the News
🔓 The npm Worm That Plants a Dead Man’s Switch on Your Machine: A worm hit keyv, cacheable, and flat-cache via a compromised maintainer account, and it plants autostart hooks in .claude/.vscode and even a dead-man’s-switch that fires on token revocation. If you’re on eslint, you’re likely affected through the dependency chain. Pin to pre-compromise versions now.
🖥️ Cloudflare Says Your Agent Deserves Better Than a Container: Cloudflare’s answer to “every agent needs its own container”: a shared filesystem where agents pick between a cheap isolate or a full Linux container per task, instead of paying container tax for everything. Worth a look if you’re building agent infra.
🪟 Microsoft Just Killed the Native Addon for Windows APIs in Node: Call native Windows APIs (notifications, on-device AI, clipboard) straight from JS in Electron, no C++ bridge required. Codegen turns Windows metadata into JS wrappers directly. Handy if you’ve been dreading a native module.
🎣 A Security Expert Almost Fell for His Own Company’s Product: Eric Lawrence nearly reports a legit new Cloudflare product as phishing, because it followed every anti-pattern phishers use. The takeaway: if an expert can’t tell your flow from an attack, the flow’s the problem.
Beyond the Headlines
🌐 How a 15-Year-Old CDN Survived Its Own Success: cdnjs moved off a six-year-old GCP pipeline onto Cloudflare’s own Workers/Workflows/R2 stack, forcing Cloudflare to raise its own platform limits along the way. Good read if you’re evaluating Workflows for long-running jobs.
💰 The GPU Math Most Teams Get Wrong: Crossover point is ~2M tokens/day; below that, hosted APIs win because the MLOps hire costs more than the GPUs. Send to anyone convinced buying hardware saves money.
🐚 The JavaScript Comment Syntax Nobody Uses (But Is Actually in the Spec): Short video on hashbang comments (#!) — yes, they’re really in ECMAScript.
🍔 DoorDash Built a CLI That Skips the “Are You Sure?” Prompt: dd-cli skips the human-confirmation step DoorDash’s other AI surfaces keep. The “read ≠ write ≠ spend” framing is worth stealing regardless of what you think of the stunt.
📐 We Solved Centering a Div, Then Browser Sidebars Ruined Everything: place-items: center centers your div in the webview, not the window, and fixing that needs pointer events since Chromium won’t tell you the split. A fun precision-layout rabbit hole.
🎨 The CSS Feature Everyone Wants and Nobody Can Ship: Anchor Positioning is both the most-wanted feature and the most avoided due to browser support. Also: CSS remains the one part of web dev resisting AI-generated code (28% average).
Developer Toolbox
🖼️ React Image Editor - A Full Photoshop-Lite for React, Minus the Bloat: Crop, resize, filters, draw, shapes, stickers, plus an optional AI Assistant. Works in RSC out of the box, tool rail is fully configurable.
🔐Varlock - .env Files That Won’t Leak to Your AI Agent: Drop-in dotenv replacement built for the agent era: agents read your .env.schema for context but never see real secret values, and its credential proxy swaps in real values only at the network boundary.
That’s all for this week. Have any ideas you want to see in the next article? Hit Reply!
Cheers!
Editor-in-chief,
Kinnari Chohan
👋 Advertise with us
Interested in sponsoring this newsletter and reaching a highly engaged audience of tech professionals? Simply reply to this email, and our team will get in touch with the next steps.