DEV Community: Edun Yusuf Aderogba

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

Edun Yusuf Aderogba — Wed, 11 Feb 2026 16:53:04 +0000

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.

Team Submissions: @volde

PayFlow —First Payment Management System Submission for the Xano AI-Powered Backend Challenge

Edun Yusuf Aderogba — Sat, 13 Dec 2025 20:58:24 +0000

This is a submission for the Xano AI-Powered Backend Challenge: Full-Stack, AI-First Application

What I Built

PayFlow is a modern, AI-first payment management system that allows users to:

Create accounts and authenticate securely

Manage digital wallets

Top up balances using real Stripe payments (test mode)

Send money to other users instantly

Track transactions with a full audit trail

Operate in a multi-account/team environment

The problem PayFlow solves is building a scalable, production-ready payment backend quickly, while still applying human engineering judgment on security, data modeling, and workflows.

Instead of relying purely on AI output, I used XanoScript to generate an initial backend, then refined and hardened it inside Xano to meet real-world payment and security expectations.

Demo

🔗 Live App:
Payflow system

Test Credentials
``
Email: demo@example.com
Password: password123

Stripe test card
4242 4242 4242 4242

Expiry date:

Any future date (e.g. 12 / 34)

CVC:

Any 3 digits (e.g. 123)

ZIP / Postal code:

Any 5 digits (e.g. 10001)
`

The AI Prompt I Used

`
Generate a backend system for an AI-enhanced Wallet & Payment Platform using Stripe.

Include the following:

Database Tables:

Users (Auth-enabled)
Accounts (team/multi-user support)
Wallets: user_id, balance, status, created_at
Transactions: wallet_id, type (credit/debit), amount, status, reference, description, created_at
Transfers: from_wallet_id, to_wallet_id, amount, status, description, created_at
Event Logs: user_id, account_id, action, metadata, created_at

API Endpoints:

User authentication (signup, login, me)
Create and fetch wallets
Create Stripe payment flow to top up wallet balance
Process Stripe payment and record transactions
Transfer money between wallets
Fetch transaction history
Account and team management
Event logging for auditing actions

Logic Requirements:

Secure JWT authentication
Input validation for all monetary values
Prevent negative balances
Create pending transactions before confirmation
Update transaction status on success or failure
Stripe API integration with environment variables
Clean, modular backend logic with comments

Output:

All database schemas
API endpoints with example logic
Secure and maintainable structure

How I Refined the AI-Generated Code

After importing the generated backend into Xano, I manually refined and hardened it to make it production-ready.

🔧 Key Improvements I Made

Database Normalization

Before (AI-generated):

Loose field typing

No clear status enums

Redundant relationships

After (Refined):

Strongly typed fields (decimal balances, enums for status)

Clear wallet → transaction → transfer relationships

Centralized EVENT_LOG table for auditing

Secure Payment Flow

Before:

Direct charge logic without full validation

After:

Stripe tokenization via frontend

Backend-only Stripe secret usage

Explicit success/failure handling

Wallet credited only after verified payment

Transaction references stored for traceability

Wallet & Transfer Safety

Before:

Basic debit/credit logic

After:

Balance checks before transfers

Atomic wallet updates

Sender + receiver transaction records

Clear transfer lifecycle (pending → completed)

Event Logging & Audit Trail

Before:

No reliable audit history

After:

Centralized EVENT_LOG

Every critical action logged (payment, transfer, login)

Enables observability and debugging

Cleanup & Maintainability

Removed unused AI-generated agent tables

Deleted non-existent endpoints

Consolidated documentation into:

My Experience with Xano

Xano made it possible to move from idea → production-grade backend extremely fast.

What stood out most:

XanoScript AI generation saved hours of boilerplate work
Visual workflows made logic easy to reason about
Built-in auth, background jobs, and integrations simplified complex flows
Refining AI output inside Xano felt natural and powerful

Challenges & Learnings

While working with the XanoScript extension inside VS Code, I learned that backend generation is not a live-sync process.

The AI-generated output serves as a starting blueprint, but API groups and endpoint wiring must be finalized inside the Xano dashboard. I had to manually create API groups and attach refined logic to ensure correct authentication, validation, and Stripe handling.

Additionally, the API base URL changed during iteration due to Xano’s environment-based deployment and API versioning model. This required updating frontend environment variables during testing, reinforcing the importance of environment management in real production systems.

This process highlighted the distinction between AI-assisted generation and human-led system refinement, which ultimately resulted in a more secure and maintainable backend.

Tech Stack Summary
Frontend

Next.js 16 (Turbopack)

React 19

Tailwind CSS + shadcn/ui

Stripe.js & React Stripe Elements

React Hook Form + Zod

Deployed on Vercel

Backend

Xano (Database, Auth, APIs, Logic)

