Promp to UI: Generating Hassle-Free Code in React

The "Promp to UI" feature allows easy generation and modification of code in a chat-like interface, supporting various APIs and local models.

### Introducing Promp to UI: A User-Friendly Code Generation Tool with Local Model Support
* 🎨 "Promp to UI" is a tool that allows you to **generate code in a chat-like interface** and **preview it right within the chat**, making the process **hassle-free**.
* 🚀 While the GPT artifacts tool had some limitations like rendering react components and making changes after generation, **Promp to UI overcomes these limitations** and can generate code in any language, with the **ability to render react components**.
* 🛠 To get started with Promp to UI, you need to **clone the repository**, **install the dependencies**, and **enter your API key in the environment file**.
* 💬 The tool features a **chat interface on the left** and a **preview tab on the right**, allowing you to **interact with the model** and **view the generated artifacts**.
* ✨ Promp to UI can generate various applications like a **to-do app**, **food ordering app**, and more, with the ability to make **modifications and additions** after the initial generation.
* 🖥 When using local models with Promp to UI, you need to **install the model (e.g., Deep Seek Coder V2)** and make the necessary changes in the code to **use the local model instead of the API**.
* 🔥 While using local models, the tool may have limitations in rendering **complex UI elements** generated by the model, but it can still generate **functional code**.
* 🌟 Overall, Promp to UI is a user-friendly code generation tool that offers support for **local models** and can be used with various **OpenAI-compatible models**.

[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

The Introduction of GPT Artifacts and Promp to UI

GPT artifacts is a feature that allows code generation in a chat-like interface, with the ability to see live improvements, but it has some limitations with rendering react components and making changes.

On the other hand, Promp to UI is a similar clone that can generate code in any language and render react components, with the potential to work with various APIs, and it offers a cool UI for artifact generation.

The installation process for Promp to UI involves cloning the repo, running npm install, and entering the API key before starting the application to use its chat interface for code generation.

The Versatility of a Text Generation Tool

The tool effortlessly creates a to-do app, with the ability to make amendments as needed.

It successfully generates a food ordering app with a cart and various features, showing its flexibility.

The tool's capability to work with local models is demonstrated, allowing users to install and use specific models for their projects.

Updating and Testing OpenAI Model in Local Environment

The user provides step-by-step instructions for updating the OpenAI model in a local environment.

They test the model by asking it to generate a to-do list app, fix the send button, and add the edit option.

The user then tries to make the interface more modern, which ultimately fails, before moving on to testing the model with a food ordering app.

The Advantages of the Code Generator for Local Models

The code generator offers the ability to add quantity and search functionality.

It is compatible with GPT-4 and other OpenAI models.

The Claude model provides fleshed out outputs and works effectively, while the DeepSeek model is also a good option.