---
title: "Liveblocks Linear-like Issue Tracker"
description: "A Linear-like collaborative issue tracker using Liveblocks and Next.js."
url: "https://vercel.com/templates/next.js/liveblocks-linear-like-issue-tracker"
links:
  repository: "https://github.com/liveblocks/liveblocks/tree/main/examples/nextjs-linear-like-issue-tracker"
  demo: "https://nextjs-linear-like-issue-tracker.liveblocks.app/"
  deploy: "https://vercel.com/new/clone?demo-title=Linear-like+issue+tracker&demo-description=A+linear-like+issue+tracker+example+built+with+Liveblocks+and+Next.js&demo-url=https%3A%2F%2Fliveblocks.io%2Fexamples%2Flinear-like-issue-tracker%2Fnextjs&project-name=linear-like-issue-tracker&repository-name=linear-like-issue-tracker&repository-url=https%3A%2F%2Fgithub.com%2Fliveblocks%2Fliveblocks%2Fblob%2Fmain%2Fexamples%2Fnextjs-linear-like-issue-tracker&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F40TbmNm6XDeFx0D18Glud2%2Ff07098af6e13360b5f30c3cb3a9f71bf%2Fvercel-gallery-template-linear-like-issue-tracker.png&developer-id=oac_vgAdc0379wKPfhSvnUIZ4Vc8&integration-ids=oac_vgAdc0379wKPfhSvnUIZ4Vc8&external-id=eyJlbnYiOlt7Im5hbWUiOiJMSVZFQkxPQ0tTX1NFQ1JFVF9LRVkiLCJ0eXBlIjoic2VjcmV0In1dLCJlbnZSZWFkeSI6W10sIm9yaWdpbiI6IkVYQV9WREIifQ"
---

# Liveblocks Linear-like Issue Tracker

A Linear-like collaborative issue tracker using Liveblocks and Next.js.

<p align="center">
  <a href="https://liveblocks.io#gh-light-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-light.svg" alt="Liveblocks" />
  </a>
  <a href="https://liveblocks.io#gh-dark-mode-only">
    <img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/header-dark.svg" alt="Liveblocks" />
  </a>
</p>

# Linear-like Issue Tracker

<p>
  <a href="https://liveblocks.io/examples/linear-like-issue-tracker/nextjs-linear-like-issue-tracker/preview">
    <img src="https://img.shields.io/badge/live%20preview-message?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE2Ljg0OSA0Ljc1SDBsNC44NDggNS4wNzV2Ny4wMDhsMTItMTIuMDgzWk03LjE1IDE5LjI1SDI0bC00Ljg0OS01LjA3NVY3LjE2N2wtMTIgMTIuMDgzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==&color=333" alt="Live Preview" /> 
  </a>
  <a href="https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-linear-like-issue-tracker">
    <img src="https://img.shields.io/badge/open%20in%20codesandbox-message?style=flat&logo=codesandbox&color=333&logoColor=fff" alt="Open in CodeSandbox" />
  </a>
  <img src="https://img.shields.io/badge/react-message?style=flat&logo=react&color=0bd&logoColor=fff" alt="React" />
  <img src="https://img.shields.io/badge/next.js-message?style=flat&logo=next.js&color=07f&logoColor=fff" alt="Next.js" />
</p>

This example shows how to build a Linear-inspired collaborative issue tracker
using [Liveblocks](https://liveblocks.io), and [Next.js](https://nextjs.org/).
Users can create issues with a rich-text editor, giving them priorities,
progress state, and labels. Comments can be left on issues and users receive
notifications if they've been mentioned.

You can optionally enable an AI assistant that you can mention it comments and
will stream in replies. The assistant can create new issues, and edit the
current issue, showing AI presence as it works.

<img src="https://raw.githubusercontent.com/liveblocks/liveblocks/main/.github/assets/examples/linear-like-issue-tracker.png" width="536" alt="Issue tracker" />

## Getting started

Run the following command to try this example locally:

```bash
npx create-liveblocks-app@latest --example nextjs-linear-like-issue-tracker --api-key
```

This will download the example and ask permission to open your browser, enabling
you to automatically get your API key from your
[liveblocks.io](https://liveblocks.io) account.

### Setting up webhooks

You need to set up webhooks to use all features in this example.

- Follow our guide on
  [testing webhooks locally](https://liveblocks.io/docs/guides/how-to-test-webhooks-on-localhost),
  making sure to
  [check the “**commentCreated**” and “**storageUpdated**” events](https://liveblocks.io/docs/platform/webhooks#edit-endpoint-events)
  when creating the webhook
- In the webhooks dashboard, point to the `/api/liveblocks-webhook` path
- Copy your **webhook secret key** from the webhooks dashboard
- Add your webhook secret key to `.env.local` as the
  `LIVEBLOCKS_WEBHOOK_SECRET_KEY` environment variable

### Setting up Anthropic

You need your own Anthropic API key to run the AI agent.

- Create an account on [Anthropic](https://anthropic.com)
- Create a new API key from the
  [Anthropic Dashboard](https://platform.claude.com/settings/keys)
- Add your Anthropic API key to `.env.local` as the `ANTHROPIC_API_KEY`
  environment variable

### Manual setup

<details><summary>Read more</summary>

<p></p>

Alternatively, you can set up your project manually:

- Install all dependencies with `npm install`
- Create an account on [liveblocks.io](https://liveblocks.io/dashboard)
- Copy your **secret** key from the
  [dashboard](https://liveblocks.io/dashboard/apikeys)
- Create an `.env.local` file and add your **secret** key as the
  `LIVEBLOCKS_SECRET_KEY` environment variable
- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)

### Dev server setup

<details><summary>Read more</summary>

<p></p>

You can optionally run this example locally using the
[Liveblocks dev server](https://liveblocks.io/docs/tools/dev-server).

- Install the example as detailed above
- Run `npx liveblocks dev` to start the server
- Add `baseUrl: "http://localhost:1153"` option to `LiveblocksProvider` and
  `new Liveblocks`
- Replace `secret` in `new Liveblocks` with `"sk_localdev"`
- Run `npm run dev` and go to [http://localhost:3000](http://localhost:3000)

</details>

### Deploy on Vercel

<details><summary>Read more</summary>

<p></p>

To both deploy on [Vercel](https://vercel.com), and run the example locally, use
the following command:

```bash
npx create-liveblocks-app@latest --example nextjs-linear-like-issue-tracker --vercel
```

This will download the example and ask permission to open your browser, enabling
you to deploy to Vercel.

</details>

### Develop on CodeSandbox

<details><summary>Read more</summary>

<p></p>

After forking
[this example](https://codesandbox.io/s/github/liveblocks/liveblocks/tree/main/examples/nextjs-linear-like-issue-tracker)
on CodeSandbox, create the `LIVEBLOCKS_SECRET_KEY` environment variable as a
[secret](https://codesandbox.io/docs/secrets).

</details>

## Related Templates

### [Platforms Starter Kit](https://vercel.com/templates/next.js/platforms-starter-kit)

Next.js template for building multi-tenant applications with the App Router and Redis.

### [Liveblocks Tldraw Whiteboard](https://vercel.com/templates/next.js/liveblocks-tldraw-whiteboard)

A collaborative tldraw-like whiteboard built with Liveblocks Storage and Next.js.

### [Liveblocks Notion-like AI Editor](https://vercel.com/templates/next.js/liveblocks-notion-like-ai-editor)

A Notion-like collaborative text editor with AI features built with Liveblocks, Lexical, Vercel AI SDK, and Next.js.

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.