XanoScript (AI backend generation)

Stripe API (test mode)

JWT Authentication

RESTful architecture

PayFlow demonstrates how AI-generated backend code can be transformed into a secure, scalable, real-world payment system through thoughtful refinement using Xano.

Thanks to the Xano team for building such a powerful platform

<!-- Team Submissions: @volde @walidadebayo

Office Edition Animated Frontend HomePage for Axero

Edun Yusuf Aderogba — Sun, 13 Jul 2025 08:48:32 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

I created a modern intranet homepage that feels alive — built with React, Tailwind CSS, and Framer Motion to deliver a workspace that's both functional and visually striking.

✨ Highlights:

Gemini AI assistant integration for chat-based interactions
React Bit for lightning-themed animated background effects ⚡
Giphy + Unsplash APIs used creatively for dynamic, mood-driven visuals
Clean UI with smooth Framer Motion transitions and micro-interactions

The result? A responsive digital HQ that feels as engaging as your favorite productivity app — with a bit of flair!

Demo

🎬 Video Demo

https://youtu.be/fJ75jUl4qK4

🌐 Live Site

https://axero.vercel.app/

📂 Code on GitHub

https://github.com/VoldeDoc/axero

🖼️ Cover Image

Journey

This project pushed me to blend interactivity, animation, and AI-powered features into a cohesive, work-ready dashboard. Some challenges I enjoyed tackling:

Animating widgets with Framer Motion for a smooth, non-distracting UI
Integrating AI (Gemini) to simulate real assistant functionality
Using React Bit to bring the background to life with animated lightning ⚡
Pulling dynamic content from Giphy and Unsplash to make the UI feel more human and expressive

🏆 Why This Project Stands Out

📌 Based on the "Homepage" Prompt

This project is built around the Homepage challenge idea — the first screen employees see when they log in. I designed it to serve as a centralized hub for everything: updates, tools, quick access links, and even a bit of personality. The layout was intentionally structured to:

Greet users with a dynamic welcome section (includes animated background ⚡)
Offer smart assistant help via Gemini AI integration
Display daily productivity tools like calendar, announcements, and quick links
Encourage interaction with dynamic Giphy/Unsplash visual modules

It’s not just a landing page — it’s the heartbeat of the workspace.

🎨 Custom Theme Setup

I implemented a custom theme system using Tailwind CSS utility classes and dark/light mode-aware elements, giving the intranet a modern, consistent look. Highlights include:

Modular design system with shared styles for spacing, cards, shadows, and colors
Reusable text/icon components with hover effects and motion cues
Themed widget zones that allow for easy scalability and adaptation to other teams or companies
Background animation powered by React Bit, simulating ambient motion (lightning/electric theme)

The result gives the interface a polished, professional look — while still feeling vibrant and alive.

🧩 Components That Power the Experience

This project is built around well-structured, reusable React components to ensure maintainability and a clean codebase. Some of the core components include:

Component	Purpose
`HeroSection`	Visually rich intro section with animated text, a carousel of Unsplash images, glitch effects, wave transitions, scroll-reactive scaling, and particle effects
`ChatButton`	AI assistant powered by Gemini AI, available 24/7 via floating widget
`Testimonials` & `TestimonialsCards`	Showcase user trust and stories
`PlatformOverview`	Quick summary of tools and values
`IntegrationsShowcase`	Carousel-style module showing supported workplace integrations
`CopilotShowcase`	Teaser for smart productivity tools
`SecurityHighlight`	Security-focused value props
`MobileAppShowcase`	Emphasizes accessibility across devices

Every piece was designed to feel lightweight yet powerful, using Framer Motion to deliver seamless, engaging animations that enhance user experience without overwhelming it.

💫 HeroSection: A Motion-Driven Introduction

The HeroSection alone encapsulates the personality of the intranet and acts as a storytelling moment on first load. Features include:

🎠 Auto-rotating Unsplash image carousel to reflect real-world team moments
🧠 Smart animated text reveals including:
- Letter-by-letter spring-based entrance
- Word-by-word wave-style animations
- Dynamic glitch effects on keywords
🎨 Ambient particle field and animated gradient background, giving a sense of energy and motion
⚡ React Bit integration to simulate ambient lightning and interactive lighting effects
📊 Live stats with animated counters and hoverable interaction
🎯 Call-to-action buttons with layered hover states, flowing gradients, and spring transitions
🧭 Scroll-based scaling and parallax on the heading and hero image to create depth and responsiveness

With careful attention to animation timing, scroll physics, and responsive layering, this section sets the tone for the rest of the site — energetic, polished, and intuitive.

💡 Built for Delight and Productivity

What makes this intranet homepage special is the balance between form and function:

Visual delight from Framer Motion animations and background effects
Real utility through Gemini-powered AI chat, quick tools, and a modular layout
Team-first focus, using testimonials and integrations to represent real workplace use

