DEV Community

Cover image for Built my first TUI as a web dev and the experience was awesome
Mohamed Ashiq Sultan
Mohamed Ashiq Sultan

Posted on

Built my first TUI as a web dev and the experience was awesome

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built a Terminal UI to ralph loop Github Copilot to automate vibe codeing tasks.

I previously built this as a Desktop app but realized I myself spend most time in terminal so why not build this as a TUI as this be learning experience for me on TUIs

Now since this is available as an NPM package you can try this out easily with

  • npm i -g copilot-ralp
  • cd to your project and run copilot-ralp

Demo

Github

NPM

My Experience with GitHub Copilot CLI

I have used Copilot in VSCode mostly and this is my first time using AI tool in a CLI. I especially liked the Resume feature and the premium request usage metrics we get at the end.

Experience building TUI as a web developer

I have been developing web application for almost a decade and this is my first time trying a TUI.

When thinking which libraries to use, I was initially exploring non JS libraries as react was the last thing I want to write on a TUI but dobled down on React Ink anyways 😅 as I dont like to vibe code stuff I'm not so familiar with.

Thanks to copilot that setup was a breeze. I was able to reuse some logic from my electron code also since its React, the jsx way to layout and handle state in the CLI was understandable at first glance.

So I realized in TUI its not mouse clicks anymore and its just keyboard-driven. I had to unlearn the usual Web UI brain of “yeah, the user will just click that” and shft to “how would the user know this exists” mindset. Surprisingly copilot added a little bar at the bottom like in older Turbo C and nano editor this was somthing I wouldnt have comeup myself.

One thing for sure AIs are getting better at coding and its high time that we utilize them to learn and build something new.

If you made it this far, feel free to drop a ❤️ on the post. Thanks.

Top comments (0)