DEV MBS (DEV Community My Best Supporter)

DEV MBS (DEV Community My Best Supporter) Helps you enjoy DEV Community with cutting-edge AI.

Comment

Inspiration

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.

What it does

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 we 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.

Challenges we ran into

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.

Accomplishments that we're proud of

The Gemini API covers all kinds of AI. And the things that the Gemini API can do are increasing day by day. I wanted to use the latest function of the Gemini API. Therefore, I chose text-to-speech because it was released on May 20. I succeeded in using the Gemini API text-to-speech in my app.

What we learned

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.

What's next for DEV MBS (DEV Community My Best Supporter)

The Gemini API can do lots of other things.

  1. It can generate images from text, so image generation from an article summary is one idea.

  2. 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.

  3. 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! 🤖

Built With

Share this project:

Updates