DEV Community: Erick Christian

I turned GitHub Copilot into OpenAI API compatible provider

Erick Christian — Thu, 06 Feb 2025 08:44:08 +0000

TL;DR:

I built npx copilot-api (GitHub repo) to use GitHub Copilot as OpenAI compatible provider

Here's me using it with KoboldAI (ignore the password, you don't actually need it)

So there I was, messing around with GitHub Copilot on the web. I am familiar with web development so I got kinda curious how the API is structured. If only I can expose an OpenAI compatible chat completion endpoint...

I opened up the DevTools and immediately noticed that GitHub had completely abstracted away the OpenAI chat completion endpoint. Duh, of course they did! They're not gonna let us mess around with it that easily.

The Spark

Then something interesting happened. I was watching Cassidy Williams on Twitch (she was talking about GitHub Copilot competition on dev.to). She showed off Copilot custom instructions. My mind immediately went: "WAIT A MINUTE... how is VSCode actually sending these custom instructions???"

(Sorry, the recording is gone now)

Down the Rabbit Hole

Being a web dev, I'm used to just opening DevTools and calling it a day. But this was different - I needed to capture system-wide network requests. So how should I do it?

First stop: Wireshark!

I heard people using it to capture network or packets or something similar to that. Sounds promising. I tried it for like 30 minutes and... NOPE. Turns out Wireshark can't capture HTTPS requests. At this moment I realized what the S in HTTPS stands for. Secure.

What I wanted to do was basically Man in the Middle attack. No no for HTTPS.

HOLD ON. Man in the middle... THAT'S IT!

Enter mitmproxy - this beautiful Python program can act as a proxy and logs all network requests. It even comes with a devtool like web UI. Just what I needed.

The Authentication Nightmare

My first brilliant idea to make the whole thing automatic was to launch both the proxy and VSCode as Node.js child processes, then parse mitmproxy's output to get the authentication token.

It was not, in fact, brilliant.

I asked my friend to try the projecstandard github auth tokent and it was a mess. He didn't have mitmproxy installed. He didn't really know how to setup a proxy. There was also the whole thing where VSCode won't make any request because the proxy certificate wasn't valid or something.

After that spectacular failure, I did some digging and discovered VSCode was just using stock standard github auth token. Specifically, VSCode uses gho_xxx token, which is the type of token used for OAuth apps.

Only after that then the gho token is used for getting the actual Copilot Chat completion token. Sounds complicated? Yeah because it is.

After finding that out, of course the next idea that came to my mind was "create a custom oauth app, get user token, get copilot token, bada bing bada boom we're cookin"

404 Not Found

WHAT THE HELL GITHUB??? YOU LIAR! THE ENDPOINT DOES EXIST. DONT GIVE ME THAT CODE.

Turns out Copilot's API internals are only exposed to OAuth tokens from VSCode.

But then... WAIT A SECOND! VSCode has its own device flow authentication! If I could just get VSCode's client ID...

IT WORKS!

Building the Proxy Server

Now came the fun part - actually building the API server. I decided to start simple and disabled streaming at first, just emulating the streaming part in my server.

I primarily wanted to test the API with these three tools:

Cline
Aider
bolt.diy

Cline immediately threw some weird "can't read undefined index 0" error and I went slightly insane trying to debug it. I even tried diving deep into Cline codebase, just for it to not result to anything.

After a good night's sleep, I realized Hono automatically adds "[DONE]" event in the stream. I didn't realize that and added another "[DONE]". Wow, this pains me physically.

Fixed that and Cline now works baby!

Cline

I tried playing around with it using GPT-4o. But I remembered Cline is advertised to work best with Claude 3.5 Sonnet.

So I tried that and get a new error.

And this time, there wasn't even a single error message. The error wasn't even from Cline itself. The error was from GitHub Copilot internal API.

I tried comparing everything. The prompts, the request, the response. Everything is the same except the model. So I just concluded that the prompt was too long and the max context length for Claude provided by GitHub just wasn't enough. Because it is long, just look at this.

Aider

Aider worked immediately! WITH CLAUDE AS WELL!

...until it didn't.

Random errors sometimes popped up and I didn't know why. Commit command also wasn't working.

The only things those two have in common that I know was those two tasks use the "weak" model in aider settings.

I was losing my mind again. I've double, hell even 10+ times checked to make sure that my API is structured the same as OpenAI.

I gave up and decided to open an issue.

No updates...

I just gonna write the result of my tests here

