AI-Powered GitHub Pull Request Tracker for Your Hacktoberfest (and More!)

Track the status of your GitHub Pull Requests for Hacktoberfest, Devfest.ai, Taipy Hacktoberfest and various Open Source Contributions with AI Assistance

Why This App?

As a contributor to open source, I recently came across CopilotKit. Being involved in React development for a while, I found CopilotKit (the simplest way to integrate production-ready Copilots into any product) interesting.

There are several open-source events happening during Hacktoberfest, including Hacktoberfest, Devfest.ai, Taipy Hacktoberfest and more, each with different rules. It became quite challenging to keep track of pull request statuses and identify which contribution repositories were associated with each event. This challenge inspired me to leverage CopilotKit to create a solution that simplifies tracking and managing contributions across these events.

Try the PR Tracker app here

user prompt: Hi, I want to see the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event.
assistant: I've fetched the pull requests created by jeevaramanathan for the Hacktoberfest 2024 event. Is there anything else you need help with?

It retrieves all the pull requests that come under hacktoberfest 2024 and displays on the table using copilotkit action.

Key Features

AI-Powered Assistance: Get help from AI to easily track the status of pull requests for different open-source events.
Event-Specific Filtering: Filter pull requests by open-source events like Hacktoberfest, Devfest.
Customizable Date Range: Allows you to set specific date ranges to focus on contributions made during certain periods regardless of any event.
Responsive Design: Built with Tailwind CSS and shadcn-ui for a seamless user experience across all devices.
Theme and Color Change: Switch between different themes and customize colors for a personalized user experience.
Sharable Links: Easily generate links to highlight your pull requests or share your progress with others, making collaboration seamless.

Tech Stacks

Built with Next.js (React), Tailwind CSS, ShadCN UI, Apollo Client, and CopilotKit for AI functionalities.

How It's Built

I leveraged the GitHub API to retrieve details and analyzed REST endpoints and GraphQL. In this case, GraphQL was more efficient, as it allowed me to retrieve data in the structure I wanted instead of its default format.

To integrate with Next.js, I used Apollo Client with the useLazyQuery. A lazy query allows you to execute a query only when needed, helping to optimize performance.

After fetching the data, I filtered it based on event-specific rules. For Devfest, I parsed the devfest to get whitelisted repositories dynamically.

Next comes CopilotKit

CopilotKit provides an easy way to integrate AI capabilities into your web application. I utilized the free version of Groq model, alongside the back-end component CopilotKit runtime.

Here's a glimpse of some of the prompts I used:

useCopilotAction({
  name: "setUsername",
  description: "Sets the username of the GitHub user.",
  parameters: [
    {
      name: "username",
      type: "string",
      description: "GitHub username to search for",
      required: true,
    },
  ],
  handler: ({ username }) => {
    setUserName(username);
  },
});

useCopilotAction({
  name: "setEvent",
  description:
    "Set the selected event to hacktoberfest, devfest, taipy event or none based on user's input",
    parameters: [
      {
        name: "event",
        type: "string",
        description:
          "Event name to switch to (hacktoberfest, devfest, taipy, none)",
        enum: ["hacktoberfest", "devfest", "taipy", "none"],
        required: true,
      },
    ],
    handler: ({ event }) => {
      setSelectedEvent(event);
    },
  });

In the frontend, I utilized the CopilotPopup component, providing a popup interface for interacting with the copilot by setting the initial instructions to guide copilot in retrieving details of GitHub pull requests for various events.

import { CopilotPopup } from "@copilotkit/react-ui";
import { CopilotKit } from "@copilotkit/react-core";
<CopilotKit runtimeUrl="runtimeUrl">
  <CopilotPopup
    instructions={
      "Help the user to fetch the details of github pull requests for various" +
      "events like hacktoberfest, devfest."
    }
  />
</CopilotKit>

Sample prompt

Conclusion

If this application helps you track your pull requests, there are plans to refine it further by adding additional functionalities.

If you like this project, don't forget to check out the app and the repository, and leave a star⭐. Contributions and feedback are always welcome if you're interested in enhancing the app! This is my first Next.js application, so it might be a bit clumsy.

Feel free to try it out and share your feedback!

App Link: https://github-ai-pr-tracker.vercel.app/
Repository Link: https://github.com/JeevaRamanathan/github-ai-pr-tracker/

Please note that the copilot uses the free version of the model, which may occasionally lead to unexpected behaviors or slower responses. Copilot actions are being improved.

Happy Contributing 🎉

While engaging in open-source events like Hacktoberfest, exploring projects on Taipy and AI-based projects on Devfest.ai, and contributing to them and giving them a star could lead to valuable learning experiences and opportunities to win swags!

Thank you for reading! Feel free to share your thoughts and opinions in the comments 😊. I hope you found this helpful! You can connect with me on LinkedIn, X, GitHub. Few other posts to check here.

Blog