Copilot Studio : A Hosted Visual AI Workspace for GitHub Copilot CLI

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

Live application
I built Copilot Studio, a hosted visual AI workspace that transforms GitHub Copilot CLI into a structured browser-based development environment.

Copilot Studio allows developers to log in using GitHub OAuth, select their repositories, run AI-powered commands, preview code changes visually, and push updates directly to GitHub — all without using the terminal.

The goal of this project was to move AI-assisted development from a terminal-only experience into a secure SaaS platform where AI output becomes visible, reviewable, and safe before changes are applied.

Problem it solves:

GitHub Copilot CLI is powerful but terminal-first. Developers lack structured visibility into AI-generated changes, history tracking, and collaborative workflow control. Copilot Studio introduces a full dashboard that wraps Copilot CLI workflows into a modern interface.

System Architecture Overview:

Authentication and GitHub Access:

GitHub OAuth handles login.
Users grant repo scope access.
Short-lived sessions are created.
Tokens are stored securely in httpOnly cookies.

Backend Architecture:

Node.js API layer orchestrates Copilot CLI execution.
OAuth tokens validated on every request.
CLI agents run isolated per user session.
Streaming responses send AI output to the frontend in real time.

Key API Routes:

/api/auth/github
/api/repos
/api/copilot/execute
/api/copilot/stream
/api/session/history

Frontend Architecture:
Built with Next.js App Router, React, TypeScript, Tailwind CSS, Framer Motion, and Zustand.

Core UI components:
layout/
Sidebar.tsx
Header.tsx
MainLayout.tsx

panels/
CommandPanel.tsx
OutputConsole.tsx
DiffViewer.tsx
ActivityTimeline.tsx
FileExplorer.tsx
GitPanel.tsx

features/
LoginPage.tsx
RepositorySelector.tsx
CompactFileSelector.tsx

Application Workflow:

User signs in with GitHub OAuth.
Dashboard loads repositories and branches.
User selects a file from the explorer.
AI command is executed through backend CLI agents.
Output streams live into a terminal-style console.
Diff viewer shows before and after changes.
User applies or rejects updates and pushes to GitHub.

AI Command System:

Generate
Explain
Fix
Refactor
Test
Document

Security Design:

Short-lived sessions.
Rate limiting.
OAuth validation on all API requests.
No permanent token storage.
Isolated execution environments for multi-user safety.

Project Structure:
src/
├── app/api/
│ ├── auth/
│ ├── copilot/
│ └── repos/
├── components/
│ ├── layout/
│ ├── panels/
│ └── features/
├── stores/
├── types/
└── lib/

Below is the exact master prompt used to architect Copilot Studio with GitHub Copilot CLI:

gh copilot suggest "Act as a senior product designer, staff full-stack engineer, and cloud AI developer-experience architect.

Design a hosted SaaS product called Copilot Studio.

Copilot Studio is a Visual AI Workspace that allows developers to run GitHub Copilot CLI on their repositories through a browser instead of a terminal. The purpose of this product is to solve the problem that Copilot CLI currently runs only in a terminal without visibility, history, or safe control of AI changes.

WHAT THIS PRODUCT MUST DO:

- Developers authenticate using GitHub OAuth.
- They select one of their repositories.
- They type AI commands in a visual dashboard instead of terminal commands.
- The backend executes Copilot CLI securely on server-side agents.
- The UI streams AI output live.
- The UI shows file diffs so users can preview changes before applying them.
- Every action is tracked in an activity timeline.
- Multiple users can use the SaaS at the same time safely with isolated sessions.

=====================
1. AUTHENTICATION & GITHUB ACCESS
=====================
- Implement GitHub OAuth login flow.
- Request repo access scope.
- Use short-lived tokens per session.
- Users must be able to select repositories after login.
- Do not permanently store tokens.

=====================
2. BACKEND ARCHITECTURE
=====================
- Node.js backend API responsible for:
  - Validating OAuth tokens.
  - Executing Copilot CLI commands per user session.
  - Creating isolated server-side CLI agents.
  - Preventing cross-user access.
  - Streaming command output to frontend in real-time.
- Include example API routes such as:
  - /api/auth/github
  - /api/repos
  - /api/execute-command
  - /api/session/history

=====================
3. FRONTEND ARCHITECTURE
=====================
Use:
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Framer Motion

Dashboard must include these CORE FEATURES:

- Command Panel
- Live Output Console
- Diff Viewer
- Activity Timeline
- Sidebar Navigation
- Project Header

=====================
4. MULTI-USER SAAS UX FLOW
=====================
Login → Select Repo → Run AI Command → View Live Output → Preview Diff → Apply or Reject Changes.

Users must be able to:
- Undo AI changes.
- Track history.
- Work in isolated sessions.

=====================
5. SECURITY & SESSION HANDLING
=====================
- Validate OAuth tokens on every API request.
- CLI agents must run isolated per user session.
- Limit command execution scope.
- Prevent OS exposure or unsafe shell execution.
- Include recommendations for production safety.

=====================
6. OUTPUT REQUIREMENTS
=====================
Provide:

- Full frontend + backend folder structure.
- Component hierarchy with file paths.
- Example TypeScript interfaces.
- Example API route implementations.
- Session flow explanation.
- Developer workflow explanation.

=====================
7. DEVELOPER EXPERIENCE GOAL
=====================
Architecture must be modular, scalable, and easy to extend.
Clearly separate:
- frontend UI
- backend API
- server CLI agents.

Respond as a COMPLETE TECHNICAL BLUEPRINT explaining exactly how to build this hosted SaaS Copilot Studio so that other developers can use it online without cloning any repository."

Demo

Live Application:
https://copilot-studio-seven.vercel.app

Video Walkthrough:
https://www.loom.com/share/97a6837042f34744a75f34a39051df50

How to access the dashboard:

Open the live application.
Click Sign in with GitHub.
Authorize repository access.
Your dashboard loads with your repositories.
Select a repo, choose a file, and start running AI commands.

My Experience with GitHub Copilot CLI

GitHub Copilot CLI changed the way I approached building this project. Instead of focusing on isolated components, I used it to design the entire SaaS architecture first.

It helped translate a high-level vision into a structured system including backend orchestration, frontend dashboard design, and multi-user session handling. Copilot CLI acted more like an architectural collaborator than a simple code generator, enabling rapid iteration of system design and developer workflows.