DEV Community

Cover image for ๐Ÿš€ How I Built "News Pulse" with CopilotKit ๐Ÿš€
Mayank Mohapatra
Mayank Mohapatra

Posted on

๐Ÿš€ How I Built "News Pulse" with CopilotKit ๐Ÿš€

Hey, fellow devs! ๐Ÿ‘‹ This Hacktoberfest, I dove into the world of news aggregation and built News Pulse, an app that leverages AI to bring you topic-based news summaries in real time. Powered by CopilotKit, this project simplifies tracking key news topics or happenings from around the globe, helping users stay updated efficiently. Let's explore how I put this together and the tech stack that powers it!

๐Ÿ› ๏ธ Project Overview
News Pulse is a news aggregator designed to help users quickly get up to speed on specific topics. Whether youโ€™re interested in โ€œAI advancementsโ€ or โ€œClimate Change updates,โ€ News Pulse can deliver summaries tailored to your keywords. Built with React, Node.js, and CopilotKit, this app uses a large language model to generate concise summaries and display relevant news in an aesthetically pleasing UI.

๐Ÿ”ง Tech Stack and Tools
Frameworks:

React.js โ€“ Frontend framework for an interactive and responsive user experience
Node.js โ€“ Backend server to handle API requests and manage data flow
Styling:

Shadcn-UI โ€“ For consistent and elegant component styling across the UI
Custom v0 styling โ€“ Personalized tweaks for a unique look
Developer Tools:

CopilotKit โ€“ AI-powered ecosystem for generating insights and summaries, as well as user assistance
groq-sdk โ€“ Used to structure and retrieve real-time data dynamically
๐ŸŒŸ Building the App with CopilotKit
CopilotKit has been integral to creating the user experience for News Pulse. Hereโ€™s how I leveraged its capabilities:

Smart Content Summarization: The real magic behind News Pulse lies in its AI-generated summaries. CopilotKitโ€™s ecosystem allowed me to create readable, concise content summaries based on user-provided topics or articles. Each time users input a keyword, CopilotKit generates relevant summaries, ensuring information is always up-to-date.

User Guidance: For those unfamiliar with using news aggregators or looking for assistance in topic selection, CopilotKitโ€™s CopilotPopup feature provides helpful tips and recommendations. Itโ€™s a fantastic tool for making the app accessible and user-friendly.

Data Handling and Display: Using groq-sdk, I was able to organize and display data efficiently. This SDK allows structured data querying, so every news topic and summary is well-organized and displayed intuitively within the UI.

โœจ Key Features
Topic Search โ€“ Users can search for any topic, and News Pulse will retrieve and summarize relevant news.
Responsive UI โ€“ Built with Shadcn-UI for seamless mobile and desktop experiences.
Interactive Summaries โ€“ Users get AI-generated summaries that are easy to read and understand.
๐ŸŒ Try the App!

Live Demo

๐Ÿ‘‹ Who Am I?
I'm Mayank Mohapatra, a developer exploring the potential of AI and automation in app development. My GitHub has more cool projects, and Iโ€™d love to connect with you all on Dev.to and GitHub to share ideas and work on innovative projects together!

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more โ†’

Top comments (0)