How to Use Lovable AI With Demo Project

What is Lovable AI?

Lovable is an AI-powered platform that generates full-stack web applications from text descriptions. Founded by GPT Engineer creator Anton Osika, the platform launched in 2024 and quickly became one of Europe’s fastest-growing startups.

The tool converts natural language prompts into working code, handling both frontend interfaces and backend logic. Unlike other development tools that require coding knowledge, Lovable allows anyone to build web applications by describing what they want in plain language.

The platform uses React for frontend development, and supports modern web technologies like Tailwind CSS for styling.

How Lovable AI works

The platform operates through a chat interface where descriptions become functional code:

• Prompt-based generation creates complete application structures
• Real-time preview shows changes as they happen
• Integrated deployment publishes applications with one click
• npm package support enables third-party library integration
• GitHub connection allows code export and version control

What we’re building

This tutorial creates a document chat assistant in just 4 prompts with the following functionality:

• PDF upload with drag-and-drop support
• Text extraction from uploaded documents
• Chat interface for asking questions
• Gemini API integration for intelligent responses
• Document switching and chat history

The application demonstrates Lovable AI’s capability to handle complex integrations, API connections, and multi-feature applications through strategic prompting. Let’s begin with project setup and API configuration.

Step 1: Set up Lovable account and Gemini API key

Building with Lovable requires two essential components:

• Lovable account for application development
• Gemini API key for AI responses

Both can be set up within minutes at no initial cost.

Create a Lovable account

Navigate to lovable.dev and click the sign-up button. Lovable supports authentication through Google, GitHub, or email. After signing in, the Lovable platform creates a default dashboard where all projects are managed.

The free tier provides five credits per day. Each prompt consumes credits based on its complexity and the amount of code generated.

Generate a Gemini API key

Google AI Studio provides free access to Gemini models for testing and development. Follow these steps to generate an API key:

1. Visit aistudio.google.com and sign in with a Google account
2. Click “Get API key” in the left sidebar to open the API key management interface
3. Click “Create API key” and choose between the two options:
   • Create a key in the new project
   • Create a key in the existing project: Select from available Google Cloud projects
4. Select a project, and Google generates the API key immediately
5. Copy the API key and store it securely for use in the application

Google AI Studio allows viewing the key later, but keeping a backup ensures uninterrupted development.

Understanding free tier limits

Google provides free access to Gemini models for development and testing. The free tier includes different limits depending on the model selected:

For Gemini 2.5 Flash (recommended for this tutorial):

• 10 requests per minute
• 250,000 tokens per minute
• 250 requests per day
• Zero cost for input, output, and context caching

For Gemini 2.5 Pro:

• 5 requests per minute
• 250,000 tokens per minute
• 100 requests per day
• Zero cost for input, output, and context caching

These quotas reset daily at midnight Pacific Time. The limits support building and testing the document chat assistant without encountering restrictions during normal development. Track usage through the Google AI Studio dashboard under “Usage and Limits” to monitor remaining capacity.

With both the Lovable account and Gemini API key ready, the next step involves building the application’s visual structure and user interface.

Step 2: Build the complete app structure with Lovable AI

Once the Lovable dashboard opens, the chat input is the starting point. The goal in this step is to use Lovable AI to generate the full layout of the document chat assistant in one prompt. This includes the sidebar, upload section, document list placeholder, chat interface, and the overall styling. The layout does not need functionality yet. It only needs to create a clear structure that will later support PDF processing and Gemini responses.

Enter the prompt below into the Lovable AI chat:

Create a modern PDF document chat assistant with a two-column responsive layout. 

Left sidebar (30 percent width, light gray background): 
- Title "Document Chat Assistant" with a small document icon 
- PDF upload area with drag and drop zone, upload button, and note that it supports PDF files up to 10MB 
- A placeholder list that displays document names after upload 

