Michael Potter
Paige AI
A AI Chatbot Assistant built using v0.dev, cursor, and Chat-GPT's API
Overview:
This project was for fun and to learn new AI tools and practice using API's. I came up with the idea when me and my friend's were talking about some of these new AI tools and what people were creating and vibe coding with them. We were using Chat-GPT to turn ourselves into cartoon characters as that was the trend at the time. When we did my friend Paige's image it looked perfect for a virtual assistant and I jokingly told my friend Paige that I was gonna turn her into a AI assistant. Well that weekend I decided to sit down and give it a shot using the
Planning:
I already had the cartoon image of my friend Paige to work with so next I started off by doing some research/testing with different vibe coding tools. I tested lovable, v0, and bolt.new. I ended up choosing v0 because it had some of the highest free limits at the time and from my testing it and was the easiest to export from. Next I needed to engineer a good prompt to give v0 so I would not have to waste any of limit. I started off by talking with Claude giving it all the functionality I wanted the AI assistant to have and the API I wanted to use. From this conversation I ended up with the following prompt.
Prompt:
Develop a modern, minimalist chat interface named "Paige" using Next.js. The interface should feature a clean design with ample white space to enhance readability. Implement a header with a modern, stylized lowercase "p" logo in purple. Include a toggle in the top navigation to switch between light and dark modes. Integrate a dropdown menu in the top navigation that allows users to select from various AI models, such as GPT-4, Claude, and Llama. Design message bubbles to clearly differentiate between user inputs and AI responses. At the bottom of the interface, incorporate a text input area with a send button for users to submit messages. Include a settings panel accessible from the top navigation, allowing users to customize their experience. Ensure the design is fully responsive, providing an optimal user experience across desktop and mobile devices. Implement subtle animations for message transitions to enhance the visual appeal. Create a simple onboarding screen that explains Paige's core capabilities and features upon the first visit. The chat interface should also support the display of markdown, code blocks, and other formatted responses from the AI models.
Design Iterations:
The initial outcome from my prompt was a good start I just mostly wanted the backend infrastructure set up and I could make the design changes on my own if need be as to not waste my free credits. Below you will find some of the design iteration I went through starting with the one from the initial prompt. As you will see I have settled on a similar design from slide 2 as I loved to the last slide design but have not built out all the button for those specific options of coding or writing to work yet.
