> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# AI integration

> How to Integrate AI Services into Lovable Projects

Lovable makes it easy to integrate AI services into your web applications. Whether you want to build an AI-powered landing page, a text-generation tool, or a full SaaS app, Lovable's built-in integrations with services like
[**OpenAI**](https://platform.openai.com/), [**Groq**](https://console.groq.com/keys), [**Claude**](https://www.anthropic.com/api), [**Deepseek**](https://api-docs.deepseek.com/), and [**Mistral**](https://docs.mistral.ai/api/) make it possible without writing backend code. Here's how to do it:

<Steps>
  <Step title="Choose the AI Feature You Need">
    Before you start building, define what you want the AI to do:

    * Generate or enhance text (e.g. email writer, tweet generator)
    * Classify or summarize content
    * Analyze images
    * Personalize responses
    * Integrate with a specific LLM API
  </Step>

  <Step title="Plan with Prompts First">
    Use Lovable's chat interface to describe your feature in simple terms. For example:

    ```
    Build an email enhancement tool. The user should write an email, then click buttons to make it more professional, concise, or friendly using Groq API.
    ```

    Lovable will scaffold the UI, suggest components, and let you preview the app quickly.
  </Step>

  <Step title="Connect to a Backend with Supabase">
    AI features often need backend logic. Supabase provides:

    * Database for user data
    * Auth for login/signup
    * Edge Functions for calling external APIs securely

    <Tip>
      Set up Supabase early in your project to avoid UI/backend mismatches.
    </Tip>
  </Step>

  <Step title="Use Edge Functions for AI Calls">
    To safely call AI APIs, create an Edge Function inside Lovable:

    * Add your API key to the Supabase by submitting this via the secrets form
    * Let Lovable generate the edge function code
    * Ensure you use function calling if your API returns structured data (e.g. calories, macros, tweet threads)

    **Prompt Example:**

    ```
    Use GPT-4 and function calling to extract nutrition info from a meal description. Save the results to the backend.
    ```

    <Tip>
      Structure your OpenAI function calling schema with defined fields like:

      ```
      {
        "name": "extract_nutrition",
        "parameters": {
          "calories": "number",
          "protein": "number",
          "carbs": "number",
          "fat": "number"
        }
      }
      ```
    </Tip>
  </Step>

  <Step title="Make It Interactive">
    Add buttons or form actions for:

    * Submitting text to the AI
    * Uploading an image
    * Toggling between modes (concise vs friendly tone)

    Lovable lets you:

    * Attach functions to buttons
    * Animate interactions
    * Show real-time results with minimal prompting

    <Tip>
      Use screenshots and phrases like "make this smoother" to guide the design.
    </Tip>

    <Tip>
      **Advanced UX Tip:** Implement side-by-side live previews of the AI response. Use left/right layout blocks or tabs to let users compare outputs.
    </Tip>
  </Step>

  <Step title="Use External Services (Optional)">
    Some popular integrations for AI workflows:

    * **Resend** – send emails after form submission
    * **Groq API** – blazing fast LLM inference
    * **Stripe** – paywall access to AI tools
    * **Replicate** – generate or transform images

    **Prompt Example:**

    ```
    When a user submits the contact form, send an email using Resend and store the message in Supabase.
    ```

    <Tip>
      **Payments Tip:** Lock advanced AI features behind a Stripe subscription. Use conditional flows like:

      ```
      if (user.isPaid) { showAIFeature(); } else { redirectToCheckout(); }
      ```
    </Tip>
  </Step>

  <Step title="Test and Iterate">
    * Use preview links to test mobile responsiveness
    * Check performance with multiple API calls
    * Share your project for feedback
    * Use chat history to revert changes or refactor
  </Step>

  <Step title="Publish and Promote">
    When you're ready:

    * Deploy with a single click
    * Use [Lovable Launch](https://docs.lovable.dev/features/launched) to get visibility
    * Add OG tags and SEO title/description in the meta panel
    * Submit your app to Product Hunt, communities, and social media
  </Step>
</Steps>

## **Debug and Improve Prompts**

* Be specific with system messages: "You are a helpful nutritionist."
* Test function calling by mocking inputs.
* Use `console.log()` inside edge functions to trace logic.
* Use screenshots when asking Lovable to debug a layout.

**Prompt Tip:** If the AI fails to use your context (e.g. user's meals), say:

```
Make sure all of the user's meals are included in the prompt to GPT-4.
```

### Troubleshooting

<AccordionGroup>
  <Accordion title="Missing data in AI prompts?">
    Make sure you include context like user history or previous entries.
  </Accordion>

  <Accordion title="UI not updating?">
    Use chat-only mode to debug one step at a time.
  </Accordion>

  <Accordion title="Streaming issues with Groq/OpenAI?">
    Ensure `stream: true` is supported.
  </Accordion>

  <Accordion title="Image uploads not working?">
    Use file inputs and convert to base64 or upload via Supabase Storage.
  </Accordion>

  <Accordion title="Edge Function fails silently?">
    View Edge Function logs in Lovable's function editor or Supabase dashboard.
  </Accordion>
</AccordionGroup>

## Example Projects Built with AI Integration

* [**Nexus Smart Email** ](https://smart-email-nexus.lovable.app/)– Landing page with real-time Groq-enhanced email preview
* [**TweetMixer Pro**](https://www.youtube.com/watch?v=fT_dq_hyQAA\&vl=de) – Paste blog posts, get tweet threads using GPT-4
* [**AI Calorie Tracker**](https://www.youtube.com/watch?v=c0zhLzcVJRI\&ab_channel=Lovable) – Analyze meals via GPT-4 with image uploads
* [**Robot Arena Shooter** ](https://www.youtube.com/watch?v=zmK36lkAb6I)– Claude-powered game with AI-enhanced logic
* [**Reindeer Quiz**](https://www.youtube.com/watch?v=XdZtpP3QpzQ) – Personalized result generation via Claude and custom scoring logic

## Final Thoughts

Lovable is your AI-powered frontend, database, backend, and deployment pipeline all-in-one. AI integration is just prompting + context + testing. Take it step-by-step, and remember: you don’t need to be a backend engineer to build with AI.