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

# GitHub

> Learn how to use Tunnel with Github

## Overview

The Github integration allows you to link GitHub repositories to projects in Tunnel. Once linked, Tunnel will display the status of the comments on the corresponding branch. This allows you to see how many comments have been resolved and how many are still open.

## Configuration

### Connect Github

Navigate to [**Settings** > **Integrations**](https://tunnel.dev/settings/integrations) and click the **Connect** button.

<Frame>
  <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/organization-settings.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=35a8333847c48522a5194c2459bcd920" width="1720" height="1227" data-path="assets/screenshots/integrations/github/organization-settings.png" />
</Frame>

## Link GitHub repositories to projects

With your Github organization connected, you can link repositories to projects in Tunnel.

### Link a repository to a new project

<Steps>
  <Step title="Create a new project">
    To create a new project and link a repository to it, navigate to
    [**Projects**](https://tunnel.dev/projects) and click the **New project**
    button.

    <Frame>
      <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/create-project.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=67689573d50103c633021bc99ad7e543" width="1719" height="1228" data-path="assets/screenshots/integrations/github/create-project.png" />
    </Frame>
  </Step>

  <Step title="Select a repository">
    In the **Link a Repository** field, select the repository you want to link
    to the project.

    <Frame>
      <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/new-projectselect-repository.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=863f6879f00518199dac1da4da72bbca" width="1720" height="1225" data-path="assets/screenshots/integrations/github/new-projectselect-repository.png" />
    </Frame>
  </Step>
</Steps>

### Link a repository to an existing project

<Steps>
  <Step title="Navigate to your project's settings">
    To link a repository to an existing project, navigate to
    [**Projects**](https://tunnel.dev/projects) and select the project you want
    to link a repository to. Navigate to the **Settings** tab.

    <Frame>
      <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/existing-project-settings.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=34da136db100feb214ed1e50eb23c949" width="1720" height="1228" data-path="assets/screenshots/integrations/github/existing-project-settings.png" />
    </Frame>
  </Step>

  <Step title="Select a repository">
    Scroll down to the **GitHub Repository** section and select the repository
    you want to link to the project.

    <Frame>
      <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/existing-project-select-repository.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=fabb4c90446fdd3c2e22565367bd6cb9" width="1719" height="1226" data-path="assets/screenshots/integrations/github/existing-project-select-repository.png" />
    </Frame>
  </Step>
</Steps>

## Adding git metadata to comments

### Development

The Tunnel CLI will automatically detect the repository and branch you are working on and add git metadata to comments.

### Staging and Production

To add git metadata to comments in your hosted environments, you will need to pass a git branch to the `<TunnelToolbar />` component or `<script>` tag.

<CodeGroup>
  ```jsx SDK theme={null}
  <TunnelToolbar projectId="PROJECT_ID" branch="BRANCH_NAME" />
  ```

  ```html <script> tag theme={null}
  <script
    src="https://tunnelapp.dev/__tunnel/script.js"
    data-project-id="PROJECT_ID"
    data-branch="BRANCH_NAME"
  ></script>
  ```
</CodeGroup>

## Sync Pull Requests

Pull requests receive generated PR messages from the Tunnel bot. The PR message tracks how many comments have been resolved and how many are still open. The PR message is updated every time a comment is resolved or reopened.

<Frame>
  <img src="https://mintcdn.com/tunnel-19/HHvo6FC8pp1jesAt/assets/screenshots/integrations/github/pr-message.png?fit=max&auto=format&n=HHvo6FC8pp1jesAt&q=85&s=5deaa56cfa6d9a1e72afcd38e9043bb3" width="916" height="260" data-path="assets/screenshots/integrations/github/pr-message.png" />
</Frame>