Build 5x Better Apps with Gemini CLI + NotebookLM MCP

What You'll Build 

In this video, we build the same developer portfolio website twice using Gemini CLI:

1. Without research - a generic prompt produces a basic, flat portfolio
2. With NotebookLM MCP - Gemini queries 100 curated research sources before coding, producing a dramatically better result 

The difference? 3D interactive hero, design token system, STAR case studies, scroll animations, full accessibility, JSON-LD SEO - all driven by research, not prompt engineering.

Prerequisites

• A Google account (Gemini CLI is free - 60 requests/min, 1000/day)
• Node.js 18+ installed
• Python 3.10+ with uv or pip (for NotebookLM MCP)

Step 1: Install Gemini CLI

npm install -g @google/gemini-cli@latest

Verify it works:

gemini

 You should see the Gemini CLI prompt. Type /exit to quit for now.

Step 2: Build the Portfolio WITHOUT Research

mkdir my-portfolio && cd my-portfolio
gemini

Paste this prompt:

Create a developer portfolio website using HTML, CSS, and JavaScript.

Details:
- Name: [YOUR_NAME]
- Title: [YOUR_TITLE]
- Tagline: [YOUR_TAGLINE]
- Bio: [YOUR_BIO]
- Skills: [SKILL_1], [SKILL_2], [SKILL_3], [SKILL_4], [SKILL_5], [SKILL_6]
- Projects:
  1. [PROJECT_1_NAME] — [PROJECT_1_DESC] ([TECH_STACK])
  2. [PROJECT_2_NAME] — [PROJECT_2_DESC] ([TECH_STACK])
  3. [PROJECT_3_NAME] — [PROJECT_3_DESC] ([TECH_STACK])
- Contact: [GITHUB_URL], [LINKEDIN_URL], [EMAIL]

Requirements:
- Single-page design with dark theme
- Hero section, About, Skills, Projects, and Contact sections
- Each project should have name, description, and tech stack tags
- Smooth scroll navigation
- Mobile responsive

Replace the [PLACEHOLDERS] with your own details. Open the generated index.html in your browser. You'll get a functional but generic portfolio.

Step 3: Install NotebookLM MCP Server

uv tool install notebooklm-mcp-cli

Or if you prefer pip:

pip install notebooklm-mcp-cli

Step 4: Authenticate & Connect to Gemini CLI

nlm login
nlm setup add gemini

This automatically configures Gemini CLI to use the NotebookLM MCP server. You can verify with:

nlm doctor

Step 5: Prepare Your NotebookLM Research

This is the key step. You need a NotebookLM notebook loaded with research sources BEFORE running Gemini CLI.

Option A: Use My Public Notebook (Quick Start)

Browse my pre-loaded notebook with 100 curated sources:

https://notebooklm.google.com/notebook/ceb724d0-3168-4aca-bcf9-d01af41201f0

You can see all the sources I used and add the same ones to your own notebook.

Option B: Build Your Own Notebook (Recommended)

1. Go to notebooklm.google.com
2. Create a new notebook
3. Use the Research feature or manually add sources by searching for these topics:

Import 30-100 sources for best results. The more relevant research, the better the output.

Step 6: Build the Portfolio WITH NotebookLM Research

Create a new folder and run Gemini CLI:

mkdir my-portfolio-v2 && cd my-portfolio-v2
gemini

Paste this prompt (replace placeholders AND your notebook name):

I want to build a developer portfolio website using HTML, CSS, and JavaScript.

I have a NotebookLM notebook called "[YOUR_NOTEBOOK_NAME]" that contains
curated sources on portfolio best practices, 3D web design, dark mode
design tokens, scroll animations, SEO, accessibility, and performance.

Before writing any code, query this notebook to gather research on
everything relevant to building an outstanding developer portfolio —
including but not limited to:
- 2026 visual design trends (typography, color, layout, hero patterns)
- 3D and interactive elements (Three.js performance, loading, mobile fallbacks)
- Dark mode design token architecture (semantic colors, contrast, surfaces)
- Scroll-driven animations (performance, accessibility, reduced-motion)
- SEO and discoverability (JSON-LD, Open Graph, llms.txt, meta tags)
- Case study structure (STAR method, storytelling, recruiter perspectives)
- Accessibility standards (WCAG 2.2, skip links, ARIA, keyboard nav, focus)
- Performance optimization (bundle size, font preloading, Lighthouse scoring)

Make multiple queries if needed to cover all areas. Then build the
portfolio applying ALL the research findings. The site should look
dramatically different from a generic portfolio — every design decision
should be backed by what you learned from the notebook.

Details:
- Name: [YOUR_NAME]
- Title: [YOUR_TITLE]
- Tagline: [YOUR_TAGLINE]
- Bio: [YOUR_BIO]
- Skills: [SKILL_1], [SKILL_2], [SKILL_3], [SKILL_4], [SKILL_5], [SKILL_6]
- Projects:
  1. [PROJECT_1_NAME] — [PROJECT_1_DESC] ([TECH_STACK])
  2. [PROJECT_2_NAME] — [PROJECT_2_DESC] ([TECH_STACK])
  3. [PROJECT_3_NAME] — [PROJECT_3_DESC] ([TECH_STACK])
- Contact: [GITHUB_URL], [LINKEDIN_URL], [EMAIL]

The portfolio must include:
- A 3D or interactive hero section (Three.js or CSS 3D with proper
  performance/mobile fallback)
- Scroll-triggered animations with reduced-motion respect
- A full semantic dark mode design token system (not just one background color)
- JSON-LD structured data + Open Graph + llms.txt
- Skip-to-content, aria-labels, keyboard navigation, focus-visible states
- STAR-method case studies for each project
- Font preloading, optimized loading, minimal bundle

Watch Gemini query your NotebookLM notebook multiple times, gather research, and then build a dramatically better portfolio.

Step 7: Compare the Results

Open both portfolios side by side and check:

Bonus Comparisons

• Run Lighthouse on both — check Accessibility and SEO scores
• Press Tab on both — the research version has full keyboard navigation
• View Source — compare the <head> sections (meta tags, JSON-LD, preconnect)
• Open tokens.css — see the 3-tier design token architecture the AI created

Why This Works

The key insight: research beats prompt engineering.

A detailed prompt can only encode what YOU already know. But when you give AI access to 100 curated research articles via NotebookLM, it discovers patterns and best practices you might not have thought to include:

• Recruiters scan portfolios in 11 seconds (research-backed layout hierarchy)
• #121212 instead of #000000 for dark backgrounds (reduces eye strain)
• STAR method for case studies (what hiring managers actually look for)
• llms.txt file for AI search engine discoverability (2026 GEO trend)
• 44px minimum touch targets (WCAG 2.2 requirement)
• CSS animation-timeline: view() with IntersectionObserver fallback

None of this was in the prompt. The AI learned it from the notebook.

Resources

• Gemini CLI: Free, 60 req/min, 1000/day — geminicli.com
• NotebookLM MCP Server: github.com/jacob-bd/notebooklm-mcp-cli
• My Research Notebook (100 sources): Open in NotebookLM
• NotebookLM + Gemini CLI Tutorial: Medium
• Gemini CLI Tips & Tricks: Addy Osmani