Thanks again to DEV and Axero for the opportunity — this was an exciting blend of tech + motion + UX thinking. I truly enjoyed building this!

[Boost]

Edun Yusuf Aderogba — Sat, 07 Jun 2025 14:38:06 +0000

Edun Yusuf Aderogba

Jun 7 '25

Inbox-as-Art Voice-Powered AI Art & Email Creativity Postmark Challenge

#devchallenge #postmarkchallenge #webdev #api

Comments 2

2 min read

Inbox-as-Art Voice-Powered AI Art & Email Creativity Postmark Challenge

Edun Yusuf Aderogba — Sat, 07 Jun 2025 14:10:20 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

Inbox-as-Art is a creative email-driven application that turns everyday communication into AI-generated poetry, short stories, and visual artwork. It fuses the artistic potential of AI with the simplicity of voice input and the magic of email.

This project was built for the Postmark Inbox Innovators Challenge and leverages Postmark's email services for notifications, welcome emails, and device access alerts.

✨ Key Features

🔐 Signup & Login
Users can create an account or log in as a demo user to explore the platform.
📩 Postmark-Driven Emails
- Welcome email on signup
- Alert email for new device login attempts
- Notifications for new artwork shared
🔔 Subscription System

Users can subscribe to receive new AI-generated poems, stories, and images via email.
🧠 Generative AI Creativity
- Use voice or text to generate:
- A 2–4 line poem
- A short paragraph story
- An AI-generated image
- Created content is emailed to all subscribers.
🗣️ Voice Input (Web Speech API)

Users can speak their ideas, review the transcription, and submit — hands-free and intuitive.
🖼️ Live Art Wall

Explore all generated content (text and images) in a beautiful, real-time public gallery.
🛑 Unsubscribe Option

Subscribers can opt out easily from receiving future artworks.

Demo

🔗 Live App: Inbox Voice AI Art
🧪 Demo Login: Use the “Demo Login” button on the homepage to explore instantly.
or you can signup receive email welcome from postmark and the login to start using

Code Repository

Github repository

How I Built It

🧩 Tech Stack

Email Handling: Postmark
Used for:
- Welcome emails
- New device alerts
- Art delivery to subscribers
AI Generation:
- Gemini AI for poetry, story, and image prompts
- Voice transcription using Web Speech API
Database:
- Supabase, subscriptions, and artwork records
- Progressive storage for efficient data handling
Image Hosting:
- Vercel Blob for storing and retrieving generated AI artworks
Frontend:
- Next.js with TailwindCSS
- Real-time updates via polling for the art wall

👥 Team

Built solo by [@volde].

🌅 Why It’s Unique

Inbox-as-Art transforms your inbox into a creative canvas. Instead of transactional messages, users receive little bursts of beauty — AI-crafted poetry, whimsical tales, and expressive artwork — straight from their voices or thoughts.

This is what email would feel like if it were reimagined by an artist. 🎨

📷

Thanks to Postmark for inspiring creativity beyond conventional email workflows!

Automated Code Pull Request Review and Comment Helper. Amazon Q Developer "Quack The Code" Challenge :

Edun Yusuf Aderogba — Sun, 11 May 2025 21:29:13 +0000

🦆 This is a submission for the Amazon Q Developer "Quack The Code" Challenge: Crushing the Command Line

🚀 What I Built

I built an Automated PR Review Helper, a command-line tool that streamlines the pull request review process. This tool automatically:

Fetches open pull requests from a selected GitHub repository
Runs static analysis on code changes using Amazon Q Developer
Generates a summary highlighting:
- Risky or complex code blocks
- Suggested refactors
- Security or performance issues
Posts these insights as automated comments on the pull request

This eliminates the need for manual code review in early stages, helping teams ship code faster and more confidently.

And if you don't want to use the cli you can use the link to the site to review the site so it is both in the cli and on site

🎥 Demo

)

You can also check out a short video walkthrough here:
🎬 YouTube Demo Video

💻 Code Repository

🔗 GitHub Repository - Automated PR Review Helper

Feel free to explore, clone, and run the CLI tool locally. Detailed setup instructions are provided in the README.md.

Here is the link to the dashboard

https://gitcli-tool.vercel.app/

Here is a short video guide

🧠 How I Used Amazon Q Developer

Amazon Q Developer was a core part of this solution. I used it to:

Analyze pull request diffs and modified code sections
Identify code smells, complexity, and refactoring suggestions
Generate AI-powered summaries and comments for developers

The Q CLI helped integrate this analysis directly in the terminal, which I then automated into the review workflow.
This project showcases how Amazon Q Developer can boost developer productivity and improve code quality even before human review starts.

✅ This submission was developed independently.
📚 I am currently a student.