Introduction to CodeGenie: The Most Powerful AI-Powered Programming Assistant for HarmonyOS Next

#harmonyosnext

Introduction to CodeGenie: The Most Powerful AI-Powered Programming Assistant for HarmonyOS Next

Background Introduction

With the rise of large language models, AI-powered coding assistance has first found its application in the field of intelligent programming. From Microsoft Copilot internationally to domestic solutions like Alibaba's Tongyi and ByteDance's MarsCode, various Copilot-style intelligent programming tools have emerged. As a relatively new operating system that has only been available for about a year, HarmonyOS Next initially faced limitations in intelligence due to its limited codebase and documentation. However, with the rapid development of the HarmonyOS Next ecosystem, Huawei has officially launched its AI-powered programming assistant tool, CodeGenie.

The DevEco AI Programming Assistant (CodeGenie) provides developers with efficient AI-powered support for application and service development. It offers intelligent knowledge Q&A capabilities, ArkTS code generation, and the ability to create Universal Cards, helping developers significantly improve their coding efficiency. CodeGenie operates as a plugin within the DevEco Studio environment. This article focuses on introducing CodeGenie's capabilities and usage.

Tool Installation

Download from Official Website
- Visit the Huawei Developer Official Website to find and download CodeGenie.
Installation in DevEco Studio
- Open DevEco Studio → Click on "DevEco Studio" in the menu bar → Select "Preferences" → Click on "Plugins"
- Click the settings icon → Select "Install Plugin from Disk" → Choose the downloaded CodeGenie package
- After installation, restart DevEco Studio
Activation
- After restarting DevEco Studio, click on the CodeGenie icon on the right side to open the CodeGenie panel
- Click "Login" to complete the installation of CodeGenie

CodeGenie Feature Overview

CodeGenie currently offers three main capabilities: HarmonyOS applications, Universal Cards, and code generation.

HarmonyOS Applications

The HarmonyOS application feature (previously known as intelligent Q&A) utilizes generative search capabilities to efficiently understand user intentions through query generation and content optimization services, providing interactive Q&A for coding-related knowledge.

Universal Cards

Based on AI large models, this feature understands developers' card requirements and intelligently generates HarmonyOS Universal Card projects through conversational interaction.

Official recommendations for describing card requirements:


No.	Recommended Description Dimensions	Explanation	Examples
1	Card Purpose	The purpose/business scenario of the card, such as e-commerce shopping, entertainment, lifestyle services, etc.	Examples: "E-commerce shopping card", "Entertainment card"
2	Card Functionality	Components included in the card, such as icons, titles, buttons, etc.; component state information, such as icon themes, title content, button text, etc.	Examples: "New product launch main title", "Product search button", "Hot movies subsection entry"
3	Card Dimensions	Four card sizes provided by HarmonyOS official website: 12 (micro card), 22 (small card), 24 (medium card), 44 (large card); Card size is optional, AI will intelligently select the most suitable size based on the first two dimensions described.	Examples: "2*2 size card", "medium card"

Currently, incremental modifications through additional descriptions after generating the card preview are not supported.

Examples:

Click on the areas in the image to view the generated card's UI code, configuration information, and download static resource files:

There are two ways to save card projects:

Method 1: Manually save card code and configuration information using buttons like "Copy", "Insert", or "Create File" in the code/configuration viewing window.

Method 2: Click the "Save Project" button to automatically save the card project, with card code, configuration, and static resource files automatically saved to the corresponding directories in the project. The logic code is selected by default, which is used to configure card events and data.

After clicking "Save Project," a project configuration dialog will appear:

Click "Next" to modify the configuration code:

After the project is saved, the following card-related files will be added to the project:

Additionally, you can customize the configuration logic code, which includes two categories:

Card Data Interaction: Triggers card page refreshes. For application projects, data interaction can be triggered through database or network requests; for meta-service projects, data interaction is triggered via network requests.
Card Events: Use router events to navigate to specified UIAbilities, call events to launch UIAbilities in the background, and message events to refresh card content.

Code Generation

This feature utilizes AI large models to analyze and understand the context information in the code editing area or natural language descriptions, intelligently generating ArkTS or C++ code snippets that fit the context. It supports both shortcut-key triggered code generation in the code editing area and natural language description-based generation.

It is generally recommended to use code generation when there is sufficient context in the editor for the model to understand the programming scenario. With limited content in the editor, AI may not effectively understand user intent and generate appropriate code.

Model response requirements: Within 10 lines above the cursor, there should be more than 5 lines of valid code (excluding standalone {}、()、[] bracket lines, empty lines, and pure comment lines) to help the model understand the code context.

After installing CodeGenie, simply pause briefly while coding, and CodeGenie will instantly generate code at the current line. If you approve of the suggested content, press Tab to accept it, or press ESC to ignore the generated content.

When CodeGenie is installed, pressing Enter in the coding area will display multiple lines of code snippets generated by CodeGenie based on the context. Use the Tab key to accept the generated content or ESC to ignore it.

Common Keyboard Shortcuts

Enter: Trigger automatic generation under function/method signatures
Tab: Accept current generation result
Esc: Ignore current generation result
Alt+[(Windows) / Option+[(Mac): View previous recommendation
Alt+](Windows) / Option+](Mac): View next recommendation
Alt+X(Windows) / Option+X(Mac): Manually trigger single-line code generation
Alt+C(Windows) / Option+C(Mac): Manually trigger code generation
Alt+R(Windows) / Option+R(Mac): Regenerate code
Alt+U(Windows) / Option+U(Mac): Open right-side dialog for features and settings