Linear AI Issue Creator

This application allows users to upload images to automatically create Linear issues using Google AI. It analyzes the uploaded images and creates structured Linear issues with titles, descriptions, priorities, and tags.

Features

• Linear OAuth Integration: Securely authenticate with your Linear account
• Image Upload: Upload screenshots, diagrams, wireframes, or any visual content
• AI-Powered Analysis: Uses Google Generative AI to analyze images
• Automatic Issue Creation: Creates structured Linear issues based on image analysis
• Team Selection: Choose which Linear team to create issues for
• No Database Required: Works without any persistent storage

Setup Instructions

Prerequisites

• Node.js 18+ and npm
• A Linear account with admin access to create OAuth applications
• A Google AI API key

Configuration

1. Linear OAuth Setup:

   • Go to your Linear workspace settings
   • Navigate to "API" → "OAuth applications"
   • Create a new OAuth application
   • Set the redirect URI to: http://localhost:3000/api/auth/callback/linear-oauth
   • Copy the Client ID and Client Secret

2. Google AI Setup:

   • Go to the Google AI Studio
   • Get your API key from the settings page

3. Environment Variables: Copy the sample .env.local file and fill in your credentials:

   # Linear OAuth Configuration
   LINEAR_CLIENT_ID=your-linear-client-id
   LINEAR_CLIENT_SECRET=your-linear-client-secret
   LINEAR_REDIRECT_URI=http://localhost:3000/api/auth/callback/linear-oauth
   NEXT_PUBLIC_LINEAR_CLIENT_ID=your-linear-client-id
   
   # NextAuth Configuration
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=generate-a-random-string-here
   
   # Google AI Configuration  
   GOOGLE_API_KEY=your-google-ai-api-key
   
   # App Base URL
   NEXT_PUBLIC_APP_URL=http://localhost:3000
   

Installation

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open http://localhost:3000 in your browser

Usage

1. Sign in with your Linear account
2. Select a team from the dropdown
3. Upload an image (screenshot, diagram, wireframe, etc.)
4. Click "Analyze & Create Issue"
5. View the created issue and AI analysis

Technologies Used

• Next.js 14 with App Router
• TypeScript
• Tailwind CSS
• shadcn/ui components
• Linear SDK
• Google AI SDK

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.