Inspiration
In the past, we both learned about lobbying and contacting congressional representatives, but the actual process was still mostly a mystery to us. We wanted to create an experience that acts as an introduction to contacting members from the House of Representatives. It’s important for constituents to know how to use their voices to communicate their concerns and values to the politicians they elected.
What it does
ContactUS.ai utilizes Google's Gemini AI model to generate custom emails to send to the user's U.S. Congressional representative. The model takes into consideration the sociopolitical topics valued most by the user and crafts a professional email within seconds. The user can edit the email to their liking, and once finished, the user is guided to their representative’s contact page—found by inputting their address.
How we built it
We utilized Figma to design the UI, then Lovable.dev and Build.io to create a static frontend with React.js and Typescript. We then added dynamic elements like buttons and checkboxes. For the email generation, we integrated Google’s Gemini API to submit a tailored prompt that included the user’s interests and the purpose of the email. Node.js is used in the backend to host Google’s Gemini API requests. To get information about House members, we used Google’s Civic Information API link, which allows searching for Elected Officials by addresses in their district. Data regarding their office, website, and position are returned by the API, and used in the frontend components.
Challenges we ran into
We attended the Figma to Code workshop first thing in the morning, and were inspired by how easy it seemed to turn a Figma design into frontend code. We decided to develop a UI prototype first, and tried to use Figma DevMode to turn this into React.js code. We ultimately realized that DevMode did not work nearly as well with React as we had expected, and thought we had wasted a few hours on a prototype. Thankfully, we were able to find Figma to Code plugins that suited our design—Lovable.dev and Build.io—and turned most of our prototype into static frontend code.
Further, there were limited APIs available that returned data on Elected Officials. The Google API we used is set to be shut down permanently in April 2025, which is something we were considering when thinking about the longevity of this project. Unfortunately, the only other option we found had not been updated since 2019 and had out of date data. We decided that accuracy was more important than longevity at the moment, and if this project were to be scaled further, we would have to look into other resources.
Accomplishments that we're proud of
This was the quickest that either of us had even built a fully functioning web app. This is also both of our first time attending a hackathon, so we are proud of ourselves for taking on a new challenge and growing our knowledge and experience.
What we learned
We learned more about frontend web development by trying Figma to Code, which we had never used before. In one of our classes at UF, we designed a Figma prototype, so we were excited to return to Figma and see what else it had to offer. Today, we learned how to turn a prototype into functioning code, although it was more difficult than we expected.
We also learned about the Google Gemini and Civic Information APIs, and about how to implement them into our project. We experimented by trying out a new programming language: Typescript. Our previous frontend experiences were with JavaScript.
What's next for ContactUS.ai
We secured a domain name through GoDaddy, ContactUSAi.us. We are considering paying to host the website for a couple months before the Google Civic API is disabled to gauge user interest. If the website receives a positive response then we will look into alternative data sources for the Representative-Finding feature.
Built With
- node.js
- react.js
- tailwind
- typescript


Log in or sign up for Devpost to join the conversation.