In this guide, I’ll walk you through how I used the Gemini CLI Google’s command-line tool for interacting with their Gemini AI models to build a startup archive web app. Whether you’re curious about AI-assisted development or want to speed up your prototyping process, this hands-on guide is for you.
1. What is Gemini CLI?
Gemini CLI is a command-line interface for accessing Google’s Gemini models like Gemini 2.5 Flash and Pro. With it, you can:
- Generate frontend and backend code
- Build UI components from scratch
- Create structured data (like JSON or Markdown)
- Generate and edit images
- Use it like an AI pair programmer
2. Installation
To install Gemini CLI globally:
npm install -g @google/gemini-cli
Here’s a clearer and more polished version of that section:
Verifying Installation & Authentication
After installing the Gemini CLI, you’ll want to verify it’s working:
gemini version
Next, authenticate your Google account:
gemini auth
Gemini CLI supports three authentication methods:
- Google Account (OAuth) — easiest for most users (used in this tutorial)
- Gemini API Key
- Vertex AI API Key
For this guide, I used Google OAuth. When you run
gemini auth
, it opens a browser window to complete the sign-in. If it fails in an integrated terminal, try using an external terminal.
Once authenticated, navigate to the folder where your project will live:
cd path/to/your/project-folder
You’re now ready to start prompting Gemini!
3. How I Started: Planning & Prompting for Data
Before writing any code, I began by prompting Gemini to help generate:
- A JSON dataset of fictional African startups
- Descriptions, categories, and founders
- Suggestions for logos and branding directions
🔹 Prompt Example:
“Generate a dataset of 20 African startups across Fintech, HealthTech, and EdTech. Include name, founder, category, description, and year founded. Return as a JSON array.”
It returned structured, usable content for startups.json
.
4. Scaffolding the App with Gemini
To get started with the frontend setup, I asked Gemini to scaffold the base structure using this prompt:
🔹 Prompt:
“Scaffold a Next.js app using TypeScript and Tailwind CSS. Set up folders for components, pages, styles, and a
data
folder for the startups JSON.”
Gemini CLI did run the setup using npx create-next-app
, but it was noticeably slower than doing it manually via the terminal. It also prompted me with a series of questions (e.g., for TurboPack, aliasing, and directory structure), which I had to answer interactively.
What actually happened:
- Gemini triggered the
npx create-next-app
process under the hood. - I had to wait for a bit; the process was slower than expected.
-
It asked typical setup questions like:
- Use
src/
directory? (I chose No) - Enable experimental TurboPack? (I chose No)
- Use custom import aliases? (I chose No)
- Use
My recommendation:
While it’s impressive that Gemini CLI can initiate project scaffolding, for a faster and more stable experience, I recommend running the setup manually in your terminal:
npx create-next-app@latest african-startups --ts --tailwind --eslint --app
This gives you more control, especially if you already know your preferred configurations.
Once the setup is complete, Gemini can take over by generating the folder structure, components, and styling based on your prompts.
5. Generating the Homepage and Cards
Once the structure was ready, I used Gemini to generate components:
🔹 Prompt:
Create a stunning, modern homepage using Next.js with the following requirements:
1. **Data Source**: Read startup data from `startups.json` located in the root folder of the project
2. **Card Design**: Display each startup as a visually appealing, responsive card featuring:
- Company name (prominent typography)
- Logo image (properly configured and optimized)
- Category badge/tag
- Description text
3. **Image Configuration**:
- Configure Next.js Image component with proper domains in next.config.js
- Support external logo URLs (from CDNs like unsplash.com, logo.dev, or placeholder services)
- Add fallback images for missing logos
- Implement proper image optimization and lazy loading
- Set appropriate image sizes and aspect ratios for logos
4. **Design Standards**:
- Modern, clean aesthetic with beautiful typography
- Responsive grid layout that works on all devices
- Contemporary color scheme and spacing
- Smooth hover effects and micro-interactions
- Professional card shadows and borders
5. **Technical Requirements**:
- Use Next.js App Router (App directory structure)
- Implement proper responsive design (mobile-first)
- Include TypeScript for type safety
- Use Tailwind CSS for styling
- Add loading states and error handling
- Configure next.config.js for image domains
6. **File Structure Requirements**:
- Place startups.json in the project root folder
- Create proper component structure
- Include all necessary configuration files
7. **User Experience**:
- Fast loading with proper performance optimization
- Accessible design following WCAG guidelines
- Intuitive navigation and visual hierarchy
- Search/filter functionality (bonus)
Please generate complete, production-ready code including:
- Complete file structure
- next.config.js with proper image domain configuration
- A sample startups.json file in the root folder with realistic startup data including logo URLs
- All component files with proper TypeScript interfaces
- Responsive styling with Tailwind CSS
Gemini generated a grid-based layout using Tailwind CSS and React props. I tweaked the styling afterward.
6. Enhancing UI with Features
To polish the interface, I refined my prompt:
🔹 Prompt:
“Add a hero section with a call-to-action, a category filter dropdown, and a responsive search bar. Make the UI look clean and modern like Vercel or Product Hunt.”
Issue Faced: Initial design was too generic. Once I mentioned “Product Hunt,” the design suggestions improved.
Here’s the final result. I was hoping for a more polished design, but I suppose this reflects the current limit of its capabilities.
7. Limitations I Noticed
Here are a few rough edges I noticed while working with Gemini CLI:
Limitation | Note |
---|---|
Not interactive | Unlike create-next-app , it doesn’t let you choose options in CLI |
UI quality | Basic unless you provide design inspiration |
Speed | Gemini Flash is fast, but large prompts take time |
Memory | Gemini doesn’t “remember” previous outputs like ChatGPT thread history, so include context in every prompt |
8. Prompting Best Practices
To get the most out of Gemini:
- Be very specific: Mention frameworks, structure, and design inspiration
- Include file/folder names in prompts
- Ask for component-based generation (
Header.tsx
,Card.tsx
) - Always review and refactor the output manually
9. Final Thoughts
Gemini CLI is a great companion for rapidly building MVPs and frontend heavy applications. It won’t replace a dev’s expertise, but it can give you a solid 60–70% head start especially when you’re experimenting or under tight deadlines.
Top comments (0)