MYSIA

Quickstart

Get MYSIA live in your app in under 5 minutes:

  1. Create an account and a new app in your dashboard.
  2. Copy the script snippet shown after creation.
  3. Paste it into the <head> of your app.
  4. Open your app and click the Tutorials button — done.

Install snippet

Add this single line to your page's <head>:

<script src="https://teach-ai-anywhere.lovable.app/api/public/widget.js"
        data-key="mysia_live_••••••••••••"></script>

The widget renders inside a Shadow DOM, so it cannot conflict with your CSS or JavaScript.

Frameworks

Works in React, Vue, Svelte, Angular, Next.js, Webflow, Wordpress, or plain HTML. For SPAs, add it once in the root HTML — you do not need to re-mount on route changes.

Set up any app for success

MYSIA works on any web app out of the box, but a few small changes to your markup make the agent dramatically more reliable at generating tutorials and highlighting the right target on every screenshot. Think of it as SEO for AI: the clearer your UI is to a machine, the better the tutorials it writes.

1. Give every interactive element a name

The agent picks targets from buttons, links, inputs, and elements with a role. It ranks them by their visible text, aria-label, title, orplaceholder. Icon-only buttons with none of those are invisible to it.

<!-- Bad: agent sees an empty button -->
<button><svg>…</svg></button>

<!-- Good: agent knows exactly what this does -->
<button aria-label="Create new project">
  <svg>…</svg>
</button>

2. Use semantic HTML, not styled divs

Prefer <button>, <a href>, <input>,<select>, and <textarea>. If you must use a <div>, add role="button" (or link, menuitem, tab, option) so it appears in the DOM snapshot.

3. Anchor critical steps with data-tutor-anchor

For the handful of elements your tutorials must highlight (primary CTAs, the checkout button, the "Save" action), add a stable anchor. It survives text changes, A/B tests, and Tailwind class churn.

<button data-tutor-anchor="checkout-pay" class="...">
  Pay $19
</button>

4. Hide UI that isn't part of your product

Add data-mysia-ignore to any container the agent should never click or screenshot — cookie banners, dev-only debug bars, the MYSIA test harness itself, or third-party chat widgets.

<div data-mysia-ignore>
  <!-- Cookie banner, Intercom, dev tools, etc. -->
</div>

5. Reflect state in the URL

The agent uses the URL to know where it is between steps. If your app is a single page that swaps views client-side, push a query param or hash (?screen=billing,#/settings) when the view changes. Tutorials become re-playable and deep-linkable.

6. Keep click targets visible without hover

The agent auto-reveals hover menus and aria-expanded="false" disclosures, but deeply nested "hover-only" navigation is fragile. If a button matters, make it reachable in at most one reveal step.

7. Avoid layout shift during the first second

Screenshots are captured after a short settle. Skeleton loaders, late-loading fonts, and images without width/height attributes cause the highlight ring to land in the wrong spot. Reserve space for anything that loads async.

8. Whitelist your production domain

In your app's settings, add every origin the widget runs on — app.example.com, staging, and local dev. Requests from other origins are rejected silently.

Quick checklist

  • ✅ Every button has visible text or an aria-label
  • ✅ Interactive elements use semantic tags or a role
  • ✅ Primary CTAs have a data-tutor-anchor
  • ✅ Non-product UI is wrapped in data-mysia-ignore
  • ✅ Route/view changes update the URL
  • ✅ All production origins are on the domain whitelist

Customizing the widget

You can override defaults via data-* attributes on the script tag:

  • data-key — required. Your API key.
  • data-label — button label. Default: "Tutorials".
  • data-position — bottom-right (default) or bottom-left.
  • data-accent — accent color, hex.
<script src="..." data-key="mysia_live_..."
  data-label="Help me"
  data-position="bottom-left"
  data-accent="#3b82f6"></script>

API reference

The widget calls a single endpoint:

POST /api/public/tutor

You typically don't call this directly — the widget handles it. Use the dashboard for analytics rather than raw API access.

Security

  • API keys are hashed at rest. We never store the plaintext key.
  • Each app has a domain whitelist — requests from other origins are rejected.
  • You can rotate keys at any time from the app's settings page.
  • End-user data is not stored unless the user explicitly opts in via your product.

FAQ

Does the widget work offline? No, it needs to reach our API to generate tutorials.

Can end users export tutorial content? They can copy step text. Bulk export is on the roadmap.

Where is my data hosted? EU / US regions on Supabase. Reach out for data-residency questions.