npm package: @molin.ai/write-with-ai
Description: The writing assistant widget from molin.ai
Author: Molin AI
Latest version: 0.5.0
Deprecated: We have deprecated the Write with AI widget. For any questions, please get in touch!

# @molin.ai/write-with-ai

> The writing assistant widget from [molin.ai](https://molin.ai)

[![npm](https://img.shields.io/npm/v/@molin.ai/write-with-ai)](https://npmjs.org/package/@molin.ai/write-with-ai)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@molin.ai/write-with-ai)](https://npmjs.org/package/@molin.ai/write-with-ai)

## Installation

Add this snippet to your HTML just before the `</head>` tag.
This JS file will load the `molin-write-with-ai` web component.
Scripts with `type="module"` are loaded in "defer" mode, so they will not block the page from loading.

```html
<script type="module" src="https://widget.molin.ai/write-with-ai.js"></script>
```

Add the button to your HTML inside the `<body>` tag, where you want the button to appear.

```html
<molin-write-with-ai widget="test123"></molin-write-with-ai>
```

Lastly, connect the widget to your app.
For example, you can add this script before the `</head>` tag.
Make sure it comes after the `molin-write-with-ai.js` script from step 1.

```html
<script type="module">
  // 1) get a reference to the molin-write-with-ai element
  const wwai = document.querySelector('molin-write-with-ai');

  // 2) add an event listener to detect when the user pastes the generated content
  wwai.addEventListener('molin:paste', onMolinPaste);

  // 3) when the user clicks "Paste", fill in the textarea with the generated content
  function onMolinPaste(event) {
    const result = event.detail; // {text: "This awesome product...", timestamp: "2023-01-31T17:17:56.240Z"}
    console.log('molin:paste', result); // optional, for debugging
    document.querySelector('textarea').value = result.text;
  }
</script>
```

## Demo (playground)

Check out this [demo on StackBlitz](https://stackblitz.com/edit/molin-write-with-ai?file=index.html) to see the button in action.

## Demo (DevTools)

Go to any website and paste this in the browser console:

```js
(() => {
  let s = document.createElement('script');
  s.type = 'module';
  s.src = 'https://cdn.jsdelivr.net/npm/@molin.ai/write-with-ai@0.3.1/dist/molin-write-with-ai.min.js';
  document.head.appendChild(s);

  customElements.whenDefined('molin-write-with-ai').then(() => {
    console.log('molin-write-with-ai is ready');
  });

  setTimeout(() => {
    console.log(`
Insert this snippet in the DOM:

<molin-write-with-ai widget="test123" template="product-description"></molin-write-with-ai>

Then run this script to connect the widget to your app:

// get the molin-write-with-ai element
const molinWriteWithAI = document.querySelector('molin-write-with-ai');

// get the textarea element where the user will paste the text
const textarea = document.querySelector('textarea');

// listen for the 'molin:paste' event
molinWriteWithAI.addEventListener('molin:paste', function (ev) {
  /** @type {{ text: string }} */
  const payload = ev.detail;
  console.log('molin:paste', payload);
  textarea.value = payload.text;
});
`);
  }, 1000);
})();
```