# Integrate via React
Source: https://speakeasy.com/docs/sdks/sdk-docs/snippet-ai/integrate-via-react

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



SnippetAI is a React package designed to simplify generating code samples directly from OpenAPI specifications, enabling developers to rapidly prototype and integrate APIs into their applications.

### Installation

To install SnippetAI in a React project, install it using the package manager of choice:

<CodeWithTabs
  tabs={[
    {
      label: "npm",
      language: "bash",
      code: `npm install @speakeasy-api/snippet-ai-react`,
    },
    {
      label: "yarn",
      language: "bash",
      code: `yarn add @speakeasy-api/snippet-ai-react`,
    },
    {
      label: "pnpm",
      language: "bash",
      code: `pnpm add @speakeasy-api/snippet-ai-react`,
    },
  ]}
/>

### Usage

After installation, import and utilize SnippetAI in React components. An active publishing token is required. Generate one in the settings page for the organization.

```jsx
import { SnippetAI } from "@speakeasy-api/snippet-ai-react";

function MyComponent() {
  return <SnippetAI codeLang="typescript" publishingToken="PUBLISHING_TOKEN" />;
}

export default MyComponent;
```

### Supported Languages

SnippetAI currently supports code generation for the following languages:

<Table
  data={[
    { language: "TypeScript", supported: "✅" },
    { language: "Python", supported: "✅" },
    { language: "PHP", supported: "✅" },
    { language: "Java", supported: "✅" },
    { language: "C#", supported: "✅" },
    { language: "Go", supported: "✅" },
  ]}
  columns={[
    { key: "language", header: "Language" },
    { key: "supported", header: "Supported" },
  ]}
/>

### Props

The `SnippetAI` component accepts the following props:

<Table
  data={[
    {
      prop: "`codeLang`",
      type: "`string`",
      description:
        "Programming language for suggestion results (`typescript`, `python`, `go`, `java`, `csharp`, `php`)",
      default: "`typescript`",
    },
    {
      prop: "`toggleShortcut`",
      type: "`string`",
      description: "Keyboard shortcut to open the Command Bar",
      default: "`$mod+k` (cmd+k / ctrl+k)",
    },
    {
      prop: "`zIndex`",
      type: "`string`",
      description: "Z-index of the command bar",
      default: "`1000`",
    },
    {
      prop: "`suggestions`",
      type: "`string[]`",
      description: "Searchable list of suggestions for the command bar",
      default: "`[]`",
    },
  ]}
  columns={[
    { key: "prop", header: "Prop" },
    { key: "type", header: "Type" },
    { key: "description", header: "Description" },
    { key: "default", header: "Default" },
  ]}
/>

### Language Selection

If a `codeLang` prop 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)