Right chat area (70 percent width): 
- Header showing the current document name 
- Message area with a scrollable container for both AI and user messages 
- User messages aligned to the right with a blue background 
- AI messages aligned to the left with a soft gray background 
- Input bar at the bottom with a text field, send button, and a character counter 

Styling: 
- Use Tailwind CSS for spacing and layout 
- Apply clean typography, soft shadows, and smooth hover transitions 
- Make the interface responsive so it stacks vertically on smaller screens 
- Use blue as the primary color and gray for neutral elements 

Copy to clipboard
Copy to clipboard

Press Enter. Lovable AI generates the complete interface within seconds. The preview window displays the two-column layout with the sidebar on the left (upload zone and document list) and chat area on the right (message bubbles, input field, send button). Everything is styled with Tailwind CSS, responsive breakpoints, and hover effects.

The interface is visual only at this point. PDF processing and AI integration come next.

With the layout in place, the next step is to add PDF processing and connect the interface to the Gemini API.

Step 3: Add PDF processing and Gemini integration to Lovable AI

Now that the interface is ready, let’s add the core functionality that enables PDF upload, text extraction, and AI-powered responses. Enter this prompt in Lovable:

Add complete PDF processing and AI functionality to the document chat assistant: 

1. Install and configure pdf-parse library for text extraction 

2. Implement PDF upload handler that: 
   - Validates file type (PDF only) and size (max 10MB) 
   - Extracts full text content using pdf-parse 
   - Stores extracted text in application state 
   - Updates document list with file name and timestamp 
   - Shows success/error notifications 

3. Add Gemini API integration: 
   - Create settings panel/modal for API key input (with visibility toggle and secure storage in localStorage) 
   - Add API key validation check 
   - Configure @google/generative-ai package with gemini-2.5-flash model 

4. Implement chat functionality: 
   - Send user question + extracted PDF text as context to Gemini API 
   - Display loading indicator during API call 
   - Append AI response to chat with timestamp 
   - Maintain full conversation history 
   - Handle API errors with user-friendly messages 
   - Add "API Key Required" prompt if key not set 

5. Add error handling for: invalid files, extraction failures, API errors, network issues 

Copy to clipboard
Copy to clipboard

Lovable AI processes this prompt and generates several key components:

• Package installation and setup
• PDF processing system:
  • Upload handler validates file type (PDF only) and size limits
  • Text extraction runs automatically after successful upload
  • Document list updates with file names and upload timestamps
  • Success/error notifications appear for user feedback
• Gemini API integration:
  • Settings panel with API key input field and visibility toggle
  • Secure localStorage implementation for key storage
  • Connection test validates the API key before saving
  • gemini-2.5-flash model configured as the default
• Chat functionality:
  • User questions combine with extracted PDF text as context
  • Loading indicator displays during API processing
  • AI responses append to chat history with timestamps
  • Error messages handle API failures gracefully
  • “API Key Required” prompt appears when key is missing

Test the application by uploading a PDF file, adding the Gemini API key through the settings panel, and asking questions about the document. The AI analyzes the PDF content and provides contextual answers based on the extracted text.

With the core functionality working, the application needs document management capabilities and user experience improvements to become production-ready.

Step 4: Add all remaining features and polish in Lovable AI

This final prompt will build a polished application with a complete feature set. Enter this prompt:

Add all remaining features and polish to complete the PDF chat assistant: 

1. Document management: 
   - Click any document in list to switch active document and load its chat history 
   - Delete button (X icon) on each document with confirmation dialog 
   - Clear current chat button in header 
   - Export chat as text file button in header 

2. Settings panel (gear icon in header): 
   - API key management section 
   - Model selection dropdown (gemini-2.5-flash, gemini-2.5-pro) 
   - Temperature slider (0-1, default 0.7) 
   - Max tokens input field 
   - Save/cancel buttons 

