Mira Chat Widget

Embeddable AI chat widget for websites. Works with React, Next.js, or plain script tags.

Installation

npm install @grayscale-technologies/mira-chat-widget

React / Next.js

import { MiraChat } from '@grayscale-technologies/mira-chat-widget';

function App() {
  return (
    <MiraChat
      apiKey="mira_xxxxxxxx"
      primaryColor="#6366f1"
      title="Chat with us"
      bubbleIcon="https://example.com/logo.png"
    />
  );
}

Works out of the box with Next.js — SSR is handled automatically.

Props

| Prop | Type | Required | Default | |------|------|----------|---------| | apiKey | string | Yes | — | | apiUrl | string | No | https://mira-ai.grayscale-technologies.com/widget/chat | | primaryColor | string | No | #6366f1 | | welcomeMessage | string | No | Hi! How can I help you today? | | title | string | No | Chat with us | | position | bottom-right | bottom-left | top-right | top-left | No | bottom-right | | bubbleIcon | string | No | Default chat SVG |

Script Tag

Add this snippet before the closing </body> tag:

<script>
  window.MiraChat = {
    apiKey: 'your_widget_api_key_here',
    bubbleIcon: 'https://example.com/logo.png'  // optional
  };
</script>
<script src="https://unpkg.com/@grayscale-technologies/mira-chat-widget/dist/mira-chat.min.js" async></script>

Vanilla JS (Advanced)

Use createMiraChat directly for full control:

import { createMiraChat } from '@grayscale-technologies/mira-chat-widget/core';

const widget = createMiraChat({
  apiKey: 'mira_xxxxxxxx',
  primaryColor: '#6366f1',
  bubbleIcon: 'https://example.com/logo.png',
});

// Later: remove the widget
widget.destroy();

Features

• Streaming responses with real-time typing
• Product carousel display
• Custom bubble icon support
• Session persistence (conversations resume across page reloads)
• Mobile responsive
• Customizable theming
• TypeScript definitions included
• Zero dependencies (React is an optional peer dep)

Development

npm install
npm run build
npm run watch   # auto-rebuild on changes

Build Outputs

| File | Format | Usage | |------|--------|-------| | dist/mira-chat.min.js | IIFE | Script tag embed | | dist/mira-chat.js | IIFE | Script tag (debug) | | dist/react.mjs | ESM | import { MiraChat } | | dist/react.js | CJS | require() | | dist/core.mjs | ESM | import { createMiraChat } |

Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

License

MIT