Ticket Implementer

A web application that uses GitHub Copilot SDK to automatically implement Azure DevOps tickets. Paste a ticket URL, review the AI-generated implementation plan, and let Copilot write the code for you.

Features

Fetch Azure DevOps Tickets - Parse ticket details from any Azure DevOps work item URL
AI-Generated Plans - Generate implementation plans using GitHub Copilot
Plan Refinement - Refine plans with natural language feedback or edit directly
Multi-Model Support - Choose from multiple models including Claude, GPT, and Gemini
Flexible Repository Options - Clone from Azure DevOps or use an existing local folder
Real-time Streaming - Watch implementation progress with Server-Sent Events
Code Refinement - Refine implemented code with AI-powered feedback
Post-Implementation Tasks - Run tests, linting, or custom commands before committing
Automatic PR Creation - Creates a pull request with all changes (for remote repos)
CLI Tool - Optional command-line interface with interactive chat for fetching tickets

Architecture

┌─────────────────┐     HTTP/SSE      ┌─────────────────┐
│   React + Vite  │ ◄───────────────► │  Express Server │
│    Frontend     │                   │    Backend      │
└─────────────────┘                   └────────┬────────┘
                                               │
                                      ┌────────▼────────┐
                                      │  Copilot SDK    │
                                      │  + Azure DevOps │
                                      └─────────────────┘

Prerequisites

Node.js 18+
GitHub Copilot CLI - Must be installed and in your PATH
GitHub Copilot Subscription - Active subscription linked to your GitHub account
Azure DevOps Account - (Optional) For fetching tickets and using remote repositories

Setup

1. Clone the repository

git clone https://github.com/your-username/ticket-implementer.git
cd ticket-implementer

2. Install dependencies

# Install server dependencies
npm install

# Install UI dependencies
cd ui && npm install && cd ..

3. (Optional) Create an Azure DevOps Personal Access Token

Only required if you want to:

Fetch tickets from Azure DevOps
Clone repositories from Azure DevOps
Create pull requests in Azure DevOps

To create a PAT:

Go to your Azure DevOps organization's token settings:

https://dev.azure.com/{your-org}/_usersSettings/tokens

Click New Token and configure:
- Name: ticket-implementer
- Expiration: Set as appropriate
- Scopes: Select Custom defined, then enable:
  - Work Items → Read
  - Code → Read & Write
Click Create and copy the token

4. Configure environment variables

cp .env.example .env

Edit .env and add your PAT (if using Azure DevOps):

ADO_PAT=your-personal-access-token-here

Note: You can use the application without an Azure DevOps PAT by working with local folders instead of remote repositories.

5. Authenticate with GitHub Copilot

github-copilot-cli auth

Follow the prompts to authenticate with your GitHub account.

Running the Application

Start the backend server

npm run server
# or
npx tsx server/index.ts

The server runs on http://localhost:3001

Start the frontend (in a separate terminal)

cd ui
npm run dev

The UI runs on http://localhost:5173

Open the application

Navigate to http://localhost:5173 in your browser.

Usage

Web Application (Recommended)

