How to Add AI4U to a Lovable Project (Step-by-Step)

Step 1: Create a Static HTML Page (This Is Critical)

Before AI4U can learn anything about your product, it needs something reliable to crawl.

Why static HTML matters

AI4U’s crawler currently does not use a headless browser. That means:

• ❌ It cannot reliably read JavaScript-rendered content
• ❌ It cannot wait for client-side hydration
• ❌ It cannot “see” dynamic UI-only text

✅ It can read clean, server-served HTML pages extremely well

A headless browser–based crawler is coming soon, but for now this step is essential.

Best practice

In your Lovable project:

• Create a static HTML page
• Ideally place it in the footer (e.g. “AI Help”, “Docs”, or “Knowledge Base”)
• Use an .html file, not a JavaScript file
• Ensure the content renders as well-structured HTML text

Good examples:

• /ai4u.html
• /help.html
• /docs/assistant.html

Avoid:

• JavaScript-only routes
• Markdown rendered client-side
• Hidden or collapsed UI text

Step 2: Explicitly Write What You Want AI4U to Learn

Because the crawler is HTML-only for now, you must replicate or deliberately write all information you want the assistant to know.

Think of this page as:

• Your single source of truth
• A machine-readable product manual
• The foundation of your AI assistant’s knowledge

What to include

• What your product does
• Who it’s for
• Key features
• Common user questions
• Limitations
• Pricing explanations
• Setup instructions
• Terminology your users use

If it’s not in static text, AI4U cannot learn it yet.

Step 3: Add the Page URL as a Data Source in AI4U

Once your static page is live:

1. Go to the AI4U Admin Panel
2. Navigate to Data Sources
3. Add the full URL of your static HTML page
4. Submit it for ingestion

AI4U will then:

• Crawl the page
• Parse the structured content
• Generate internal knowledge
• Automatically derive Q&A pairs, summaries, and embeddings

When the data source status shows as accepted and processed, you’re ready for the next step.

Step 4: Create Your AI Assistant

With knowledge successfully ingested:

1. Create a new AI Assistant inside AI4U
2. Assign the processed data source to it
3. Configure:
   • Assistant name
   • Tone of voice
   • Scope (what it should and should not answer)
   • Optional system instructions

At this point, your assistant is fully functional and ready to be embedded.

Step 5: Embed the Assistant in Your Lovable Project

AI4U assistants are embedded as a blob-style widget, typically shown in the bottom-left corner of your app.

Basic embed

• Copy the embed code from the AI4U Admin Panel
• Paste it into your Lovable project (do this over several commands)
• Make sure to add the domain names into "Assistant allowed domains:". Add the lovable domain from your project even if you already use a bespoke domain.
• The assistant will appear automatically as a floating widget

This requires no advanced integration and works out of the box.

Step 6 (Advanced): Trigger the Assistant from a Lovable Button

Here’s where things get interesting.

If you want to:

• Open the assistant when a user clicks a button
• Send context from your Lovable UI
• Programmatically control the assistant

Then Lovable needs to be instructed to read and trigger AI4U function calls.

How this works

• AI4U exposes a small set of JavaScript function calls
• Lovable can call these functions when:
  • A button is clicked
  • A page loads
  • A specific user action occurs

What to give Lovable (or your AI builder)

Use the official function call documentation here:

👉 AI4U Function Calls (Developer Reference)
https://www.ai4u.digital/blog-posts/ai4u-function-calls---to-be-given-to-your-developer-or-ai-website-builder

You can copy this directly into Lovable as instructions for:

• Triggering the assistant
• Opening / closing the widget
• Passing user or page context

Summary

To integrate AI4U with a Lovable project today:

1. ✅ Create a static HTML page (no JS rendering)
2. ✅ Write all assistant-relevant knowledge as visible text
3. ✅ Add the page URL as a data source in AI4U
4. ✅ Let AI4U generate Q&A and embeddings
5. ✅ Create an AI assistant
6. ✅ Embed it as a floating widget
7. 🚀 Optionally trigger it using AI4U function calls

This workflow is intentionally simple, robust, and production-ready—and it will only get easier once AI4U’s headless crawler is released.

If you’re building with Lovable, AI4U turns your product into a conversational interface without rebuilding your stack.

Happy building.

‍