(realizes o1 doesn't support streaming)

THEN IT HIT ME.

THE WEAK MODEL EXPECTS NON-STREAMING RESPONSE.

My server didn't support non-streaming response. What an irony since I always disabled streaming internally and even emulated streaming response.

Might as well start implementing actual streaming now.

bolt.diy

This thing just works baby!

Except that one issue but that's on bolt.diy itself and not me.

THE SERVER IS FEATURE COMPLETE!

The Humbling Reality Check

So there I was, feeling like a genius, ready to write this blog post about my AMAZING DISCOVERY...

...only to find out that thousands (not really) of other developers had already done this exact thing.

But you know what? That's okay! I learned a ton of things.

Also, reverse engineering is fun!

The Takeaway

I'm actually using this setup daily with Aider now (Cline still doesn't work, I'll probably fork it with shorter prompt). And while I wasn't the first person to figure this out, the journey was worth it.

Remember: don't be discouraged when you discover others have already built what you're building. The learning experience is what matters!

obligatory disclaimer: This is all for educational purposes only. Please don't sue me, GitHub! Also use at your own risk!

My GitHub Copilot Hackathon Submission: Year Compass - Helping You Achieve Your Goals

Erick Christian — Sat, 18 Jan 2025 09:20:40 +0000

This is a submission for the GitHub Copilot Challenge : New Beginnings

What I Built

So, for this hackathon, I decided to build a little web app called "Year Compass." The idea is pretty simple: it helps you actually achieve your New Year's resolutions instead of just making them and forgetting about them by February!

The core of it is taking that big, sometimes vague resolution and using AI to break it down into smaller, more manageable steps. Think of it like having a mini AI coach in your browser. You type in your resolution, hit a button, and bam! You get a list of things you can actually do.

Here are the main things it does:

Easy Resolution Input: Just a text box to type in your goal.
AI-Powered Steps: Click a button, and the magic happens on the backend to generate those actionable steps.
Clear Step Display: The steps show up in a list, each with a little checkbox.
Progress Tracking: A simple progress bar at the top shows how far you've come. It updates as you check off those steps!
Local Saving: Everything (your resolution, the steps, and your progress) gets saved right in your browser. So when you come back, it's all still there.
Little Celebrations: When you hit certain milestones (like 25%, 50%, etc.), the app gives you a little "Woohoo!" message to keep you going.

Since it's a hackathon and we're focusing on using Copilot, everything is stored locally in the browser. No fancy databases or user accounts for this version! It's all about that "new beginning" vibe, helping people get started and stay motivated with their goals.

Demo

You can check out the app here Year Compass

Repo

GitHub Repository

Copilot Experience

Honestly, I leaned on it heavily throughout this whole process. The Copilot Edits feature was a lifesaver. It's really similar to using Aider, but having it integrated right in VS Code with a GUI is just fantastic. It made refactoring and adding new features so much smoother.

For smaller tweaks and quick fixes, the inline chat was also super handy. Instead of sending whole files to Copilot Edits, I could just select a line or two and ask it to make a specific change.

And of course, the autocomplete is still a game-changer. Even though I was relying on Copilot for a lot, there were still times I was writing code from scratch, and the suggestions were incredibly helpful, especially in the early stages of setting things up. I've been using Copilot's autocomplete since it first came out, and it's still a core part of my workflow.

GitHub Models

Yep, I definitely used GitHub Models for this project! The main place where they came in was for generating those actionable steps from the user's resolution. That's the core AI-powered part of the app. I used the models to take the user's input and turn it into a list of concrete things they could do. So, it wasn't just for prototyping – it's actually a core part of how the app works.

Conclusion

Overall, this was a really fun and productive hackathon! Building "Year Compass" with Copilot felt like a really streamlined experience. It helped me focus on the logic and the user experience, knowing that I had a powerful AI assistant helping with the coding. I think the idea of breaking down big goals into smaller steps is really powerful, and hopefully, this little app can help people make real progress on their "new beginnings" throughout the year. Thanks for the challenge!

Estile: AI-Driven Clothing Recommendations Enhanced by Bright Data Scraping

Erick Christian — Mon, 30 Dec 2024 07:06:10 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

What I Built

Estile is an AI-powered fashion recommendation app designed to help users discover clothing articles tailored to their preferences. The app combines artificial intelligence and web scraping technologies to recommend outfits and automatically search for matching products on eBay in real time.

The app’s AI system suggests styles based on user preferences and trends. It then uses a custom fine-tuning process to optimize search keywords and ensure accurate product matching with items available on eBay.

How I Used Bright Data

Bright Data was instrumental in building Estile by enabling real-time data scraping and fine-tuning the AI model. Here’s how I leveraged it:

Real-Time Scraping for Clothing Recommendations - Using Bright Data’s Scraping Browser, I extracted data from dynamic and JavaScript-heavy websites to fetch the latest fashion items and trends. This ensured that recommendations were always fresh and relevant.
eBay Data Collection and AI Fine-Tuning - I utilized Bright Data’s Web Scraper API to collect and structure data from eBay. The data was used to train and fine-tune a language model (LLM) that matches AI-generated fashion descriptions with optimal product keywords. This allows the app to enhance search accuracy and deliver precise product suggestions to users.

Additional Prompt Qualifications

Prompt 2: Build a Web Scraper API to Solve Business Problems – Estile demonstrates a practical use of web scraping to tackle challenges in product discovery and recommendation systems.

A big thank you as well to the DEV.to team for hosting this exciting hackathon. Also thank you for considering my project for the Bright Data Web Scraping Challenge!

Distro suggestion that looks cool

Erick Christian — Tue, 17 Nov 2020 14:59:12 +0000

Gonna reinstall Linux for the 2nd time this weekend.

I want a distro that doesnt require much setup but looks cool.

I'm thinking about installing Manjaro.

Have any suggestion what distro should I use?

Currently it's Fedora 33.

DEV Community: Erick Christian

I turned GitHub Copilot into OpenAI API compatible provider

The Spark

Down the Rabbit Hole

The Authentication Nightmare

Building the Proxy Server

Cline

Aider

bolt.diy

The Humbling Reality Check

The Takeaway

My GitHub Copilot Hackathon Submission: Year Compass - Helping You Achieve Your Goals

What I Built

Demo

Repo

Copilot Experience

GitHub Models

Conclusion

Estile: AI-Driven Clothing Recommendations Enhanced by Bright Data Scraping

What I Built

Links

Screenshots

How I Used Bright Data

Additional Prompt Qualifications

Distro suggestion that looks cool