Give your business
a 24/7 assistant.

You built a landing page.
Now put someone behind the counter.

• ✓You have a landing page for your business (real or practice).
• →We’ll add a chatbot that answers customer questions.
• →Grounded in your strategy report and docs · English and Spanish · free.
• →Update the knowledge → the bot keeps up.

Follow along with your own business — one step at a time.

A salesperson that
never sleeps.

Answers only from your business facts — and guides visitors toward contact.

What it does for a business.

• •Answers 24/7 — instantly, while you sleep.
• •Speaks the customer’s language — English and Spanish.
• •Sticks to your facts — no invented prices or promises.
• •Turns questions into leads — points ready buyers to your contact form.

The AI doesn’t know
your business.

• •Gemini knows the world in general — not your inventory, prices, or policies.
• •Ask it about your business and it guesses — or invents (a “hallucination”).
• •The fix isn’t a smarter model. It’s giving it your facts.

Those facts are the context. Supplying them is grounding.

You don’t train it.
You hand it the facts.

• •No retraining, no fine-tuning. Your facts go into the prompt as context.
• •Change the facts → the answers change instantly.
• •The model is stateless — it remembers nothing between messages…
• •…so we resend the conversation + your facts on every question.

Every question is one big prompt.

Your knowledge base is glued into the system instruction on every request.

One knowledge base that
mirrors your business.

Left: you paste (or fetch) your business docs into the knowledge base. Right: the chat reads it to answer every question.

Never put your key
in the browser.

That’s why we add a tiny backend (Supabase) in Step 2.

What you’re about to build.

Before we start.

Free, no credit card. Keep the key handy for Step 2. Also have your strategy report (from NotebookLM) and any FAQ / pricing text ready to paste in Step 3.

Add the chat widget.

What you’ll see: a chat bubble appears. It opens, but doesn’t answer yet.

Add a floating chat widget to my site.
- Bottom-right: a round 56px button with a chat icon.
- Clicking it opens a panel (~380x560px) anchored bottom-right, with:
  1) a header "Ask [[BUSINESS NAME]]" and a close (X) button,
  2) a scrollable messages area,
  3) a text input with a Send button.
- Match my site's style: white panel, thin border, 14px corners, my accent color for
  the button and Send. User messages right in a light bubble; assistant messages left in gray.
- No backend yet: when the user sends, show a placeholder reply "Connecting soon...".
- Responsive (near full-screen on mobile), focus the input on open, close on Escape.

Add the secure backend.

Lovable will ask to connect Supabase, then to paste your GEMINI_API_KEY.

Connect Supabase, then create an Edge Function named "chat" that securely calls Google Gemini.
- Read the key from a secret named GEMINI_API_KEY (never expose it to the browser).
- Accept POST JSON: { "messages": [ { "role": "user" | "assistant", "text": "..." } ] }.
- Send the conversation to model "gemini-3.5-flash"
  (https://generativelanguage.googleapis.com/v1beta/models/gemini-3.5-flash:generateContent)
  with a system instruction. For now use a placeholder: "You are a helpful assistant."
- Return JSON: { "reply": "..." }. Add CORS headers and error handling.
Then prompt me to enter the GEMINI_API_KEY secret.

Build the knowledge base.

A table for your business docs + an admin page to paste and update them. Big step — Lovable may take a couple of tries.

Create a Supabase table "knowledge" (source text primary key, content text,
updated_at timestamptz default now()) - the chatbot's knowledge base, one row per source.

Create a simple admin page at /knowledge (with a small link in the site footer) where I can:
- add or edit a source: a short name plus a large text area to paste the content,
- save it (upsert) and see all sources with their last-updated time,
- protect the page with a simple passcode I set.

Add a "Summarize with AI" button next to the text area: it sends the pasted text to
Gemini (through an edge function, using the GEMINI_API_KEY secret) and replaces it
with a clean, factual summary I can review before saving.

Also add a "Fetch my website" button that downloads the text of my site's pages,
strips the HTML, and saves it as the "website" source.

I will paste sources like: "strategy-report" (my business strategy report from
NotebookLM), "faq", "pricing", and "video-notes" (notes from tutorials and videos).

Feed it to the bot.

Now it answers about your business, grounded in the knowledge base, in English or Spanish.

Two things:
(1) Connect the widget to the "chat" function: keep the full conversation in state and send it
    every message; show a typing indicator; disable Send while waiting; on error show
    "Sorry, something went wrong - please try again."
(2) In the "chat" function, on every request read ALL rows of the "knowledge" table and inject
    them into the system instruction:

"You are the friendly assistant on the website of [[BUSINESS NAME]], [[one line on what it
does, e.g. 'a yacht dealership in Miami']]. Rules: use ONLY the business knowledge below;
never invent prices, availability, or policies; if something isn't covered, say so and invite
the visitor to use the contact form; detect the visitor's language and reply in it (English
or Spanish); keep answers short and friendly; when a visitor shows real interest, guide them
to the contact form.
BUSINESS KNOWLEDGE (source of truth):
[insert every knowledge.content, each labeled with its source]"

If gemini-3.5-flash errors or is rate-limited, retry once with gemini-3.1-flash-lite.

Polish it.

Starter questions, streaming text, clean on phones.

Polish the chat widget:
- When empty, show 3 clickable starter chips ("What do you offer?",
  "How much does it cost?", "¿Hablan español?") that send on click.
- Stream the reply so text appears progressively (Gemini :streamGenerateContent);
  otherwise keep the typing indicator.
- Great on mobile and desktop, matches my site, auto-scroll to the newest message.
- Small line under the input: "AI assistant - may be imperfect."

If something breaks (it’s normal).

• ›Supabase not connected — connect it in the top bar before Steps 2–3.
• ›“Secret missing” — add GEMINI_API_KEY when prompted, then re-run.
• ›Step 3 too big — split it: table + admin page first, then the buttons.
• ›Paste too long — use “Summarize with AI”, or split it into smaller sources.
• ›Website fetch fails — just paste the page text by hand instead.
• ›Widget can’t reach the function — say “add CORS headers to the chat function.”
• ›Bot answers generic — the knowledge table is empty: go to /knowledge and add sources.
• ›Bot invents prices — put real pricing in the knowledge; keep the “never invent” rule.
• ›Model error / rate limit — check the model name; keep the gemini-3.1-flash-lite fallback.

Test in 60 seconds.

• 1Ask about a product or service (English).
• 2Ask again in Spanish — it should switch.
• 3Ask a price you didn’t include — it should admit it and point to contact, not invent one.
• 4Update /knowledge, ask again — it should know the new info.

Free tier: ~1,500 messages/day. Public info only — never paste customer data or secrets into the knowledge base.

Your plan became an employee.

• 1Widget — the chat UI.
• 2Secure backend — key stays hidden.
• 3Knowledge base — your strategy report + docs, easy to update.
• 4Grounded answers — from your facts, bilingual, honest.
• 5Polish — chips, streaming, mobile.

Context is the whole game: update the knowledge → the bot keeps up. The same 5 steps work for any business.

Make it sell.

• +Capture leads — save name + email from the chat into a table.
• +Log real questions — customers will tell you what to sell.
• +Hand off to WhatsApp — where Miami does business.
• +Go live — publish on your own domain.

¡Gracias! · Questions?