AI-powered floating mouse that guides users through your web app. Users press X to type a question or hold X to speak one — Clippy analyzes the page and walks them through each step with a guided cursor.
Powered by interfaze.ai.
Sign up at interfaze.ai and grab your API key.
Via CDN (recommended):
<script>
window.ClippyWeb = { apiKey: "YOUR_INTERFAZE_API_KEY" };
</script>
<script
defer
src="https://unpkg.com/clippy-web@latest/dist/clippy.min.js"
></script>Or use jsdelivr:
<script>
window.ClippyWeb = { apiKey: "YOUR_INTERFAZE_API_KEY" };
</script>
<script
defer
src="https://cdn.jsdelivr.net/npm/clippy-web@latest/dist/clippy.min.js"
></script>Via npm:
npm install clippy-webThen include the script in your HTML and set the API key before it loads.
That's it. Clippy is now active on your page.
- Press X to open a text input, or hold X to speak a question
- Clippy analyzes the page with interfaze.ai (using the DOM tree and optionally a screenshot) and builds a step-by-step plan
- A floating cursor guides the user to each element they need to interact with
- Click near the highlighted element to advance to the next step
- Press or hold X again anytime to ask a new question (interrupts the current guide)
<!DOCTYPE html>
<html>
<head>
<script>
window.ClippyWeb = { apiKey: "YOUR_INTERFAZE_API_KEY" };
</script>
<script
defer
src="https://unpkg.com/clippy-web@latest/dist/clippy.min.js"
></script>
</head>
<body>
<!-- your app -->
</body>
</html>// app/layout.tsx
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<Script id="clippy-init" strategy="beforeInteractive">
{`window.ClippyWeb = { apiKey: "${process.env.NEXT_PUBLIC_INTERFAZE_API_KEY}" };`}
</Script>
<Script
src="https://unpkg.com/clippy-web@latest/dist/clippy.min.js"
strategy="afterInteractive"
/>
</body>
</html>
);
}// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Script id="clippy-init" strategy="beforeInteractive">
{`window.ClippyWeb = { apiKey: "${process.env.NEXT_PUBLIC_INTERFAZE_API_KEY}" };`}
</Script>
<Script
src="https://unpkg.com/clippy-web@latest/dist/clippy.min.js"
strategy="afterInteractive"
/>
<Component {...pageProps} />
</>
);
}Set your interfaze.ai API key. Must be set before the script loads.
window.ClippyWeb = { apiKey: "your-key" };Enable or disable sending screenshots to interfaze.ai. When false, only the DOM tree is sent, which is faster but may be less accurate. Defaults to true.
window.ClippyWeb = { apiKey: "your-key", screenshots: false };Manually initialize Clippy. Called automatically on script load — only needed if you want to delay initialization.
window.ClippyWeb = { apiKey: "your-key" };
// later...
ClippyWeb.init();The repo includes a Next.js demo app with several test pages (auth, table, dashboard, checkout).
git clone https://github.com/JigsawStack/translation-widget.git
cd clippy-web
cp .env.example .env
# Add your NEXT_PUBLIC_INTERFAZE_API_KEY to .env
yarn install
yarn devOpen https://localhost:3000 and press X to try it out.
MIT