UI로 프롬프트: React에서 번거로움 없는 코드 생성하기

'프롬프트 투 UI' 기능을 사용하면 채팅과 유사한 인터페이스에서 코드를 쉽게 생성하고 수정할 수 있으며, 다양한 API와 로컬 모델을 지원합니다.

### 프롬프트를 UI에 도입합니다: 로컬 모델을 지원하는 사용자 친화적인 코드 생성 도구
* 🎨 '프롬프트 투 UI'는 **채팅과 유사한 인터페이스에서 코드를 생성**하고 채팅 내에서 바로 미리 볼 수 있는 도구로, 번거로움 없이 프로세스를 진행할 수 있습니다.
* 🚀 GPT 아티팩트 도구는 리액트 컴포넌트 렌더링 및 생성 후 변경과 같은 몇 가지 제한이 있었지만, **Prompt to UI는 이러한 한계를 극복**하고 모든 언어로 코드를 생성할 수 있으며, **리액트 컴포넌트를 렌더링하는 기능**을 제공합니다.
* 🛠 프롬프트를 UI로 시작하려면 **리포지토리를 복제**하고 종속 요소를 설치한 다음 환경 파일에 **API 키**를 입력해야 합니다.
* 💬 이 도구는 **왼쪽에 채팅 인터페이스와 오른쪽에 미리보기 탭**이 있어 모델과 상호 작용하고 생성된 아티팩트를 볼 수 있습니다.
* ✨ 프롬프트 투 UI는 **할 일 앱, 음식 주문 앱 등 다양한 애플리케이션**을 생성할 수 있으며, 최초 생성 후에도 수정 및 추가할 수 있습니다.
* 🖥 프롬프트 투 UI에서 로컬 모델을 사용할 때는 **모델(예: Deep Seek Coder V2)을 설치**하고 **API 대신 로컬 모델을 사용**하도록 코드를 필요한 대로 변경해야 합니다.
* 🔥 로컬 모델을 사용하는 동안 이 툴은 **모델에서 생성된 복잡한 UI 요소를 렌더링하는 데 제한**이 있을 수 있지만 **기능 코드를 생성**할 수는 있습니다.
* 🌟 전반적으로 프롬프트 투 UI는 **로컬 모델을 지원하는 사용자 친화적인 코드 생성 도구**로, 다양한 OpenAI 호환 모델과 함께 사용할 수 있습니다.

[Music] Hi, welcome to another video. Recently, I covered GPT artifacts, which is a clone of the artifacts feature from the recent Claude launches. The artifacts feature allows you to generate code in a chat-like interface and preview it right within the chat. You can also ask it to make changes and see live improvements. This feature is really cool because it allows you to generate code and view it without dealing with copying, pasting, and setting up environments. It really makes generating code hassle-free. Many people have really liked this feature because it makes prototyping extremely easy. GPT artifacts that I covered was cool, but it had some issues like it could not render react components well and couldn't make further changes after they were built. But today I have something pretty cool, and that's promp to UI. Promp to UI is also a clone of the artifacts feature from Claude. And although it can generate code in any language, it can only render react components as of now. So if you want to generate HTML, you can use chat GPT artifacts, or if you

want to generate react you can use this anyway although they say that that it only works with anthropics API. I'll be showing you how you can make it work with any API, whether it be open AI, a llama for local models, or Gro. It also has the same artifact generation system prompt as used by Claude, which is pretty cool. Also, its UI is pretty cool as well. Anyway, let's get it installed. Now, first clone this repo to your computer. Once cloned, nav into the folder and run the npm install command. Once done, rename the EnV example file by removing the example part. Then open it and enter your anthropic API key. Here I'll also show you how to use it with local models in a bit, but first let's put the API key here. Once done, come back to the terminal. Now run the command, and the application should start. Head over to Local Host port 3000, and you'll see the screen. On the right, you can see the preview Tab, and on the left is the chat interface. So let's ask it to create a

to-do app and see if it can make it. Okay, it's making it now and it's done. You can see that the response is on the left and the artifact is on the right. It works pretty well and has most of the things you would want. You can use the code option to view the code. It's really cool. Now let's ask it to add a heading at the top so that we can see if it can make amendments to it or not. Okay, I have sent the prompt and it's generating the artifact and it's now generated. As you can see, it has added the heading and it looks pretty cool. So it seems that it can do whatever you want and can also make changes after being generated, which is also pretty cool. But now let's also ask it to add an edit option. Okay, let's send the prompt. It's getting generated now and we have the generation here. Let's check. Okay, it has added the option and it works pretty well. It's really amazing. You can check the code and everything.

it's really cool. Let's also ask it to make something else. Let's ask it to make a food ordering app. Okay, it's getting generated now. Let's wait. Okay, it's now generated. This looks fine. It has all the cart and stuff like that. It's pretty cool. Let's also ask it to make it better. Okay, it's doing that. Let's wait. Hm, it's generated now. It has added some tabs and things like quantity and stuff. I really like this. This is fully usable, and there's code and everything for it. I really like this, but now let's also try it with local models. First, we'll need to get AMA installed. To do that, go to AMA's site, click on the download button, choose the operating system, and get it installed. Once done, go to the models page and choose a model. In my case, I'll choose the Deep Seek Coder V2 model. Click on it and copy the installation command. Now paste it in your terminal and run it. This will get the model installed on your computer once it has been installed.

