msc-ai-assistant

<msc-ai-assistant /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-assistant /> to help user consult anything they like to know.

Basic Usage

<msc-ai-assistant /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ai-assistant />'s html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://unpkg.com/msc-ai-assistant/mjs/wc-msc-ai-assistant.js">        
</script>

• Structure

Put <msc-ai-assistant /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-ai-assistant>
  <script type="application/json">
      {
        "config": {
          "systemPrompt": "You are a front-end engineer and very good at CSS, HTML and JavaScript.",
          "temperature": 0.8,
          "topK": 3
        },
        "l10n": {
          "subject": "AI Assistant",
          "placeholder": "Ask Gemini"
        },
        "pip": false
      }
  </script>
</msc-ai-assistant>

Otherwise, developers could also choose remoteconfig to fetch config for <msc-ai-assistant />.

<msc-ai-assistant
  remoteconfig="https://your-domain/api-path"
>
  ...
</msc-ai-assistant>

JavaScript Instantiation

<msc-ai-assistant /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscAiAssistant } from 'https://unpkg.com/msc-ai-assistant/mjs/wc-msc-ai-assistant.js';

// use DOM api
const nodeA = document.createElement('msc-ai-assistant');
document.body.appendChild(nodeA);
nodeA.config = {
  systemPrompt: 'You are a front-end engineer and very good at CSS, HTML and JavaScript.',
  temperature: .8,
  topK: 3
};

// new instance with Class
const nodeB = new MscAiAssistant();
document.body.appendChild(nodeB);
nodeB.config = {
  systemPrompt: 'You are a top sales and very good at product consulting.',
  temperature: .8,
  topK: 3
};

// new instance with Class & default config
const config = {
  config: {
    systemPrompt: 'You are a writer and very good at rewriting article and make them more vivid.',
    temperature: .8,
    topK: 3
  }
};
const nodeC = new MscAiAssistant(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <msc-ai-assistant />'s looking.

<style>
msc-ai-assistant {
  /* main */
  --msc-ai-assistant-inline-size: 400px;
  --msc-ai-assistant-block-size: 600px;
  --msc-ai-assistant-inset-inline-start: 16px;
  --msc-ai-assistant-inset-block-start: 16px;
  --msc-ai-assistant-box-shadow: none;
  --msc-ai-assistant-z-index: 1000;
  --msc-ai-assistant-background-color: rgba(255 255 255);
  --msc-ai-assistant-head-text-color: rgba(35 42 49);
  --msc-ai-assistant-line-color: rgba(199 205 210);
  --msc-ai-assistant-close-icon-color: rgba(95 99 104);
  --msc-ai-assistant-close-hover-background-color: rgba(245 248 250);
  --msc-ai-assistant-content-text-color: rgba(35 42 49);
  --msc-ai-assistant-content-highlight-text-color: rgba(68 71 70);
  --msc-ai-assistant-content-highlight-background-color: rgba(233 238 246);
  --msc-ai-assistant-content-group-background-color: rgba(241 244 248);

  /* form */
  --msc-ai-assistant-input-text-color: rgba(31 31 31);
  --msc-ai-assistant-input-placeholder-text-color: rgba(95 99 103);
  --msc-ai-assistant-form-background-color: rgba(240 244 248);
  --msc-ai-assistant-form-focus-background-color: rgba(233 238 246);
  --msc-ai-assistant-submit-icon-color: rgba(68 71 70);
  --msc-ai-assistant-submit-hover-background-color: rgba(0 0 0/.07);
}
</style>

Attributes

<msc-ai-assistant /> supports some attributes to let it become more convenience & useful.

• config

Set Prompt API create config.

systemPrompt：Set systemPrompt. Default is empty string.
temperature：Set temperature. Default is 0.8.
topK：Set topK. Default is 3.

<msc-ai-assistant config='{"systemPrompt":"","temperature":0.8,"topK":3}'>
  ...
</msc-ai-assistant>

• pip

Turn <msc-ai-assistant /> into picture-in-picture mode or not. It is false by default (not set).

<msc-ai-assistant pip>
  ...
</msc-ai-assistant>

• l10n

Set localization for title or form information.

subject：Set dialog subject.
placeholder：Set placeholder for input field.
error：Set messages when error occured.

<msc-ai-assistant l10n='{"subject":"AI Assistant","placeholder":"Ask Gemini.","error":"Something wrong. Try again please."}'>
  ...
</msc-ai-assistant>

Properties

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | config | Object | Getter / Setter Prompt API create config. Developers could set systemPrompt、temperature and topK here. | | pip | Boolean | Getter / Setter pip. Turn <msc-ai-assistant /> into picture-in-picture mode or not. It is false by default. | | l10n | Object | Getter / Setter localization for title or or form information. Developers could set subject、placeholder and error here. | | open | Boolean | Getter <msc-ai-assistant /> open or not. | | available | String | Getter available. Web developers will get "no" if current browser doesn't support Build-in AI. |

Mathods

| Mathod Signature | Description | | ----------- | ----------- | | show() | Display assistant window. (It will open in picture-in-picture window once pip set) | | hide() | Hide assistant window. | | toggle(force) | Toggle assistant window display or not. （force is optional, developers could set boolean to force display or not） |

Event

| Event Signature | Description | | ----------- | ----------- | | msc-ai-assistant-error | Fired when prompt error occured. Developers could gather message information through event.detail. |

Reference

• AI on Chrome > Built-in AI
• Join the early preview program
• Built-in AI > Prompt API
• <msc-ai-assistant /> demo
• YouTube tutorial
• WEBCOMPONENTS.ORG