Code Feeds for GitHub - AI Generated Instagram-style feeds

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

What I Built

🚀 Code Feeds for GitHub is a fun and engaging VS Code extension that brings the latest changes to your favorite GitHub repositories (the ones you've ⭐ Starred) directly to your editor. Visualize those pull requests and code changes like never before – in a trendy, Instagram-style feed format complete with catchy captions! 🎉

Because boring changelogs are so yesterday. ✨

🌟 Features

• 📸 Instagram-Styled Feed: View recent pull requests from your starred repositories in a visually engaging feed.
• 💬 Catchy Captions: Let the AI (powered by GPT-4o) generate fun, trendy, and insightful captions for every code update.
• 🔢 Top 10 Updates: Get a snapshot of the 10 most recent pull requests and stay up-to-date.
• 🔍 Quick Browsing: Look at specific repositories' feed to manage your coding focus with flair.
• 🚦 AI Insights: Powered by GitHub Copilot's GPT-4o model, giving life to your code updates with human-like creativity.

Demo

Link to VS Code Extension Code Feeds for GitHub VS Code Extension

AI Generated Code Feeds

GIF Demo - part 1

GIF Demo - part 2

Repo

GitHub Repo : codefeed-github

Copilot Experience

I used chat, inline prompts & autocomplete throughout my development process. I didn't have a need to use Model switcher.

1. Getting Started with Tree View

• I began by cloning the vscode-extension-samples/tree-view-sample repository to use as a foundation for implementing a Tree View in my VS Code extension.
• GitHub Copilot assisted me in understanding the Tree View-related code, suggesting edits and optimizations to tailor it for my needs.

2. Leveraging Language Model API for Captions & Snippets

• The extension uses the VS Code Language Model API to send prompts to the GPT-4o model and receive JSON responses containing captions and code snippets. Copilot assisted in building the code that constructs these prompts and processes the responses seamlessly.

3. Integrating GitHub REST APIs

• Copilot guided me in modifying the Tree View base code to interact with GitHub REST APIs. It suggested specific API endpoints and provided code snippets to handle authentication, data fetching, and API responses efficiently.

4. Building the UI with Bootstrap

• For displaying the feed-like UI, Copilot helped me integrate Bootstrap into the extension. It provided code suggestions for creating responsive layouts, styling components, and implementing user-friendly design elements.

5. Refactoring API Pagination Code

• To handle paginated data from GitHub APIs, I relied on Copilot to refactor and improve my pagination logic.

6. Dynamic UI Rendering for Light and Dark Themes

• Copilot was instrumental in creating CSS and logic for dynamically adapting the UI to VS Code’s light and dark themes. It suggested theme-aware styles and conditional rendering logic.

GitHub Models

Prompt Tuning for Captions & Code Snippets

• I used GitHub Models (OpenAI GPT-4o model) to fine-tune my prompts for generating captions and code snippets dynamically.
• The "Improve Prompt" feature was instrumental in enhancing my prompts with each iteration, helping me frame precise and effective queries.

JSON Response Handling

• The iterative process enabled me to design prompts that consistently returned AI-generated responses in a well-structured JSON string, which was critical for seamless integration into my extension.

README File Content Generation

• I also utilized GitHub Models to generate the initial draft of my README file.
• The output was refined and repurposed for this contest submission, saving time and ensuring clarity in documenting the project.

By leveraging GitHub Models, I was able to prototype and integrate LLM capabilities efficiently, enhancing both the development process and the final application.

Conclusion

Completing this project in just 12-14 hours, from analysis and approach definition to implementation, was a rewarding experience. While my prior experience in developing VS Code extensions provided a strong foundation, GitHub Copilot proved to be a game-changer, amplifying my productivity and accelerating development by at least 3x.

I’m excited about the potential this extension offers—a fresh, intuitive way for developers to stay updated on GitHub repositories. This is just the beginning; I’m already brainstorming new features and improvements to make it even more engaging and useful. I hope this tool resonates with developers and inspires innovative workflows in their projects!