Say goodbye to code anxiety and embrace the thrill of development: Trae AI makes it easy to build apps, and everyone can be a developer!

Software development is undergoing a profound transformation driven by artificial intelligence (AI). From code completion and bug fixing to generating code through natural language conversations, AI is evolving at a remarkable pace.

Recently, Byte Jump re-launched a new AI programming tool: Trae, which once again triggered widespread attention in the industry.

Trae's interface is in Chinese, which is very friendly to Chinese developers and lowers the threshold of getting started. What's more, Trae is equipped with two AI assistants driven by Claude 3.5 Sonnet and GPT-4o models, providing developers with powerful intelligent support.

exist Builder mode Trae is a full-fledged assistant that understands the developer's vision and helps them build real-world products from the ground up.

as well as Chat Mode Trae is a full-stack programmer who is always on call to respond to developers' programming needs and help them complete their development tasks efficiently.

Even more exciting, the Trae tool integrates advanced models such as Claude 3.5 Sonnet and GPT-4o, which are now available to users for free, undoubtedly a boon to developers.

Next, this article will experience Trae in depth, show how to develop an application from scratch through dialog interaction, and feel the new charm of AI programming.

Quick Start Guide

1. Visit the official Trae website:

interviews https://www.trae.ai/ Upon entering the official website, users will see the interface as shown below. Click on the center of the page "Download for macOS" button to download the installer.

please noteTrae is currently only supported on macOS, with a Windows version in the works, so stay tuned.

2. Installation and initial start-up:

When you open Trae for the first time after installation, the default language is Simplified Chinese, which takes into account the usage habits of Chinese developers.

3. Initialize configuration and login:

Trae will guide the user through the initial setup such as theme selection, IDE configuration import, command line startup item addition, and finally enter the login interface.

Important Notes: Users will need to sign in to experience Trae's AI capabilities. The login process may require the use of a web-based tool, and users can choose between email registration or a third-party account login.

4. Overview of functional interfaces:

After successfully logging in, users will enter the main interface of Trae, which supports a rich set of plug-in extensions that can be installed to enhance the coding capabilities of the editor to meet individual development needs.

Hands-on exercise: AI Spring Festival couplet generator development

In order to demonstrate Trae's application capabilities more intuitively, this article will take the development of an AI Spring Festival couplet generator as an example, and lead readers to experience the fun of co-programming with AI and customizing exclusive Chinese New Year blessings for themselves and their families.

In this article, the project development process is broken down into four steps: project initialization, basic UI implementation, Spring Festival couplets generation logic and style optimization.

Project Initialization

First, switch to Builder mode and create a file named ai-couplet of the new program.

Enter a description of the requirement in the dialog box:

I want to create an AI spring link generator project in the current directory, using React + Tailwind CSS technology stack.
Please help me with the following steps:
Initialize the project structure
*Configure necessary dependencies
Setup basic development environment
Please start the first step.

Trae AI responds quickly by providing project initialization commands, and the user simply clicks "(of a computer) run" button to execute.

The AI will then assist in configuring the necessary style files. The user reviews the changes, confirms they are correct, and clicks "Accepted in full" completes the configuration.

With a few simple clicks, the project initialization is complete and the project is up and running.

It is worth mentioning that Trae has a built-in Web preview function that can show the interface effect in real time, which is very convenient for front-end project debugging.

Basic UI Implementation

After the initialization of the project is complete, the next step is to start implementing the user interface of the Spring Festival Generator. Refer to the following interface prototype diagram to describe the interface requirements to the AI.

Sending a brief prompt containing a prototype diagram, Trae immediately understands the design intent and begins writing code automatically. The user simply reviews the document changes and clicks "Accepted in full" That's all.

An aesthetically pleasing Spring Festival Generator interface is quickly rendered, with interface elements that are highly consistent with the prototype image and even more aesthetically pleasing in terms of fonts and color scheme.

From the above interaction process, we can see that Trae not only understands the code, but also accurately analyzes the picture content. The entire interface development process is smooth and natural, making traditional interface development work easy and efficient.

