· 2 min read
The role of AI in building user interfaces
Deep dive into building a UI with Artifical Intelligence. Assessing v0, Co-Pilot, ChatGPT, and Perplexity.
TL;DR
Just use v0.dev for building UIs. It’s the best tool out there. 😍
Apps
Vercel’s v0
v0.dev was one of the first tools available coming out in late 2023. Starter and App templates are available.
Using the OOTB prompt…
Generate an interactive pricing calculator for a SaaS product which takes into account seats, usage, and possible discounts
I get an error Error: The file “/app/pricing-calculator” cannot be found (imported in “/app/page”). Make sure the file … Luckily there is a button Fix with v0. which includes a prompt to fix the error. Boom! Everything is fixed. Clicking deploy is easy.
Alight time to try out a custom prompt…
Generate an interactive tasks list app with a pomodoro based techniques that contains a task number, task title, task status, and priority using components available in the shadcn/ui component library
Ok it’s doing what I need but missing some signifers and ui elements. I’d like to just prompt the fixes but I’m thinking I’ll use up too many credits. I’ll try it anyway…
Modify to include checkboxes for the tasks, use semantic color values for the Priority, use emojis for the Status, save completed tasks to a log
Ok, more modifications…
Update to include the time and timer to be in the same row as the tasks. Allow for nesting of tasks.
,Have the timer count down from 25 minutes then display a modal window that is a countdown from 5 minutes
I like how I can just manipulate the code and it updates the UI. I’d like to integrate this with GitHub and the “Add to Codebase” button does just that. Installs all the dependencies as well. Nice! 😍
I’m going to take a break from writing this post as of 7:35PM 12/29/2024 and just try and build out this app. I’m completely in love with v0.dev
GitHub Co-Pilot
Ok, I ran the first prompt that I used in v0 and received an intro that code would be generated using React and Typescript.
https://github.com/copilot/c/7c64f0a5-50a8-43be-97ae-eb0cef9a2866
ChatGPT
Did the same for ChatGPT. Here’s what I got…
Peplexity
In conclusion…
qwerty
