[Study | OMEP] week 10: generate AI and Vercel v0

영어 발표 스터디를 하고 있다. (참고로 OMEP: Oh My English Present 는 사실 내가 그냥 지은 이름이다.) 내 발표들을 다시 정리해두면 좋을 것 같아, 블로그에도 업로드한다.

 

We seem to be in the midst of the birth of a number of AIs, not the least of which is development tool AI, which threatens development. So today we're going to talk about generative AI.

 

First, let me give you a quick introduction to what generative AI with v0 is, which is what we're going to talk about today.

Relationship between key AI concepts and generative AI

 

Generative AI is an AI technology that actively generates results based on the specific needs of the user. In particular, generative AI is learning hyper-scale data and crossing over into the realm of creativity, which is the domain of humans. and it generates results according to the specific needs of users. It is a step further evolved AI technology that finds and learns data by itself to solve questions or tasks requested by users, and actively presents data or content based on it. AI developers are developing and applying various generative AI models depending on the purpose of the service they want to develop.

 

Generative AI models are developed and applied depending on the purpose of the service to be developed, and the most widely used generative AI model for chatbot services such as ChatGPT is LLM (Large Language Model). In simple terms, LLM is a generative AI model that learns language data such as text and provides results. The LLM applied to ChatGPT developed by OpenAI is GPT, and in March 2023, ChatGPT-4 was released, which has a model size about 500 times larger than the previous model, GPT 3.5.

 

I'm sure many of you have already used GPT and its various AIs, but I thought vercel's v0, which is a bit newer, was interesting, so I thought I'd give you a quick introduction.

Before introducing vercel's v0, I'd like to introduce two other generative AIs, both of which require chatGPT 4's API key.

 

The first is an AI that turns screenshots into HTML code. Let's take a look at it in the video.

https://github.com/abi/screenshot-to-code

GitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code

The second is a site where you write state charts + wireframes + annotations, etc. and it turns them into code.

tldraw on Twitter / X

X의 tldraw님(@tldraw)

 

With so many code-generating AI tools popping up, they're making our lives easier, but they're also probably taking away our jobs.

 

Now let's dive into the vercel v0.

 

On 23.9.15, vercel released v0.dev, which allows you to create React components with real-time AI prompts. vercel v0 is currently in private beta, so I pre-registered and received the email below to prepare for this announcement. If you're interested, I encourage you to sign up.

v0 by Vercel

 

Let's take a look at what you can do with this vercel v0.

Build components with prompts

First, you can create the component via a prompt. Below is the prompt I typed out.

https://v0.dev/r/Jp3fbNWHeeM

Creates an entire app

Below is an example of other user creating a dashboard for a Saas app.

https://v0.dev/t/4Sx7Rt7

UI Version Control / Snapshots

Here's an example of creating a UI component for a weather app, starting with v0 and taking one snapshot for each prompt stack, as shown below.

Component code sharing

For each snapshot taken by the AI we saw earlier, we provide a separate code snippet.

Design Components + AI

Create your company's design system with AI.

And if the AI learns it, it changes the way the component is reused by the AI instead of the developer reusing the component.

The AI then creates another design component and delivers it to the developers and designers.

Changing the way we work

To create a UI component, you need to go through the following process

• A planner discusses with developers and designers what the app should do and look like.
• The designer uses a design tool to create a mockup of the app that matches the company branding and presents it to the developer.
• The developer uses this to apply markup and reusable logic to the components.
• Designers and planners provide feedback.
• Developers revise again.

This process is simplified as follows

• The AI knows the design system that already exists in-house.
• A planner or designer uses prompts to create the form and function of the app and sends a link to the code to the developer.
• Developers create business logic and apply it to components.

V0 is a tool that generates code through prompts. Unlike previous AIs, it doesn't need GPT's API key.

You can also check the generated canvas and upgrade the version by adding additional prompts. That's why this AI is called V0!