Cursor Rules for Building Embeddable AI Widgets

This is a free, MIT-licensed Cursor rules file for building embeddable AI chat widgets the way AIML.chat's is built — it keeps your AI editor framework-free, isolating styles in a Shadow DOM and keeping the bundle tiny. Drop it in .cursorrules for a widget that loads anywhere without breaking the host page.

What these rules do

An embeddable widget has unusual constraints: it must run on any site without clashing with the host's CSS or JavaScript, load fast, and not pull in a heavy framework. These rules teach your AI editor the discipline — vanilla JS rather than React or Lit, render inside a Shadow DOM so styles don't leak in or out, load asynchronously so the host page isn't blocked, and keep the gzipped bundle small. They also push for graceful failure if the API is unreachable, so a widget problem never breaks the customer's site. The result is a widget that's a good guest on every page.

The rules

# Building an embeddable AI widget (AIML.chat style)
- Use vanilla JS; no React/Preact/Lit in the embed bundle.
- Render inside a Shadow DOM to isolate styles both ways.
- Load asynchronously; never block the host page's render.
- Keep the gzipped bundle small; audit dependencies hard.
- Fail gracefully if the API is unreachable — never break the host site.
- Namespace globals; assume a hostile, unknown host environment.

How to use it

Save the block as .cursorrules at the repo root of your widget project, and your AI assistant applies it. It pairs with the add-widget skill if you'd rather embed the ready-made AIML.chat widget, and the RAG pipeline rules for the backend. The SaaS use case shows the widget in context.

Ready to build? Start free, or embed the AIML.chat widget directly — see pricing for limits.