Integrate via Web Component

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

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
`codelang`	Programming language for code generation (`typescript`, `python`, `go`, `java`, `csharp`, `php`)	Yes
`publishingtoken`	Your public API key for authentication	Yes

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>

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="snippetai-trigger-button"
  publishingtoken="YOUR_PUBLIC_API_KEY"
>
</snippet-ai>
<button id="snippetai-trigger-button">Open SnippetAI</button>

The SnippetAI component accepts the following attributes:

Attribute	Description	Default
`toggleshortcut`	Keyboard shortcut to open the Command Bar	`"$mod+k"` (cmd+k / ctrl+k)
`zindex`	Z-index of the command bar	`"1000"`
`suggestions`	Searchable list of suggestions for the command bar	`"[]"`