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.

The following demo is a front-end skill consulting. User could press 「SUMMON ASSISTANT」 and go.

Let's see what can <msc-ai-assistant /> do ?

  • Assistant Role：

  • temperature：

  • position：

  • inline-size：

    px

  • block-size：

    px

  • PiP：

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