Spring Festival couplets generation logic implementation

After having the user interface, the core task is to implement the Spring Festival couplets generation function. This function takes user input and calls the Claude API to generate the corresponding Spring Festival couplets.

The development of this feature continues to be completed with Trae AI:

Please help me to implement the Spring Festival couplet generation function:
When the user clicks on the "Generate Spring Festival Couplet" button, the following actions need to be performed:
Get the subject or keyword entered by the user in the input box
Call Claude API to generate a couplet with the following requirements:
Horizontal couplet (four-character pair)
Couplets (seven-character couplets)
The couplets should be neatly written and in line with the festive atmosphere of the Chinese New Year.
Display the generated results in the corresponding red areas.

Trae AI quickly completed the feature development, including API interface calls, error handling and other logic. However, during the testing process, the prompt "Failed to generate Spring Festival couplets" appeared.

Don't worry about problems, just keep feeding them back to the AI to fix.

Users can even send a screenshot to the AI with a brief description of the problem to help the AI understand and solve the problem more accurately.

After several rounds of optimization and adjustment, we finally achieved a fully functional and stable Spring Festival couplet generation function.

Now, whether you type in "home," "spring," or any other keyword, Trae can generate well-crafted, auspicious Chinese New Year couplets.

Interface style optimization

Next, try switching to Chat mode to further optimize the display of Spring Festival couplets.

After switching to Chat mode, it continues to communicate with the AI about optimization needs in a natural language conversation with screenshots of the interface:

I find the current interface background color to be gray and slightly less festive. I would like to make the following adjustments:
Modify the background color to white to make the red spring couplets more eye-catching and prominent.
Increase the spacing between the left and right couplets.
Adjust the font size to make the text of the couplets more eye-catching.
Please help me to modify the relevant style code.

Trae AI is likewise quick to give specific style modification codes that the user needs to review for code.

Click "appliance" button, Trae will display the changes again, confirm that there are no errors and click "Accepted in full" Complete the update.

For the optimization of interface details, it may need to communicate and adjust with the AI in many conversations. The user only needs to clearly describe the intention of the modification.

For example, the current style of couplets is slightly monotonous, and there is still room for improvement in the festive atmosphere, so you can ask the AI for optimization suggestions.

Inspired by AI's suggestion, we decided to add two small lanterns on the left and right sides of the banner to enhance the festive atmosphere. In order to express the design concept more clearly, we searched for lantern material images on the internet and drew a simple schematic diagram, which we sent to AI and asked for assistance in realizing the design.

Trae AI quickly understood the design intent and started to write the code, quickly completed the addition of the lantern elements, the effect is satisfactory, and even added a dynamic effect of swaying left and right for the lantern, more lively.

After adding the lanterns, the interface instantly adds a strong Chinese New Year flavor. Observing that the middle area of the couplet is slightly empty, we decided to add a "Fu" character in the center. Again, we draw a schematic and send it to the AI, requesting the AI to assist us in realizing it.

concluding remarks

As shown in this paper, Trae played the role of an efficient programming assistant during the development of the "AI Spring Festival" project, assisting the developer to build a fully functional application through natural and smooth dialog interactions.

Of course, as a new product, Trae still has a few things to be perfected.

For example, in the process of realizing the lantern animation effect, the user is required to provide sample images to guide the AI to complete the development task more efficiently.

For some commonly used configuration rules, the editor has not yet provided global options, so users need to repeat the settings when reusing them, which makes the operation process a bit cumbersome. We expect the Trae team to optimize these details in subsequent releases.

Nonetheless, we believe that AI programming tools such as Trae will be perfected as more developers join in and provide positive feedback. Tools and craftsmen complement each other, and this will greatly improve the efficiency of software development.

The addition of AI technology has undoubtedly lowered the programming threshold, enabling more people to participate in software development and create more practical and creative Internet products.

Looking ahead, we may be on the verge of an era of spurt in Internet product innovation.