This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.
Intro 🚀
I have been enjoying posting and reading articles on the DEV Community for about half a year. One day, I came up with the idea that it would be more convenient if there were functions working with AI on the DEV Community. At the same time, I found out that there would be the world's largest hackathon by Bolt. So, I made up my mind to make a DEV community support Web App at the hackathon.
I made DEV MBS (DEV Community My Best Supporter) that will help you enjoy DEV Community with cutting edge AI. Here is the video demo.😊 It will "Extract" articles you like, "Summarize" it, and generate "Audio" from the summary.
How to use ✨
The user inputs a keyword they are interested in (up to 4 words). The app will use the DEV Community API and return the top 6 posts for the keyword.
https://developers.forem.com/api/v1#tag/articles/operation/getArticles
The user can select one post and summarize the article using the Gemini API.
https://ai.google.dev/gemini-api/docs/text-generation
Moreover, the user can convert text-to-speech using the Gemini API.
https://ai.google.dev/gemini-api/docs/speech-generation#single-speaker
Since it takes some time to convert to audio, so you can play a mini-game while waiting.
How I built it 🛠️
I used Bolt.new and Vibe Coding to make this App. I made the functions one by one, not all at once, to improve the code quality. First, I input a prompt for the function outline. Next, I input a prompt for the function detail. This way also improved the code quality. Then, I asked AI many times until the function worked as I expected.
Technologies Used
| Category | Details |
|---|---|
| Built by | Bolt.new |
| Framework | Next.js |
| Libraries | React, Cheerio, WAV |
| Language | TypeScript |
| AI Services | Gemini API |
| External API | DEV Community API |
| Deployment | Vercel |
Problem 1 (Summary was low quality) 🤯
At first, I passed the URL directly to the Gemini API and summarized the article. The output was terrible. I tried many kinds of prompts to improve the output, but none of them worked. Next, I passed only the article body of the page to the Gemini API using Cheerio. It worked, and the output quality got better. I think that the noise was reduced because only the body was passed.
Problem 2 (Response of text-to-speech is slow) 🎮
In this app, I am using the Gemini API to convert text to audio. However, the API response is quite slow. If this were a problem with my app, I could try many things to improve the response speed, but the problem comes from an external API, so I cannot do anything about it. Thus, I switched my point of view and thought about how to entertain the user while waiting. First, I thought of making a fun animation, but later thought it would be more fun if there were a mini-game to play while waiting. And so the DEV vs BUG game was born.
How was Bolt.new? 🤖
By using Bolt.new, I could easily enjoy Vibe Coding and make my idea into a real app. Not only chatting with AI, coding and debugging, but Bolt.new can also connect to other services easily. It can make a high-quality program, so from beginner to expert, anyone can enjoy Bolt.new.
Future improvement ideas 💡
The Gemini API can do lots of other things.
It can generate images from text, so image generation from an article summary is one idea.
I used the text-to-speech function of the Gemini API, and it can change the speaker’s voice. So, adding voice selection would also be fun.
The Gemini API can generate music as a new function. So, music generation with the Gemini API might also heighten the user experience.
Acknowledgements 😄
This was my first time joining a hackathon and making a video demo. It was super fun and I would like to join again!
I got enough Bolt.new free tokens for the hackathon. Thank you for the good chance to try Bolt.new!
I also thank the DEV community for providing a wonderful platform for developers.
I thank the Gemini API for offering us a fantastic, state-of-art AI API.
Thank you for reading. Happy AI coding!🤖
Top comments (6)
こんにちは!
私はCSMです
よろしく お願いします!
あなたは日本人ですか?
Hello!
Thank you for checking my post.
Yes, I am Japanese.
English OK.
You really made a solid project using ai! It really feels awesome!
I just built a simple calculator using bolt, but did not think that this much is possible!
All the best for the hackathon!
BTW I like japanese language!
Thank you for your compliment! 😃
It took much more time than I thought, but at last I finished my App.
I am glad you like Japan. 🇯🇵
It is a good place to live.
Hello!
Thank you for checking my article.