> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kernel.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Embed our Link component in minutes.

<Steps>
  <Step title="Install @kernel/react">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @kernel/react@beta

      ```
    </CodeGroup>
  </Step>

  <Step title="Set environment keys">
    Set this in your .env file

    ```
    REACT_APP_KERNEL_PUBLISHABLE_KEY=<your_publishable_key>
    ```
  </Step>

  <Step title="Set ZOD schema">
    Kernel allows you to collect and associate arbitrary user-provided data alongside a git connection. Example use cases:

    1. a path representing the root directory (e.g. for monorepos)
    2. a boolean specifying whether or not the user would like preview deployments enabled

    Set the ZOD schema in the [Terminal](https://terminal.kernel.dev) ([see ZOD autoform docs](https://github.com/vantezzen/auto-form)).
  </Step>

  <Step title="use <Link>">
    ```javascript theme={null}
    import { KernelProvider, Link } from '@kernel/react'

    if (!process.env.REACT_APP_KERNEL_PUBLISHABLE_KEY) {
      throw new Error("Missing Kernel Publishable Key")
    }
    const kernelPubKey = process.env.REACT_APP_KERNEL_PUBLISHABLE_KEY;

    function App() {
      return (
        <div className="App">
          <KernelProvider publishableKey={kernelPubKey}>
            <Link clientId={<unique_connection_identifier>}></Link>
            ...
          </KernelProvider>
        </div>
      );
    }
    ```

    The client ID represents a unique connection to a repository.
    If you'd like a connection per account, it should be an account ID, if you'd like a connection per project, it should be a project ID, etc.
  </Step>
</Steps>