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