Transform an idea into a full-blown API with AI

Today, we're exploring the potential of an AI-assisted development process. Our aim is to transform a hand-drawn feature concept into working code, complete with end-to-end tests, database schema, documentation and a UML diagram. For this task, we're using OpenAI's ChatGPT-4, which has proven to be an invaluable tool.

Prerequisites

Sketching the new feature

Our web app, currently built on Next.js, React, TypeScript, and Prisma (though adaptable to other stacks), is due for a new feature. We're introducing a way for users to provide feedback on individual pages, hoping to find out which pages truly resonate with our audience and which need refinement.

To kickstart this, we began with a simple paper sketch to outline the basic idea. However, this process is flexible — any method that helps solidify the core concept can be used.

Onboarding our AI Assistant

Pair programming with a colleague starts with a shared understanding of coding practices. We wanted a similar experience with AI. Hence, we tailored our version of ChatGPT using OpenAI's GPT Builder. This tool allowed us to create Blibla NextJS Developer, our AI expert in Next.js, React, TypeScript, and Prisma. We fed it examples from our codebase, ensuring it aligns with our standards and practices. This approach is comparable to onboarding a new team member.

From Sketch to full-blown API

We initiated the process with a prompt:

I want to extend my app with a feature called 'Page Feedback'. I have created this scribble to visualize the feature, can you please help me out?

Utilizing GPT-Vision, our AI assistant interpreted the content of the uploaded scribble, integrating this visual information with our textual prompt. From here, it developed a concrete concept that addressed user experience, data validation, storage, and error handling, further enriching the idea with a Mermaid sequence diagram to illustrate the user interactions.

Developing the API Handler

The AI-generated concept was our guide in developing the API handler. We used Blibla Nextjs Developer to generate the base code, that we then fine-tuned. This collaborative process resulted in a fully functional API endpoint that integrates smoothly with our existing web app.

Integrating with the Database Schema

A crucial step was aligning the new feature with our database schema. We provided Blibla Nextjs Developer with details about our current schema, especially the User model, as the feedbacks should be related to a specific user. The AI proposed a schema extension for the feedback data, which we carefully vetted and applied successfully to our database.

Generating End-to-End Tests

Our AI assistant then helped generate end-to-end tests, tailored to our testing framework, which uses Jest and supertest for HTTP calls. This step was seamless and contributed significantly to our productivity.

Writing Documentation

Finally, documenting the new feature was a breeze, as Blibla Nextjs Developer drafted TSDoc's for the API handler and an OpenAPI specification, maintaining our documentation standards.

Conclusion

This case study is a practical demonstration of the power of AI in a development environment. While the 'Page Feedback' feature serves as a straightforward example, it highlights the potential of AI-assisted development across a variety of projects.

Blibla Nextjs Developer has become an indispensable tool in our workflow, enhancing efficiency and ensuring adherence to our unique coding standards.

How to apply an AI-assisted development workflow?

Let's connect with us and find a solution together.