DEV Community

Khôi Nguyễn Vũ
Khôi Nguyễn Vũ

Posted on

Copilot CLI as a Creative Engine: Building My TUI Trilogy

#githubchallenge #devchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

🚀 From Cyberpunk to Zen: A Trilogy of TUI Tools

For this challenge, I didn't just build one tool; I built a trilogy of Terminal User Interface (TUI) applications. My goal was to leverage GitHub Copilot to transform the cold command line into a living, breathing digital ecosystem.

The journey evolved from a rigid, agent-based approach to a fluid, context-engineered workflow. Here is the result of that evolution.

1. ⚡ The Netrunner Deck (Cyberpunk Monitor)

The "High-Friction" Experiment

My first project is a cyberpunk-themed network monitor. It visualizes Docker containers and network connections as a ASCII topology.

  • Matrix Rain effects on the side panels.
  • Deterministic Placement: Nodes use SHA-256 hashing so your infrastructure always looks the same.
  • Live Monitoring: Real-time Docker and network status updates.

2. 🌳 Code Bonsai (Git Visualizer)

The "Freestyle" Experiment

A digital terrarium that transforms your git repository into a growing ASCII bonsai tree:

  • Trunk: Thickness represents lines of code.
  • Leaves: Represent healthy files.
  • Weather: The "sky" changes based on commit activity (sunny for active days, moonlit for dormant ones).
  • Wildlife: "Bugs" appear on branches proportional to linting errors.

3. 🏠 Cozy Cabin (Terminal Wallpaper)

The "Context Engineering" Masterpiece

An interactive terminal background designed for focus and calm. It renders a "digital cabin window" with:

  • Procedural Scenery: Layered mountains and forests with live weather from OpenWeatherMap (clouds, rain, day/night cycles).
  • System Shelf: A unique take on system monitoring where:
    • 🔋 Battery Cat: Naps when discharging, wakes up when plugged in.
    • 🌿 RAM Plant: Wilts if memory usage gets too high.
    • 🔥 CPU Fireplace: Flickers more intensely as your CPU load increases.

🏗️ Architecture & Workflow

The most interesting part of this challenge wasn't just the code, but how my interaction with Copilot changed. I moved from using pre-defined agents to a "Context Engineering" approach.

┌──────────────────────┐      ┌──────────────────────┐      ┌──────────────────────┐
│  Phase 1: Netrunner  │      │  Phase 2: Code Bonsai│      │  Phase 3: Cozy Cabin │
│  (Rigid Agents)      │      │  (Freestyle/Native)  │      │  (Context First)     │
└──────────┬───────────┘      └──────────┬───────────┘      └──────────┬───────────┘
           │                             │                             │
           ▼                             ▼                             ▼
   [Defined Persona]            [Raw Prompts + Models]        [Plan.md + Context]
           │                             │                             │
           ▼                             ▼                             ▼
    (Slow Iteration)             (Fast but Chaotic)           (Rapid & Reliable)
           │                             │                             │
           ▼                             ▼                             ▼
    "It works, but..."            "80% There"                 "90% Ready Code"
Enter fullscreen mode Exit fullscreen mode

🧰 The Tech Stack

While my Copilot workflow changed, my core technology stack remained consistent across all three projects. This constant variable allowed me to truly measure the efficiency gains from my evolving AI strategies.

  • Language: Python 3.12+
  • TUI Framework: Textual (for the reactive interface)
  • Rendering: Rich (for beautiful terminal formatting)
  • Package Manager: uv (for lightning-fast dependency management)
  • APIs & Libraries: Docker SDK, psutil, OpenWeatherMap API

Demo

My Experience with GitHub Copilot CLI

My journey through these three projects wasn't just about building apps—it was an experiment in how to use AI effectively.

Phase 1: The "By the Book" Approach

Time Cost: 2 Days

When I started with The Netrunner Deck, I tried to follow every best practice perfectly. I set up the .github/ configuration and relied on predefined prompt templates.

  • Model Usage: I used Claude Opus 4.5 for both planning and coding.
  • The Bottleneck: It worked, but it was slow and consumed too many premium requests. I eventually had to switch to Sonnet to conserve resources. The overhead of managing the "agents" and setting up rigid context meant I spent more time configuring the AI than coding.

Phase 2: The "Freestyle" Approach

Time Cost: 1 Day

For Code Bonsai, I stripped everything back. I removed the .github/ configuration and just used the native Copilot CLI capabilities.

  • Model Usage: I used Sonnet for planning and Codex for implementation.
  • The Breakthrough: Drastically faster. The tool returned code that was about 80% of what I wanted. It was liberating, but sometimes missed architectural nuance.

Phase 3: The "Context Engineer" Approach

Time Cost: 1 Day

By Cozy Cabin, I found my "sweet spot." I kept the lightweight setup but focused on Plan Review and Context Engineering—manually curating exactly what context the CLI needed before asking it to generate code.

  • Model Usage: I used Codex exclusively, relying on my engineered context to guide it.
  • The Result: This was the peak experience. The output adapted to 90% of my expectations. By focusing on the plan rather than the persona, Copilot became a true extension of my thought process.

Conclusion: The "Greenfield" Flow

Based on this trilogy of experiments, here is my recommended workflow for starting a new project with Copilot CLI:

  1. Plan with Power: Use high-reasoning models like Claude Opus or Gemini Pro to create the initial plan.
  2. Review: Review the plan carefully. Note: The plan is saved in the chat session memory by default, not as a file in the repo, to keep the workspace clean.
  3. Code with Speed: Switch to GPT Codex for implementation. It's faster and follows the context well.
  4. Feedback Loop: Implement the code, check the layout/structure, and provide feedback.
  5. Initialize Context: Use /init to generate project-specific Copilot instructions.
  6. Optimized Instructions: Use the awesome-copilot plugin to find the best agent/instruction/prompt for your specific project type.
  7. Iterate: Return to the planning step for the next feature. Crucial: Update the Copilot instructions frequently to keep the context fresh.
  8. Leverage MCP: Use Model Context Protocol (MCP) tools like Context7 (to check best practices & modern frameworks) and Serena (to optimize context indexing).

The Copilot CLI isn't just a code generator; it's a collaboration engine. My key takeaway is that Plan > Config. A well-structured plan and curated context are far more effective than a heavily configured environment.

📚 References

Top comments (0)