Tech Bridge Log
Tech BridgeLog
🚀

OpenSpec for Copilot: A VS Code Extension to Accelerate Spec-Driven Development

5 min read

Introducing 'OpenSpec for Copilot', a VS Code extension that powerfully supports Spec-Driven Development on VS Code by combining OpenSpec prompts with GitHub Copilot, including its development background and features.

Are you familiar with Spec-Driven Development (SDD) as a software development methodology utilizing AI? It is an approach where specifications (specs) are clearly defined in advance, and AI generates code based on them.

I have been practicing SDD using tools like Kiro and OpenSpec. Among them, OpenSpec has become indispensable in my development flow due to its flexibility in choosing AI models contracted by myself and the ease of introduction as a CLI tool into existing projects without discomfort. In particular, the process of breaking down vague ideas into structured specifications is very sophisticated and serves as a powerful partner in organizing my thoughts as an engineer.

However, as I used OpenSpec more extensively, I faced some challenges. I felt it was troublesome to copy and paste the format for entering specifications by executing prompts every time, or to input the target to be archived into the GitHub Copilot chat. These tasks distract developers' concentration. With the desire to "eliminate these hassles and use OpenSpec more easily and efficiently," I developed a VS Code extension called "OpenSpec for Copilot".

In this article, I will introduce the development background and features of OpenSpec for Copilot.

What is OpenSpec for Copilot?

OpenSpec for Copilot is a VS Code extension that powerfully supports Spec-Driven Development on VS Code by combining OpenSpec prompts with GitHub Copilot.

By seamlessly integrating OpenSpec's "power to structure from requirement definition to task breakdown" and GitHub Copilot's "code generation capability," developers can minimize context switching and focus on implementation.

summary

Key Features

OpenSpec for Copilot mainly provides the following features.

1. Spec Management

You can visually manage project specifications (specs) on VS Code.

  • Create Spec: Executing OpenSpec for Copilot: Create New Spec from the command palette opens a creation dialog. Here, you enter the overview, product context, and constraints.
  • Generation by Copilot: The input information is converted into an optimized OpenSpec prompt and automatically sent to GitHub Copilot Chat. This generates Requirements, Design, and Tasks.
  • View Specs: Generated specs are listed in the dedicated "Specs" view and are easily accessible.

2. Task Execution Support

The generated tasks.md file lists the tasks to be implemented. This extension links this task list with Copilot.

  • CodeLens Feature: When you open tasks.md, a "Start Task" CodeLens is displayed above each task.
  • Start Implementation: Clicking this launches GitHub Copilot Chat with the context of that task (related requirements and design information) included. Developers can proceed with code implementation directly through the chat.

3. Prompt Management

Project-specific prompts and instruction documents can also be managed in the VS Code Explorer.

  • Custom Prompts: Markdown files under the .github/prompts directory are recognized as prompts.
  • Project Instructions: Files placed in .github/instructions or .github/agents are also displayed in the tree view as "Project Instructions". These can be managed as reusable instructions and called upon as needed.
  • Context Menu: You can execute prompts directly from the tree view, or rename and delete files.

How to Install

To use OpenSpec for Copilot, the following preparations are required.

Prerequisites

Installation Steps

  1. Install OpenSpec:
    Execute the following command in the terminal to globally install OpenSpec.

    shell
    npm install -g @fission-ai/openspec@latest
    
  2. Initialize Project:
    Execute the initialization command in the root directory of the project you want to use.

    shell
    openspec init
    
  3. Install Extension:
    Search for "OpenSpec for Copilot" in VS Code Marketplace and install it.

Basic Workflow

The actual development flow is as follows.

  1. Create a Spec:
    Click "Create New Spec" from the "Specs" view and enter the context of the feature you want to create. When you press the "Create Spec" button, Copilot Chat starts and begins generating the specification document.

    image-create-spec

  2. Implement Tasks:
    Open the generated tasks.md and click "Start All Tasks" for the task you want to implement. Since the chat starts with Copilot understanding the content of the task, you can smoothly enter coding.

    image-start-all-task

  3. Archive Changes:
    Completed specs (Changes) can be moved to the archive by selecting "Archive Change" from the context menu on the view. This allows you to immediately start working on the next task.

    archive

Summary

OpenSpec for Copilot was developed with the aim of improving the development experience by multiplying the structured approach of OpenSpec, which I trust, with the convenience of GitHub Copilot.

By automating "cumbersome context management" such as prompt management and context passing, developers can spend more time on thinking about "what value to create" and actual coding, which they should originally focus on.

If you are interested in Spec-Driven Development or want to use GitHub Copilot more effectively, please give it a try.

Also, since this extension is under development, we welcome feedback from everyone. Please send feature requests and bug reports to GitHub Issues, and if you like it, a review on VS Code Marketplace or a star on GitHub would be encouraging.

References

Related Articles