README

A lightweight, framework-agnostic JavaScript widget that adds an "Explore With AI" button to any website. Visitors can open the current page in ChatGPT, Claude, Gemini, Perplexity, Copilot, Grok, DeepSeek, Meta AI, Mistral, and more.

→ Live Demo & Docs

Installation

Add one script tag:

<script src="https://cdn.jsdelivr.net/gh/markwinters/explorewithai-widget@latest/dist/explore-ai.min.js"></script>

That's it. The widget appears as a floating button in the bottom-right corner.

Composer (PHP projects)

composer require markwinters/explorewithai-widget

Then serve or copy the bundled file from vendor/markwinters/explorewithai-widget/dist/explore-ai.min.js, e.g. in a Laravel Blade view:

<script src="{{ asset('vendor/explorewithai/explore-ai.min.js') }}"></script>

Configuration

Use data-* attributes on the script tag:

<script
  src="https://cdn.jsdelivr.net/gh/markwinters/explorewithai-widget@latest/dist/explore-ai.min.js"
  data-theme="dark"
  data-position="bottom-left"
  data-label="Ask AI"
  data-providers="chatgpt,claude,gemini">
</script>

Options

Attribute	Values	Default	Description
`data-theme`	`light`, `dark`, `auto`	`auto`	Color theme
`data-position`	`bottom-right`, `bottom-left`, `top-right`, `top-left`	`bottom-right`	Button position
`data-label`	any string	`Explore With AI`	Button label text
`data-providers`	comma-separated provider IDs	all	Visible providers
`data-compact`	`true` or omitted	—	Icon-only circular button. Auto-enabled on mobile.

Providers

ID	Name	Prompt pre-fill
`chatgpt`	ChatGPT	✅
`claude`	Claude	✅
`grok`	Grok	✅
`perplexity`	Perplexity	✅
`gemini`	Gemini	❌ (opens app homepage)
`copilot`	Microsoft Copilot	❌ (opens app homepage)
`deepseek`	DeepSeek	❌ (opens app homepage)
`meta`	Meta AI	❌ (opens app homepage)
`mistral`	Mistral	❌ (opens app homepage)

Only providers with native URL parameter support are shown by default. The others are available if explicitly added via data-providers but will open the app's homepage without a pre-filled prompt.

JavaScript API

<script>
  // Initialize with custom config
  window.ExploreAI.init({
    theme: 'dark',
    label: 'Ask AI',
  });

  // Destroy the widget
  window.ExploreAI.destroy();

  // Refresh page data (useful for SPAs)
  window.ExploreAI.refresh();
</script>

Browser Support

Chrome, Edge, Safari, Firefox — last two major versions.

License

MIT

markwinters / explorewithai-widget

Maintainers

Package info

Statistics

Security