# Integrate via Web Component
Source: https://speakeasy.com/docs/sdks/sdk-docs/snippet-ai/integrate-via-web-component

import { CodeWithTabs, Table } from "@/mdx/components";



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

If the environment doesn't support custom script tags, [Integrate via a Script](/docs/sdk-docs/snippet-ai/integrate-via-script)

## Required Setup

Add one of the following script tags to the HTML file's `<head>` section, using the appropriate module format for the 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 the HTML file:

<CodeWithTabs
  tabs={[
    {
      label: "ES Module",
      language: "html",
      code: `<script
  type="module"
  src="https://snippet-ai.speakeasy-cloud.com/assets/index.es.js"
></script>`,
    },
    {
      label: "UMD",
      language: "html",
      code: `<script
  type="module"
  src="https://snippet-ai.speakeasy-cloud.com/assets/index.umd.js"
></script>`,
    },
  ]}
/>

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

<Table
  data={[
    {
      attribute: "`publishingtoken`",
      description: "Public API key for authentication",
      required: "Yes",
      default: "-",
    },
    {
      attribute: "`codelang`",
      description:
        "Programming language for code generation (`typescript`, `python`, `go`, `java`, `csharp`, `php`)",
      required: "No",
      default: "-",
    },
    {
      attribute: "`triggerelementid`",
      description:
        "Custom ID attribute for a button element that will open SnippetAI when clicked",
      required: "No",
      default: "-",
    },
    {
      attribute: "`toggleshortcut`",
      description: "Keyboard shortcut to open the Command Bar",
      required: "No",
      default: '`"$mod+k"` (cmd+k / ctrl+k)',
    },
    {
      attribute: "`zindex`",
      description: "Z-index of the command bar",
      required: "No",
      default: '`"1000"`',
    },
    {
      attribute: "`suggestions`",
      description: "Searchable list of suggestions for the command bar",
      required: "No",
      default: '`"[]"`',
    },
  ]}
  columns={[
    { key: "attribute", header: "Attribute" },
    { key: "description", header: "Description" },
    { key: "required", header: "Required" },
    { key: "default", header: "Default" },
  ]}
/>

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

```html
<snippet-ai
  codelang="typescript"
  publishingtoken="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.

```html
<snippet-ai
  codelang="typescript"
  triggerelementid="snippet-ai-trigger-button"
  publishingtoken="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.

![Screenshot of SnippetAI UI with language selector](/assets/docs/snippet-ai/snippet-ai-language-select.png)