In today's era of booming AI, the combination of programming and AI has brought great convenience to developers. Today, I will take you to have an in-depth understanding of an open source programming agent project of Claude AI - fragment, and reveal the mystery behind its implementation, so that you can easily get started and play with it.
Do you still remember that little girl abroad who taught you to talk to AI and write websites? There are many conversational programming tools like this, and Claude AI is one of them. Fragment, as its open source version, is powerful. By talking to it, you can generate code and run displays in real time. So how to start this project? 1. Get the source code : First we need to go to the GITHUB source code address of the project, slide to the startup document below, according to the document, first copy the get clone command, paste and execute it, and download the code to the local. 2. Enter the project and install the dependencies : After downloading, copy CD command to enter the project, and then copy NPMI command to install the project dependencies. After installing the dependencies, open the project using the "code." command. 3. Configure related files and parameters : Then come to the document, create an .ENV.logo file in the project according to the prompts, and copy the corresponding code to the file. Then open the "e to be API key" link above, enter the web page, and copy the generated "key" into it. This "key" is the key to generating the display effect. 4. Start the project : When everything is ready, we go back to the document, copy the project startup command, paste it into the command line and execute it. In this way, the project can be launched smoothly.
The project is already online, so how to convert the dialogue into code and run the display effect? There's a lot going on here. 1. Select code type and AI model : The first option above Send Message is used to choose what kind of code to generate. For example, if you want to generate "VOE" code, you can select "VUEE.jsd". The second option on the right is used to choose which AI to use to help you write code. There are 'GBT4O' models of 'open i', 'cloud3.5' models of 'ENOPPC', and Google's 'GEMINI' models, etc. If you have Orama installed on your computer, you can also use the Rama 3.1 model below, which helps you generate code locally without the need for an internet connection. Here we first select the "GPT4o mini" model, and then set the third-party "API key" and "base url" to start communicating with it. 2. Interface calling and back-end processing : When we tried to let it generate a beautiful login page, the code was generated after a while. Open the debugging panel to see the subsequent operations and click Send. You can see that it calls the interface and sends the user's question, the AI model selected by the user, and the language type backend that needs to be written. The backend will also return the corresponding code. This interface is like a magical "converter" that directly converts the problem into the corresponding code. 3. Project code structure and core logic : This project is a full-site project with front-end and back-end integration developed using next.js. The app folder is the entry folder of the project, which contains all the code and configuration of the project. The .TX file is the entry file for the project front-end page. Click in and you will see that the 'chat input' component is the input box for sending questions, and the 'preview' component is the preview component of the code on the right. The API folder is the code folder of the project backend and contains all backend code. The routing file under the chat folder corresponds to the interface called when the send button is clicked. In this interface, the corresponding AI large model instance is generated by receiving the model name passed from the front end, and the output format of the model is standardized through schema parameters, and the to pn method is used to pass the optimization prompts to the large model. , which is the highlight of the entire project. It is like a baton, telling the AI big model to answer user questions from the perspective of a skilled and error-free software engineer, so as to get perfect code. Finally, the big model is called through string object method to generate the code that the user wants, and the result is Return to the front end in the form of a stream.
The code is generated, but how to implement online preview? In fact, after the front-end got the code, it called the '300' interface of the back-end. This interface uses a third-party online code preview component called "code-interpret", which is similar to the "code sandbox". A class online code editor, by calling the interface, let it create an online vie project, and add the currently generated code to the APP.vie file of this project, and finally let it return a preview address, front end - end and then use IPHONE When the tag is mounted on the page, the corresponding preview effect will be displayed.
Interested students may wish to download the code and experience it for themselves. If you don't understand anything, you can ask me. If you want to learn more cutting-edge programming knowledge, please click "Follow" and see you in the next issue. I hope that the content shared today will enable everyone to take a step further in exploring the combination of programming and AI. We also look forward to everyone sharing their experiences and ideas in the comment area so that we can interact and communicate together.
Share on Twitter Share on Facebook
Indie123
Comments
There are currently no comments