I. Introduction
A month ago, I wrote an article titled "Shortcuts for AI Development: Workflow Patterns," which sparked interest among many readers.
Everyone agrees that AI applications are an opportunity for developers, and graphical, low-code/no-code, and programming-free "workflow patterns," are just the entry-level shortcuts for AI application development.
However, my article only introduced the concept without step-by-step instructions. Many readers faced difficulties when trying to implement it, some couldn’t understand certain parts, and got stuck.
Today is the follow-up, where I’ll demonstrate in detail, step by step, how to build the simplest AI application without any programming background. As long as you follow along, you’ll be able to create it.
II. Development Tools
The development tool used in this tutorial isButton (Coze)All operations are completed in its browser IDE (Integrated Development Environment).
The main reasons for choosing Coze are three.
(1) It is a domestic AI application development platform, a product of ByteDance, with Chinese interface, documents, and customer service.
(2) It has a no-code editor Project IDE, including a UI Builder with component dragging, capable of generating fully functional front-end interfaces with a relatively low learning curve.
At the same time, it also provides a backend database that allows for data reading and writing.
(3) It's free to use (as long as it doesn't exceed the usage limit), and there's no charge for publishing and going live, making it suitable for beginners to practice.
III. Sample Projects
Our sample project is the simplest "AI Classical Chinese Generator".
First, take a look at the finished product ; you can click to try it out. (Recommended to access via PC, UI has not been adapted for mobile.)
Enter a paragraph of vernacular Chinese, click the button, and the AI will automatically generate classical Chinese.
In terms of architecture, it is very simple: the frontend is a web form that sends the user's input to the backend AI model and displays the backend's return results.
Its development only requires two steps: the first step is to run the backend AI model, and the second step is to create a webpage that connects to the backend.
The convenience of the button lies in the graphical operations for both frontend and backend generation: the backend is a workflow node arrangement, and the frontend is a UIBuilder interface drag-and-drop component.
Here are the development steps. To make sure everyone can follow along, I've written them out in detail, which might seem a bit long, but the actual operation is quite fast. With practice, it can be completed in about 10 minutes.
Four, Create a Project
First, prepare for development by creating an AI application.
（1）Visit the Kouzi official website and click "Basic Version Login" in the upper right corner. (The basic version only lacks some enterprise-level features compared to the professional version, which is completely sufficient for regular users.)
（2）After logging in, you will be automatically redirected to your personal homepage. Click "Workspace" in the left menu.
In the workspace, there are two pages: "Project Development" and "Resource Library." Go to "Project Development" to see all your projects.
（3）Click the "Create" button in the upper right corner, which will open a pop-up window.
There are two options above, "Create Agent" creates a traditional AI chat, and "Create App" creates an AI application with a custom interface.
(4) Select "Create App," which will prompt you to choose an app template. Click "Create Blank App."
Next, enter the project name, which is "AI Classical Chinese Generator."
At this point, the project is created, and the system will automatically enter the "AI Classical Chinese Generator" app home page (below), marking the start of formal development.
V. Business Logic
At the top of the app home page, there are two tabs: "Business Logic" and "User Interface," with the default being the "Business Logic" tab.
This section explains how to create business logic, which is the backend AI model.
We use a workflow mode, arranging business logic into individual nodes.
(1) Click the "+" sign next to "Workflow" in the left menu and select "New Workflow."
Enter the name and description of the workflow. (Note: The name can only consist of English letters, numbers, and underscores. In this example, it is classical_chinese_creator.)
(2) After the workflow is created successfully, the name will appear under the "Workflow" tab in the left menu. Click it to enter the "Node Orchestration" canvas for that workflow.
On the canvas, there are two default nodes: "Start" and "End."
(3) Click "Add Node" at the bottom to add a new node, setting its type to "Large Model."
Then, connect these three nodes together (by dragging the control points on the edges).
(4) Configure the "Start" node. Double-click the node to add a content variable in the configuration box, representing the user's input content.
(5) Configure the "Large Model" node.
Configure the options in the configuration window as follows.
Model: Select according to your needs, keeping the default value "Doubao Function call Model".
Input: Rename the original input parameter to content and connect it to the content variable of the "Start" node.
System Prompt: Enter the following content to set the behavior of the large model.
Role
You are a professional Chinese classical author who can accurately rewrite the user's colloquial Chinese content into classical Chinese, without随意扩写.
Skills
Skill 1: Classical Chinese Writing
- When the user provides a passage of vernacular Chinese, quickly rewrite it in classical Chinese.
- Ensure the accuracy and completeness of the rewritten classical Chinese.
Limitations:
- Only perform rewriting into classical Chinese, do not answer questions unrelated to classical Chinese rewriting.
- Strictly adhere to the vernacular Chinese provided by the user for rewriting, do not arbitrarily add content.
User prompt: Enter the following content as a direct command to the system.
Rewrite the vernacular Chinese {{content}} provided by the user into classical Chinese.
The text in the above passage marked with {{content}} indicates where the system will insert the content variable.
Output: Change the output format to "Text".
(6) Configure the "End" node. First, click "Return Text" at the top of the configuration box.
Output variable: Associate the output parameter with the output variable of the "Large Model" node.
Response content: Enter {{output}} (indicating the content to insert from the output variable), and enable "Streaming Output" (i.e., typewriter effect).
At this point, the entire workflow setup is complete. You can click the green "Test Run" button in the upper right corner of the canvas to test whether the workflow is running normally.
In the content input box, enter test content, such as "The weather is very good today."
Then, click the run button below to get the running result (Today, Tian Shan).
If everything is normal, you can start building the user interface.
VI. User Interface Setup: Page Layout
(1) Click on the "User Interface" tab above the canvas.
(2) In the component panel on the left menu, find the layout component > Container component, drag it into the middle canvas to use as the page's title area.
The system automatically names this container Div1, double-click to configure it.
Size: Width 100%, Height 60px.
Layout: Arrangement direction "Horizontal".
Style: Remove background color, set border to gray (#E2E8F0).
(3) Below Div1, drag in another container component, which the system names Div2 to use as the functional area.
Configuration is mostly the same: In the Size section, set both width and height to fill the container; In the Layout section, arrangement direction is horizontal; In the Style section, remove the background color.
(4) On the left side of Div2, drag in a container component Div3 to use as the user input area.
Set the width to 50%, height to 550px, and remove the background color in the style.
(5) On the right side of Div2, drag in a container component Div4 to use as the result display area.
Set the width to 50%, height to 550px, and remove the background color in the style.
At this point, the page layout is as shown in the figure.
VII. User Interface Construction: Page Refinement
After completing the layout, the next step is to refine the page details.
(1) Inside Div1, drag in a recommended component > Text component as the title text.
Set the title content to "AI Classical Chinese Generator", font size to 24, and font weight to bold.
(2) Drag a form component into Div3, remove unnecessary elements, leaving only the text input box and button.
Form component: Set both width and height to fill container and remove the border.
Text input box: Stretch the height, set width to fill container, and set the label and placeholder text to "Input vernacular Chinese".
Button: Change the text to "Generate Classical Chinese".
The final form effect is shown in the figure below.
(3) In Div4, drag a display component > Markdown component to serve as the area for displaying classical Chinese.
Delete the existing content of the Markdown component and change it to "###### Generate Results". Set the height and width to fill the container, round corners to 10, padding to 20, and border to gray (#CBD5E1).
At this point, the page refinement is complete. Click the preview above the properties panel to view the effect.
VIII. User Interface Setup: Configuring Events
After completing the page appearance, configure events to connect the backend business logic with the user interface.
(1) Click the "Generate Classical Chinese" button, switch to "Events" in the configuration panel, and click "New".
Set the event type to "On Click", the action to "Call Workflow", and the workflow to the already created "classicalchinesecreator", and set the workflow input parameters.contentSet the value of the text input box {{ Textarea1.value }}.
(2) Configure the result generation area to display the return results of the workflow.
Select the Markdown component and click the expand button in the "Content" column.
In the expandable panel, in###### 生成结果Add a line at the end to insert the return result of the workflow{{ classical_chinese_creator.data }}.
After completing all the configurations, click the "Preview" button in the upper right corner to test the overall effect.
If everything is normal, this AI application can be considered developed.
9. Application Release
Once development is complete, the application can be released for others to use as well.
Click the "Publish" button in the upper right corner, set the version number to v0.0.1, and set the publishing platform to publish to the Kuaizhi Store.
At this point, it's done. "AI Classical Chinese Generator" is logged into the Kuaizhi Store and made public to the world.
Ten, Summary
Everyone can change the prompt for the AI model input based on this example, let it do different tasks, and then create many different functional applications.
For example, the official "AI Translation" example, is to let the AI translate the Chinese input by the user into other languages, which is similar in function to the "AI Classical Chinese Generator".
In addition to text generation, Kuaizhi also provides many other capabilities, such as fetching external data, database read/write, etc., so that more powerful AI applications can be created.
In short, "Workflow Mode" uses a graphical interface to build an AI application, simple and convenient , allowing you to view the results at any time, publish with one click, and it's worth trying.
（There is a separator here.）
Finally, here is an event announcement.
Kouzi invited me to participate in the "Kouzi Developer Day" held on December 19 in Shanghai Kouzi Developer Day , and everyone is welcome to join.
At the event, ByteDance's AI engineers will interact with everyone face-to-face to discuss how to develop and promote AI applications. This is a great opportunity for learning, exchange, and resource acquisition. Click hereLearn more.
Scan the QR code on the poster below, or click the link , you can register offline now or book a live stream .
(End)