Skip to main content
This guide walks you through installing dependencies and running the GitHub Copilot Agent Toolkit demo application.

​
Prerequisites

You’ll need Bun installed on your machine. The toolkit uses Bun as both the runtime and package manager for optimal performance. 
curl -fsSL https://bun.sh/install | bash

​
Installation

1

Navigate to the web directory

All application code lives under the web/ directory:
cd web
2

Install dependencies

Use Bun to install all required packages:
bun install
This installs the complete stack:
  • Next.js 16 (App Router)
  • React 19
  • shadcn/ui components
  • Tailwind CSS 4
  • TypeScript
  • oxlint/oxfmt for linting and formatting
3

Start the development server

Launch the Next.js dev server:
bun dev
Open http://localhost:3000 in your browser.

​
Project Structure

Once running, you’ll see this file organization: 
web/
├── app/                    # Next.js App Router
│   ├── layout.tsx         # Root layout with theme provider
│   ├── page.tsx           # Home route
│   └── globals.css        # Global styles
├── components/
│   ├── ui/                # shadcn/ui primitives (Button, Card, etc.)
│   ├── blocks/            # Reusable compositions
│   │   └── theme/         # Theme provider and toggle
│   └── lib/
│       └── utils.ts       # cn() helper for className composition
├── features/
│   └── home/
│       └── home-page.tsx  # Feature entry component
└── public/                # Static assets

​
Available Scripts

From the web/ directory: 
bun dev

​
What’s Running?

The demo app showcases a minimal Next.js setup with:
  • Theme Support: Light/dark mode switching via next-themes
  • Component Primitives: Pre-configured shadcn/ui components built on Base UI
  • Tailwind CSS 4: Modern utility-first styling
  • TypeScript: Full type safety across the stack
Here’s the home page component:
web/features/home/home-page.tsx
"use client";

import { Heading } from "@/components/ui/heading";
import Image from "next/image";

export const HomePage = () => {
  return (
    <div className="mx-auto max-w-2xl h-screen flex flex-col justify-center gap-6">
      <Image src="/copilot-cli.svg" alt="Copilot CLI" width={60} height={60} />
      <Heading variant="h1" className="">
        Ship faster. Same team.
      </Heading>
      <p className="text-lg text-muted-foreground text-balance">
        GitHub Copilot Agents and Skills that accelerate modern frontend development.
      </p>
    </div>
  );
};
The app uses the App Router pattern, where route modules (page.tsx) render feature entry components. This keeps routing thin and domain logic organized.

​
Next Steps

Architecture Overview

Understand how agents, skills, and the demo app work together

Build Features

Learn the 3-phase workflow for spec-driven development

Customize UI

Work with shadcn/ui components and Tailwind

State Management

Use Zustand with the decoupled actions pattern

Build docs developers (and LLMs) love

Get started for freeTalk to us