Msc-ai-assistant NPM

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.

<msc-ai-assistant />

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）