I Added AI to Any Website With One Line of JavaScript — Here's How

rorie devine — Sat, 21 Mar 2026 12:23:06 +0000

Last year I got tired of watching businesses lose customers because their websites couldn't answer basic questions at 9pm.

So I built EmbedAI — an embeddable AI assistant that works with one line of code:

<script src="https://embedai.dev/embed/v1/chat.js"></script>

That's it. No API keys. No backend. No configuration. The AI reads your website content and starts answering customer questions immediately.

Here's how it works under the hood.

The Problem

Every website has the same issue: customers have questions, but there's nobody there to answer them. Contact forms go unanswered. Phone lines close at 5pm. FAQ pages are buried three clicks deep.

Traditional chatbots don't solve this — they follow scripted decision trees that frustrate users the moment they ask something unexpected.

What businesses actually need is an AI that:

Reads their website and understands their services, pricing, and FAQs
Answers in natural language — not "Press 1 for opening hours"
Works immediately — no training data, no prompt engineering
Runs on any website — WordPress, Wix, Squarespace, custom-built, anything

The Architecture

The embed snippet loads a Web Component called <embedai-chat>. Here's what happens when it hits a page:

1. Auto-Mount

The script self-initialises — no document.createElement or ReactDOM.render needed. It registers a custom element and appends it to the body:

if (customElements.get('embedai-chat')) return;
// ... register and auto-mount

This means it works on literally any website. React, Vue, Angular, plain HTML, WordPress — if it has a <body> tag, it works.

2. Theme Detection

The widget auto-detects whether the host site is light or dark themed and adapts:

var THEMES = {
  dark: {
    bg: '#0A0A0B',
    accent: '#7FFF00',
    userBubble: '#7FFF00',
    // ...
  },
  light: {
    bg: '#FFFFFF',
    accent: '#16A34A',
    userBubble: '#16A34A',
    // ...
  }
};

You can also pass custom theme colours if you want to match your brand exactly.

3. RAG Pipeline (the interesting bit)

When a user asks a question, here's what happens server-side:

Query Expansion — The original question gets expanded into 3 alternative phrasings using Groq/Llama. This dramatically improves retrieval recall:

Original: "Do you handle VAT returns?"
Expanded:
  → "VAT return services available"
  → "Tax filing and VAT support"
  → "Accounting services for VAT"

Hybrid Retrieval — All query variations hit a Supabase (pgvector) database in parallel. We use both vector similarity search AND keyword matching — hybrid search catches things that pure semantic search misses.

LLM Reranking — Retrieved chunks get reranked for relevance before being passed to the final completion.

Streaming Response — GPT-4o generates the answer using the retrieved context, streamed back to the widget in real-time.

The entire pipeline runs in under 2 seconds for most queries.

4. Demo Mode

Here's the clever bit for adoption: the widget works without any configuration. No API key, no token, no signup.

In demo mode, it uses Groq's llama-3.1-8b-instant (the cheapest model available) and rate-limits to 5 messages per browser + 5 per IP per 24 hours. Enough to try it out, not enough to run up a bill.

var _isDemo = !CFG.token ||
  PLACEHOLDER_TOKENS.indexOf(CFG.token.trim()) !== -1;

When someone adds a token, it switches to their own AI provider and removes the rate limits.

What I Learned Building This

Web Components are underrated

Everyone reaches for React or Vue, but for an embeddable widget, Web Components are perfect. They:

Work everywhere with zero dependencies
Don't conflict with the host page's framework
Encapsulate styles via Shadow DOM
Are natively supported in every modern browser

If you're building anything embeddable, seriously consider Web Components before reaching for a framework.

RAG beats fine-tuning for this use case

I wrote about this in detail in RAG for SaaS, but the short version: fine-tuning is expensive, slow to update, and hallucinates when it doesn't know something. RAG retrieves real content and cites it — which is exactly what you want when answering questions about someone's business.

The "no config" default matters enormously

The biggest adoption unlock was making the widget work with zero configuration. Most developers (and especially non-developers) won't sign up, get an API key, and configure something just to try it. But they will paste one line of code.

Try It

Paste this into any HTML page:

<script src="https://embedai.dev/embed/v1/chat.js"></script>

It'll mount a chat widget in the bottom-right corner, read the page content, and start answering questions about it.

If you want to customise it — theme, title, position, your own AI provider — check out the full docs.

The code handles:

Auto-theming (light/dark detection)
Streaming responses (real-time typing effect)
Mobile responsive (full-screen on mobile)
Rate limiting (demo mode for free tier)
Install tracking (ping on load, usage analytics)

What's Next

I'm working on:

Action triggers — let the AI execute tasks, not just answer questions
Multi-language support — auto-detect and respond in the user's language
Conversation memory — context that persists across sessions

If you're building something similar, or have questions about the RAG pipeline, drop a comment — happy to go deeper on any of this.

I'm Rorie, founder of EmbedAI. We build embeddable AI for businesses that want to add AI to their website without hiring a dev team.

DEV Community: rorie devine