Integrate via Web Component

Install SnippetAI as a web component to enhance your documentation with AI-powered code generation.

If your environment doesn’t support custom script tags you can Integrate via a Script

Required Setup

Add one of the following script tags to your HTML file’s <head> section, using the appropriate module format for your site.

Choose the ES Module version for modern web applications to leverage performance. Select the UMD version for older browsers and traditional script loading.

Add the script tag before any code that uses the <snippet-ai> element to ensure proper loading and registration.

Add this to your HTML file:

ES Module

<script
  type="module"
  src="https://snippet-ai.speakeasy-cloud.com/assets/index.es.js"
></script>

After installing the web component, you can add the <snippet-ai> element to your HTML. The component accepts the following attributes:

Attribute	Description	Required	Default
`publishingtoken`	Your public API key for authentication	Yes	-
`codelang`	Programming language for code generation (`typescript`, `python`, `go`, `java`, `csharp`, `php`)	No	-
`triggerelementid`	Custom ID attribute for a button element that will open SnippetAI when clicked	No	-
`toggleshortcut`	Keyboard shortcut to open the Command Bar	No	`"$mod+k"` (cmd+k / ctrl+k)
`zindex`	Z-index of the command bar	No	`"1000"`
`suggestions`	Searchable list of suggestions for the command bar	No	`"[]"`

The component will automatically initialize and display the code generator interface when added to your page.

<snippet-ai
  codelang="typescript"
  publishingtoken="YOUR_PUBLIC_API_KEY"
></snippet-ai>

Custom Trigger

To have a custom trigger button, add a unique element ID the HTML element to open SnippetAI as property to the web component and the element.

<snippet-ai
  codelang="typescript"
  triggerelementid="snippet-ai-trigger-button"
  publishingtoken="YOUR_PUBLIC_API_KEY"
>
</snippet-ai>
<button id="snippet-ai-trigger-button">Open SnippetAI</button>

Language Selection

If a codelang attribute is not provided, a dropdown will be displayed to select the target language for the generated snippets.