UI Designer

To integrate AI chat capabilities, create and publish a Model Studio agent application or workflow application. Then obtain an API key to call Model Studio services.

Step 1: Create a UI

Creating a UI generates the initial page structure. You can use it as the foundation for adding components and designing layouts.

1. Select a UI template

   You can go to the UI Designer page. Click Create UI and choose a UI template from the left panel.

   Model Studio provides four preset templates: Smart Travel Assistant, Agent Portal, Basic AI Chat, and Enterprise AI Knowledge Base Lite. It also offers a blank template. Preset templates include prebuilt components and interfaces, which you can modify directly or use for custom development. The blank template requires full design from scratch.

   Template overview

   Template name	Description	Supported devices	Preview
   Blank template	No styling. Start from scratch.	PC, H5	No preset components. Blank canvas only.
   Smart Travel Assistant	An AI generates personalized travel plans through natural language conversations. The UI updates dynamically.	PC
   Agent Portal	Build a dedicated agent portal for your enterprise. Manage and publish multiple agents in one place.	PC
   Basic AI Chat	A basic AI chat template. Get started with the UI Designer. Build an AI chat session application quickly.	PC
   Enterprise AI Knowledge Base Lite	An AI knowledge management tool. Supports smart Q&A on PC and mobile devices. Includes data analytics.	PC, H5

   We use the Enterprise AI Knowledge Base Lite template as an example.

2. Fill in basic information

   • Application name and application description: Enter custom values. Use meaningful names and descriptions to identify the purpose of the application.

   • Model Studio API key: You can select a Model Studio API key.

   • Model Studio Agent: Select a published Model Studio application.

   • Upload icon (optional): You can upload your own icon.

   If you cannot select an API key or Model Studio application, confirm that the workspace where you create the UI matches the workspace of the required API key and application.

3. Configure database table mapping

   Some UI templates include built-in database tables for storing runtime data, such as the kb_chat_list session records. These tables have a fixed structure and cannot be modified. You can click the Database Table Name In Template column's icon to view them.

   When configuring the mapping, specify only the table name. If the table does not exist in the database, the system automatically creates it using the template structure. If a table with the same name exists, the system uses it and retains existing data.

   Note: When using an existing table, ensure its structure matches the built-in template table exactly. Otherwise, runtime errors may occur.

   After UI creation, you can view table details in the database. If the table has no data, it is likely because no related actions have been taken yet. For example, the kb_chat_list table generates records only after users ask questions.

Step 2: Edit the UI

You can build pages by dragging and dropping components. The component panel on the left provides UI elements, such as buttons, input fields, display widgets, and navigation bars. Add the required page components to your page. Adjust their positions and styles to meet your business needs. Complete page building.

If you need custom images or files, upload them during page building. Alternatively, upload them in advance on the files page. Uploaded files appear on the files page. For more information, see UI application data.

Step 3: Publish and share

1. After building the UI, click the Publish button in the top-right corner of the designer. You can publish to the development environment or production environment. After publishing, click Access application to try your UI.

   Environment comparison	Development environment	Production environment
   Environment Description	Used for development, testing, and validation.	An environment deployed with the end-user software version.
   Access method	Access via the domain name provided by the platform.	Access via the domain name provided by the platform or set a custom endpoint.
   Validity period	The published UI expires in 24 hours. Republish to access again.	The published UI remains valid indefinitely.
   Is there a fee?	Free	Subscribe to a paid plan. Also configure a domain name. For details, see Product billing.

2. On the UI Designer page, hover over a published UI. Click Environment deployment.

3. Share the application URL with other users. By default, any Alibaba Cloud user with the link can access it. Click Unpublish to stop the application.

Configure access permissions (optional)

By default, any Alibaba Cloud user with the link can access the published UI. You can also allow anonymous users to access the UI. Anonymous users can ask questions in the chat session but cannot access the admin console.

1. In the UI Designer, click the icon in the bottom-left corner. In Logon configuration, turn on Allow anonymous access. Then click Anonymous user permission group configuration.

2. Select an environment. On the Application access permissions tab, check the UI you built. Click Permission settings.

3. Select the pages to expose to users. Click Confirm.

4. Log out of the administrator account. Open the UI URL and verify that the permission settings work.

On the UI Designer page, I see “This application is currently being edited” while editing or configuring a UI. How do I fix this?

This happens if the UI is open in another browser window. You can close that window to resume editing. Alternatively, click Get edit permission to force-close other open windows.