you'll see this chat interface. Send a message and check if it works. Once that's done and set up, open up this file. Change anthropic to create open AI and in the library, change that as well. Make sure the line looks like this. Once done, create an open AI variable here and enter the base URL and everything like this. Now, in the model line, change anthropic to open AI and change the model from Claud 3.0 to whatever you want to use. In our case, it's the Deep Seek Coder V2 model, so I'll enter that. Once done, save it. Make sure it looks like this; otherwise, it won't work. Anyway, now run the program again and go to the same localhost port 3000. And now we can use it with local models. Let's do the same things with it. Let's ask it to generate a to-do list app. Okay, it's generating the artifact. Now, let's wait for a minute. Okay, so this doesn't work. I mean the code is fine, but it is not able to render it for some

reason. So, let's just send the prompt again and ask it to keep it simple. Let this time. Okay, it's getting generated now. This looks fine. The send button is not visible due to its color, I guess, but it's there and it works. So, this is pretty cool. Obviously, we are using a local model, so I guess I can't complain. Let's ask it to fix the send button and add the edit option. Okay, it's getting generated. Let's wait a bit. Okay, we have the code now. Looks pretty cool, although the send button is not yet fixed. At least the edit option works. It's cool, I guess. Let's ask it to make it more modern and better. Let's see if it breaks or not. Okay, it's getting generated and it fails. Okay, I guess the interface can't render the great UI that deep seek generates and crashes, but anyway, let's move on to the food ordering app. Okay, let's send the same prompt here. Okay, it's getting generated now. Let's wait. Okay, this looks almost similar to The Claw generation and works like that.

as well. So, it's pretty cool. Now, let's ask it to add the quantity and the search functionality. Okay, it's getting generated. Now we have the code here. Looks pretty cool. The quantity thing doesn't work, but at least the search does, which is cool. So, this way you can use it with local models as well. You can also use it with GPT-4 or any other OpenAI compatible model as well. It's really cool. Although I prefer the Claude model here, the DeepSeek model is also fine, although the outputs by Claude are very fleshed out and work right away, which I really like. Overall, it's pretty cool. Let me know your thoughts about it in the comments. If you liked this video, consider donating to my channel through the Super Thanks option below. Give this video a thumbs up and subscribe to my channel. I'll see you in the next video. Till then, bye. [Music]

PromptToUI + DeepSeek-Coder-V2 : GENERATE Applications with LOCAL Artifacts (Claude Artifacts Clone)

Facing the future with AI! 

Here you'll find content about multiple AI Tools that are actually useful and sometimes free.

AICodeKing

GPT 아티팩트 및 UI 프롬프트 도입

GPT 아티팩트는 채팅과 유사한 인터페이스에서 코드를 생성하고 실시간으로 개선 사항을 확인할 수 있는 기능이지만, 리액트 컴포넌트를 렌더링하고 변경하는 데 몇 가지 제한이 있습니다.

반면 Promp to UI는 유사한 클론으로 모든 언어로 코드를 생성하고 리액트 컴포넌트를 렌더링할 수 있으며 다양한 API와 함께 작동할 수 있고 아티팩트 생성을 위한 멋진 UI를 제공합니다.

Promp to UI의 설치 프로세스는 코드 생성을 위한 채팅 인터페이스를 사용하기 위해 애플리케이션을 시작하기 전에 저장소를 복제하고, npm 설치를 실행하고, API 키를 입력하는 과정을 포함합니다.

이 도구는 필요에 따라 수정할 수 있는 기능을 갖춘 할 일 앱을 손쉽게 생성합니다.

장바구니와 다양한 기능을 갖춘 음식 주문 앱을 성공적으로 생성하여 유연성을 보여줍니다.

로컬 모델과 함께 작동하는 도구의 기능을 시연하여 사용자가 프로젝트에 특정 모델을 설치하여 사용할 수 있도록 합니다.

로컬 환경에서 OpenAI 모델 업데이트 및 테스트하기

사용자는 로컬 환경에서 OpenAI 모델을 업데이트하는 단계별 지침을 제공합니다.

할 일 목록 앱을 생성하고, 보내기 버튼을 수정하고, 편집 옵션을 추가하도록 요청하여 모델을 테스트합니다.

그런 다음 사용자는 인터페이스를 더 현대적으로 만들려고 시도하지만 결국 실패한 후 음식 주문 앱으로 모델을 테스트하기 위해 이동합니다.

로컬 모델용 코드 생성기의 장점

코드 생성기는 수량 및 검색 기능을 추가할 수 있는 기능을 제공합니다.

GPT-4 및 기타 OpenAI 모델과 호환됩니다.

Claude 모델은 구체화된 출력을 제공하고 효과적으로 작동하며, DeepSeek 모델도 좋은 옵션입니다.