ask-ai-widget
"Ask AI about this page" buttons in one tag. A row of ChatGPT, Claude, Perplexity, Gemini, Grok, Mistral and DeepSeek buttons (also called "Open in ChatGPT", "Summarize with AI" or AI share buttons). Each opens the assistant in a new tab with a prompt about the current page. No backend, no API keys, no tracking, zero dependencies.
- Any site: one
<script> + <ask-ai> tag in plain HTML, WordPress, Webflow, Shopify or Ghost; components for React/Next.js, Vue/Nuxt and Svelte/SvelteKit.
- Small: 12.16 kB gzip for the CDN build with all 7 logos, from 7.55 kB with the lite entry.
- Real links:
<a href> that work with middle-click and SSR; clipboard fallback for Gemini and DeepSeek, which ignore URL prefill.
- Accessible and themeable: keyboard and screen-reader support,
--aai-* CSS variables, light/dark.
- See it first: live demo and playground, no install needed.
- Not a chatbot: it answers nothing on your site and calls no AI API; it hands the page to the visitor's own assistant.
The playground configures the widget live, shows the exact prompt it sends and gives you the snippet for HTML, vanilla JS, React, Vue or Svelte. The gallery shows every variant, shape, menu and question-field layout on light and dark backgrounds.
Quick start in 30 seconds
<script src="https://cdn.jsdelivr.net/npm/ask-ai-widget@0/dist/ask-ai.min.js"></script>
<ask-ai label="Ask AI about this page"></ask-ai>
That is the whole integration. Every button opens its service with a prompt that contains the page title and URL. For production, pin an exact version ([email protected]): while the major version is 0, @0 can receive breaking changes.
Make it answer a visitor's own question instead:
<ask-ai input placeholder="Ask anything about this page" services="claude,chatgpt,perplexity"></ask-ai>
Let your AI coding agent do it
Copy this prompt (use the copy button in the corner of the block) and paste it into Claude Code, Cursor, Copilot, Codex or any other coding agent working in your project:
Add the ask-ai-widget "Ask AI" button row to this project.
1. Install it with this project's package manager: npm install ask-ai-widget
(For a plain HTML site with no build step, use the CDN script instead:
https://cdn.jsdelivr.net/npm/ask-ai-widget@0/dist/ask-ai.min.js)
2. Read node_modules/ask-ai-widget/llms.txt before writing any code. It lists
the right import for each framework, every option, and the common mistakes.
3. Detect the framework and use its entry: React/Next.js -> ask-ai-widget/react,
Vue/Nuxt -> ask-ai-widget/vue, Svelte/SvelteKit -> ask-ai-widget/svelte,
anything else -> the <ask-ai> element from ask-ai-widget/element.
4. Place the widget where I ask below (or suggest a spot, e.g. under the docs
page title). Use label "Ask AI about <my product>" and keep the default
page context (title + URL) unless I say otherwise.
5. Prompts must be strings or synchronous functions. Never await inside them,
or browsers block the new tab.
6. With SSR (Next.js, Nuxt, SvelteKit), import "ask-ai-widget/style.css" in the
root layout, and pass page={{ url, title }} so server and client links match.
7. Style it only through --aai-* CSS variables or the .aai__* classes; don't
copy or edit the library CSS.
8. Show me the diff and how to see it running.
Where and how I want it:
<describe the page, the services you want, and predefined prompt vs. visitor question>
The same guide is published at llms.txt, so agents that read llms.txt files pick it up on their own.
Contents
Install
npm install ask-ai-widget
# pnpm add ask-ai-widget
# yarn add ask-ai-widget
React, Vue and Svelte are optional peer dependencies. You only need the one you use. The package ships ESM, CJS and .d.ts files for every entry.
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
