@molin.ai/write-with-ai

The writing assistant widget from molin.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.

<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.

<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.

<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 to see the button in action.

Demo (DevTools)

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

(() => {
  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);
})();