Enter Ticket URL - Paste an Azure DevOps work item URL (e.g., https://dev.azure.com/org/project/_workitems/edit/123)
- Or skip this and manually enter a description
Choose Repository Source:
- Remote (Azure DevOps): Enter repository URL to clone
- Local Folder: Browse and select an existing local folder
Review Implementation Plan - The AI generates a summary and step-by-step plan
- Edit the plan directly if needed
- Use the "Refine Plan" feature to adjust with natural language feedback
- Update the plan by modifying the text directly
Select Model - Choose which AI model to use for implementation
Configure Post-Tasks (optional) - Select tasks to run after implementation:
- Run tests
- Build project
- Run linter
- Custom commands
Approve & Implement - Watch as Copilot implements the changes in real-time
- View streaming updates as code is written
- See tool execution progress
Review & Refine:
- View the diff of all changes made
- Use "Refine Code" to make AI-powered adjustments
- Commit and push changes (or create PR for remote repos)

CLI Tool (Optional)

For a simpler interactive experience, use the CLI:

npx tsx index.ts

Features:

Interactive chat interface
Fetch Azure DevOps tickets by pasting URLs
Get weather information (demo tool)
Powered by GPT-4.1 with streaming responses

Project Structure

├── server/
│   ├── index.ts              # Express server entry point
│   ├── routes/
│   │   └── ticket.ts         # API routes for ticket operations
│   └── services/
│       └── copilot.ts        # Copilot SDK service wrapper
├── ui/
│   ├── src/
│   │   ├── App.tsx           # Main React application
│   │   ├── components/       # React components
│   │   │   ├── TicketInput.tsx
│   │   │   ├── PlanReview.tsx
│   │   │   ├── Implementation.tsx
│   │   │   └── InstructionSelector.tsx
│   │   └── main.tsx
│   ├── package.json
│   └── vite.config.ts
├── utils/
│   ├── azure-devops.ts       # Azure DevOps API client
│   └── azure-devops-git.ts   # Git operations & PR creation
├── index.ts                  # CLI tool (standalone)
├── package.json
└── .env                      # Environment configuration

API Endpoints

Endpoint	Method	Description
`/api/health`	GET	Health check endpoint
`/api/ticket/fetch`	POST	Fetch ticket details from Azure DevOps
`/api/ticket/plan`	POST	Generate implementation plan from ticket
`/api/ticket/refine`	POST	Refine plan with AI feedback
`/api/ticket/update-plan`	POST	Update plan with direct edits
`/api/ticket/clone`	POST	Clone repository from Azure DevOps
`/api/ticket/use-local`	POST	Use existing local folder
`/api/ticket/browse-folder`	GET	Browse local filesystem
`/api/ticket/implement`	POST	Execute implementation (SSE stream)
`/api/ticket/refine-code`	POST	Refine implemented code with AI
`/api/ticket/diff`	GET	Get git diff of changes
`/api/ticket/commit-push`	POST	Commit and push changes
`/api/ticket/create-pr`	POST	Create pull request in Azure DevOps
`/api/ticket/current`	GET	Get current ticket and plan state
`/api/ticket/repo-info`	GET	Get current repository information
`/api/ticket/shared-instructions`	GET	List available shared instructions
`/api/ticket/copy-instructions`	POST	Copy selected instructions to workspace
`/api/ticket/cleanup-instructions`	POST	Remove temporary instruction files
`/api/ticket/discuss`	POST	Discuss the plan with AI (Q&A)
`/api/ticket/discussion-history`	GET	Get current discussion history
`/api/ticket/clear-discussion`	POST	Clear discussion history
`/api/ticket/discuss-implementation`	POST	Discuss implementation code with AI
`/api/ticket/implementation-discussion-history`	GET	Get implementation discussion history
`/api/ticket/clear-implementation-discussion`	POST	Clear implementation discussion

Environment Variables

Variable	Description	Required
`ADO_PAT`	Azure DevOps Personal Access Token	Only for Azure DevOps features
`SHARED_INSTRUCTIONS_REPO`	URL to shared instructions repository	No
`PORT`	Server port (default: 3001)	No

Custom Instructions & Skills

This application loads custom instructions from repositories and injects them into Copilot sessions.

Note: The SDK does not auto-discover instructions - our code handles this manually.

How It Works

When workingDirectory is set, the application:

Loads all *.instructions.md files from .github/instructions/
Injects them into the session via systemMessage

Location	Handling
`.github/instructions/*.instructions.md`	Loaded and injected automatically
`.github/skills/`	Configured via `skillDirectories`

Creating Instruction Files

Create instruction files in .github/instructions/ with the .instructions.md extension:

---
applyTo: "**.ts, **.tsx"
description: "Coding standards for this project"
name: "Project Standards"
---

## Rules

- Use strict TypeScript mode
- Write tests for all new features
- Follow the existing code style

Instructions are automatically applied when the working directory is set during:

Plan generation
Plan refinement
Implementation

For detailed documentation on custom instructions, skills, and MCP servers, see docs/COPILOT-SDK-CUSTOMIZATION.md.

Shared Instructions Library

You can configure a central Azure DevOps repository to share instruction files across projects. This allows teams to maintain a library of reusable coding standards, best practices, and project-specific guidelines.

Setup

Create a repository in Azure DevOps to store shared instructions
Create an /instructions folder in the repository root
Add instruction files with the .instructions.md extension
Set the SHARED_INSTRUCTIONS_REPO environment variable:

SHARED_INSTRUCTIONS_REPO=https://dev.azure.com/your-org/your-project/_git/shared-instructions

Repository Structure

shared-instructions/
└── instructions/
    ├── reactjs.instructions.md
    ├── typescript.instructions.md
    ├── testing-best-practices.instructions.md
    └── security-guidelines.instructions.md

How It Works

After cloning/selecting a repository, you'll see a "Shared Instructions" selector
Browse and search available instructions from your central repository
Select the instructions relevant to your current task
Selected instructions are temporarily copied to the workspace's .github/instructions/ folder
The AI uses these instructions when generating plans and implementing code
Instructions are automatically cleaned up when you click "Done"

Key Features

Search & Filter: Quickly find instructions by name or filename
Conflict Detection: Instructions already in the workspace are marked and skipped
Non-Destructive: Temporary files don't appear in git diff or get committed
Visual Indicators: Selected instructions appear as pills for easy reference

Figma Integration

The application automatically detects Figma links in ticket descriptions and integrates with Figma MCP for design-driven implementation.

How It Works

When you fetch an Azure DevOps ticket, the application scans the description for Figma URLs
If a Figma link is found, it's displayed prominently in the ticket details
The Figma URL is automatically included in the AI prompts for:
- Plan generation (AI analyzes the design)
- Plan refinement
- Implementation (AI uses Figma MCP to extract design details)

Supported Figma URL Formats

https://www.figma.com/file/...
https://www.figma.com/design/...
https://www.figma.com/proto/...
https://figma.com/file/... (without www)

Setting Up Figma MCP

The application automatically connects to Figma's remote MCP server (https://mcp.figma.com/mcp) when a Figma URL is detected. To use it:

First-time setup: When the AI attempts to access Figma, you'll be prompted to authenticate via OAuth in your browser
Authorize access: Log in to your Figma account and authorize the MCP server to access your designs
Done: Once authenticated, the AI can access your private Figma files

The OAuth authentication is handled by Figma's MCP server - no API keys or tokens need to be configured manually.

Once authenticated, the AI will be able to:

Fetch design specifications from Figma files (including private designs)
Extract colors, typography, and spacing
Understand component hierarchies
Implement designs that match the Figma specifications exactly

Adding Figma Links to Tickets

Include Figma links anywhere in your Azure DevOps ticket description:

Implement the new dashboard widget as shown in the design:
https://www.figma.com/design/abc123/Dashboard-Redesign

Requirements:
- Match the layout exactly
- Use the specified color palette
- Implement responsive breakpoints

How It Works

Architecture Flow

Frontend (React + Vite): User interface for ticket input, plan review, and implementation monitoring
Backend (Express): REST API server that orchestrates the workflow
Copilot SDK: Interfaces with GitHub Copilot CLI to generate plans and implement code
Azure DevOps APIs: (Optional) Fetch ticket details and manage repositories

Implementation Process

User provides ticket details (from Azure DevOps or manual entry)
Copilot generates an implementation plan based on ticket description
User reviews and optionally refines the plan
Repository is prepared (cloned from remote or using local folder)
Copilot implements the plan using streaming responses
Post-implementation tasks are executed (tests, linting, etc.)
Changes are reviewed, refined if needed, and committed
Pull request is created (for remote repositories)

Key Technologies

@github/copilot-sdk: Node.js SDK for GitHub Copilot
Express: Web server framework
React: Frontend UI library
Vite: Frontend build tool and dev server
TypeScript: Type-safe development
Server-Sent Events (SSE): Real-time streaming updates

Troubleshooting

"ADO_PAT environment variable is not set"

This is only required if using Azure DevOps integration
You can still use the app with local folders without a PAT
If you need Azure DevOps features, create a .env file with your PAT token

"Failed to clone repository"

Verify your PAT has Code > Read & Write permissions
Ensure the repository URL is correct
Alternative: Use "Local Folder" mode instead

"Copilot authentication failed"

Run github-copilot-cli auth to authenticate
Ensure you have an active GitHub Copilot subscription
Check that github-copilot-cli is in your PATH

Server won't start

Check that port 3001 is available (or set PORT in .env)
Ensure all dependencies are installed: npm install
Check for any error messages in the console

UI won't connect to server

Ensure the backend server is running on http://localhost:3001
Check browser console for CORS or network errors
Verify the Vite dev server is running on port 5173

License

MIT

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
.agents/skills		.agents/skills
.github		.github
docs		docs
server		server
ui		ui
utils		utils
.env.example		.env.example
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
index.ts		index.ts
package-lock.json		package-lock.json
package.json		package.json
test-ado.ts		test-ado.ts

Folders and files

Latest commit

History

Repository files navigation

Ticket Implementer

Features

Architecture

Prerequisites

Setup

1. Clone the repository

2. Install dependencies

3. (Optional) Create an Azure DevOps Personal Access Token

4. Configure environment variables

5. Authenticate with GitHub Copilot

Running the Application

Start the backend server

Start the frontend (in a separate terminal)

Open the application

Usage

Web Application (Recommended)

CLI Tool (Optional)

Project Structure

API Endpoints

Environment Variables

Custom Instructions & Skills

How It Works

Creating Instruction Files

Shared Instructions Library

Setup

Repository Structure

How It Works

Key Features

Figma Integration

How It Works

Supported Figma URL Formats

Setting Up Figma MCP

Adding Figma Links to Tickets

How It Works

Architecture Flow

Implementation Process

Key Technologies

Troubleshooting

"ADO_PAT environment variable is not set"

"Failed to clone repository"

"Copilot authentication failed"

Server won't start

UI won't connect to server

License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages