Inspiration

As backend developers, both of us often find frontend design time-consuming and tedious. We wanted a tool that could help us quickly prototype web app ideas without spending too much time writing simple code. Site Sensei was born from our personal need to streamline the process, and we realized that many others who focus on backend development could benefit from this tool as well.

What it does

Site Sensei leverages generative AI to instantly create fully functional and interactive web pages using HTML and JavaScript. Users provide a prompt, and Site Sensei generates a complete web page based on the input. To ensure consistent and high-quality results, an additional AI enhances the initial prompt before generating the final product.

Once a page is generated, users can further adjust and refine it by re-prompting the AI with new instructions. This iterative process allows users to tweak the design or content without manual coding. Each version of the page is saved, enabling users to revert to previous revisions or experiment with different prompts.

When users are satisfied with the final design, they can download the HTML file to use in their own projects, giving them full control over the generated content.

Site Sensei also features an Explore page, where users can share their creations and browse other community-generated pages for inspiration. Whether for quick prototypes or fully functional web pages, Site Sensei offers a seamless, AI-driven experience for anyone looking to bring their ideas to life.

How we built it

We built Site Sensei using Next.js for the framework, OpenRouter for AI model access, and Supabase for our SQL database. Authentication is handled through Auth0. Claude 3.5 powers the AI-generated web content, while our platform allows real-time user interaction with the generated pages.

Challenges we ran into

One of the main challenges we encountered was properly displaying generated content on the page and filtering out problematic code like external links and JavaScript alerts that could break the site.

Accomplishments that we're proud of

We successfully created sleek and functional web pages, especially when detailed prompts were given. One highlight was a personal resume page I made using the platform, with seamless animations and a clean design.

What we learned

We learned that accounting for AI's randomness can be challenging. It's difficult to predict what the AI will output, and compensating for that in code, particularly with more unpredictable elements, was a learning curve.

What's next for Site Sensei

Next, we aim to launch a live site where users can either buy credits or use their own API keys for generating web pages. As more users contribute content, we plan to refine the system further, potentially incorporating retrieval-augmented generation to enhance the quality of the results.