AI Prompt
<msc-ai-prompt />
is a web component based on Chrome Built-in AI Prompt API.
Web developers could use <msc-ai-prompt />
wrap form element and give it prompt feature support.
The following demo is a product description input field. User could press prompt trigger which at top-right corner. Then Gemini will give suggestion depend on data you just input.
Let's see what can <msc-ai-prompt />
do ?
Basic Usage
<msc-ai-prompt />
is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ai-prompt />
's html structure and everything will be all set.
Required Script
Structure
Put <msc-ai-prompt />
into HTML document. It will have different functions and looks with attribute mutation.
Otherwise, developers could also choose remoteconfig to fetch config for <msc-ai-prompt />
.
JavaScript Instantiation
<msc-ai-prompt />
could also use JavaScript to create DOM element. Here comes some examples.
Style Customization
Developers could apply styles to decorate <msc-ai-prompt />
's looking.
Otherwise delevelopers could also add className - align-container-size
to make <msc-ai-prompt />
's size same as container's size.(default is inline-size: 100%
only)
Attributes
<msc-ai-prompt />
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.
prompts
Set prompts. Web developer could add keyword {{replacement}} in prompt sentence, <msc-ai-prompt />
will use first form element's (input[type=text], textarea) value and do replace action. Default is empty string.
disabled
Hides the prompt trigger button once set. It is false by default (not set).
l10n
Set localization for title or action buttons.
- subject
:Set dialog subject.
- introduction
:Set dialog result title.
- apply
:Set prompt trigger button's content.
- triggerlabel
:Set prompt trigger button's label.
Properties
Property Name | Type | Description |
---|---|---|
config
|
Object | Getter / Setter Prompt API create config. Developers could set systemPrompt 、temperature and topK here. |
prompts
|
String | Getter / Setter prompts. Web developer could add keyword {{replacement}} in prompt sentence, <msc-ai-prompt /> will use first form element's (input[type=text], textarea) value and do replace action. Default is empty string. |
disabled
|
Boolean | Getter / Setter disabled. Hides the prompt trigger button once set. It is false by default. |
l10n
|
Object | Getter / Setter localization for title or action buttons. Developers could set subject 、introduction 、apply and triggerlabel here. |
available
|
String | Getter available. Web developers will get "no" if current browser doesn't support Build-in AI. |
Mathod
Mathod Signature | Description |
---|---|
prompt(prompt = <msc-ai-prompt />'s prompts)
|
Go prompt. This is an async function. Default will take <msc-ai-prompt />'s prompts value. |
Events
Event Signature | Description |
---|---|
msc-ai-prompt-apply
|
Fired when result dialog's apply button pressed. Developers could gather result information through event.detail. |
msc-ai-prompt-error
|
Fired when prompt process error occured. Developers could gather message information through event.detail. |
msc-ai-prompt-process
|
Fired when prompt processing. |
msc-ai-prompt-process-end
|
Fired when prompt process end. |