3. UX enhancements: 
   - Loading animations: skeleton loaders for messages, spinning icon during processing 
   - Hover effects: scale on buttons, background change on list items 
   - Empty states: helpful messages when no documents uploaded or chat is empty 
   - Suggested questions: show 3-4 example questions below input when document is loaded (e.g., "Summarize this document", "What are the key points?") 
   - Copy button on each AI message to copy response to clipboard 
   - Auto-scroll chat to bottom when new message arrives 
   - Keyboard shortcuts: Enter to send, Shift+Enter for new line 

4. Mobile responsiveness: 
   - Hamburger menu for sidebar on mobile 
   - Full-width layout on small screens 
   - Touch-friendly button sizes 
   - Optimized spacing and typography 

5. Visual polish: smooth fade-in animations for new messages, subtle gradient backgrounds, proper loading states everywhere, consistent spacing throughout 

Copy to clipboard
Copy to clipboard

Lovable implements the complete feature set:

• Document management
• Advanced settings panel
• User experience improvements
• Mobile optimization

The application is now production-ready with all features functional. Test document switching, settings adjustments, and mobile responsiveness to verify everything works as expected.

Before deploying the application, let’s verify that all features work correctly across different scenarios and devices.

Step 5: Test your Lovable application

Click the Lovable preview to open the application in a new tab. Upload a PDF document (any research paper or report works well). The document name appears in the sidebar with a timestamp after successful upload.

Open settings by clicking the gear icon and paste the Gemini API key from Google AI Studio. Click save to validate the connection.

Now test the chat functionality with these example prompts:

• “Summarize this document in 3 sentences”
• “What are the main topics covered?”
• “Extract the key findings or conclusions”
• “What methodology was used in this research?”

The AI analyzes the PDF content and provides relevant answers based on the extracted text. Response time typically ranges from 2 to 5 seconds, depending on document length and question complexity.

Try switching between different models in settings (gemini-2.5-flash vs gemini-2.5-pro) to compare response quality. Test the export button to download chat history as a text file. The application is ready for deployment once the chatbot provides accurate answers to document-based questions.

Conclusion

This tutorial covered building a production-ready PDF document chat assistant using Lovable AI and Gemini API through four comprehensive prompts:

• Creating a two-column responsive interface with upload and chat areas
• Integrating PDF text extraction with pdf-parse library
• Connecting Gemini API for AI-powered document analysis
• Adding document management, settings panel, and UX enhancements
• Testing core functionality with example prompts

Lovable AI’s vibe coding approach eliminated manual coding, dependency management, and configuration setup. The platform generated React components, handled API integration, and implemented responsive design automatically. The entire development process took minutes instead of hours or days with traditional development methods.

To learn more about Lovable, explore the free Intro to AI Programming with Lovable course on Codecademy.

Frequently asked questions

1. What can be created with Lovable?

Lovable builds full-stack web applications including dashboards, CRM systems, chatbots, e-commerce sites, productivity tools, and internal business applications. The platform works best for applications that prioritize rapid development over low-level performance optimization.

2. What is Lovable good for?

Lovable excels at rapid prototyping, MVP development, and building production applications quickly. The platform suits founders validating ideas, developers creating prototypes, and non-technical users building functional applications without coding knowledge.

3. Is Lovable free to use?

Lovable offers a free tier with 5 credits per day. Each prompt consumes credits based on complexity. The Pro plan costs $20/month and provides unlimited credits for building production applications without daily restrictions.

4. Who created Lovable?

Anton Osika founded Lovable (formerly GPT Engineer). Osika previously created the open-source GPT Engineer project before launching Lovable as a commercial platform in 2024. The company reached $17.5M in annual recurring revenue within three months of launch.

5. Which is better, Lovable or Bolt?

Both Lovable and Bolt are AI-powered development platforms with different strengths. Lovable focuses on full-stack web applications with React and Supabase integration, offering strong GitHub export and code ownership. Bolt emphasizes rapid prototyping with a broader range of frameworks. The best choice depends on your specific project requirements, preferred tech stack, and development workflow.