Visual Studio Code

The agent plans and develops code based on your requirements, and generates a program that can be run directly.

The following describes how to develop a clean frontend login page.

1. Click the CodeArts Agent icon on the sidebar to open the chat panel.
2. At the bottom of the input box on the chat panel, choose Built-in > Agent to switch to the agent mode.
   Figure 1 Switching to the agent mode
   

3. In the chat panel, click Vibe Coding to switch to the vibe coding mode.
4. Select the agent running mode and authorize automatic operations.
   1. Click the settings icon in the upper right corner of the chat panel to access the settings page.
   2. Choose Dialog Flow > Agent > Terminal Command Running Mode, select the running policy for the agent to execute terminal commands. This section uses the default running policy (Running in Sandbox).

      A sandbox provides an isolated and restricted execution space for instructions generated by agents. Strict permission controls ensure commands run in a secure, isolated environment. This effectively blocks access to unauthorized resources, like files and networks, and prevents risky commands, such as those that change permissions. For intercepted commands, the agent will issue a risk prompt within a chat. These commands need your second approval before running outside the sandbox.

   3. Choose Dialog Flow > Auto-approve and click to enable the required items.

      After authorization, tasks for generating complex project-level code are executed automatically. Without authorization, some operations will need your manual confirmation when you code with CodeArts Agent.

      Table 1 Parameters for automatic approval

      Parameter	Description	Example
      Edit	Allows the agent to call tools like edit, write, and deleteFile to edit files on your computer.	Enabled
      Open Browser	Allows the agent to access websites in the browser.	Enabled
      Web Crawler	Allows the agent to access and capture specified web page content.	Enabled

   4. Exit the current page to complete the authorization.

5. Develop a frontend page with the agent.
   In the chat box, enter the following prompt and click . CodeArts Agent will create a web page step by step.

   Develop a clean frontend login page.

6. Verify the frontend page.
   1. After the web page is created, click the explorer icon in the left pane.
   2. In the project folder, find the generated login.html, right-click the file, and choose Display in File Explorer from the shortcut menu. Double-click login.html to view the login page.

During coding, you can drop questions in the chat box of CodeArts Agent in the IDE. You can describe your requirements with natural language or provide programming language–specific comments. You can perform all these operations without leaving the current development environment.

1. Click the CodeArts Agent icon on the sidebar to open the chat panel.
2. At the bottom of the input box on the chat panel, choose Built-in > Ask to switch to the intelligent Q&A mode.
3. In the chat box, enter the following prompt and click .

   Analyze what a binary tree is and write a Python code example.

4. The chat box returns the explanation of binary tree and a Python code example. Click in the upper right corner of the code block to add the code to the new file.

   The figure below is only an example. The actual page may vary from it.

   Figure 2 Generated effect
   

5. Ask more questions based on the answer if needed.
   In the chat box, enter the following prompt and click .

   Rewrite the generated Python code in Java.

   The figure below is only an example. The actual page may vary from it.

   Figure 3 Generated Java code
   

Complete the Java code for calculating the nth element of the Fib4 sequence based on the context or comments.

1. Create a Java class file, for example, Solution.java, and enter the following content in the code editor.

   public class Solution {
       /**
        The Fib4 number sequence is a sequence similar to the Fibonacci sequence that's defined as follows:
        fib4(0) -> 0
        fib4(1) -> 0
        fib4(2) -> 2
        fib4(3) -> 0
        fib4(n) -> fib4(n-1) + fib4(n-2) + fib4(n-3) + fib4(n-4).
        Please write a function to efficiently compute the n-th element of the fib4 number sequence. Do not use recursion.
        >>> fib4(5)
        4
        >>> fib4(6)
        8
        >>> fib4(7)
        14
        */
       public int fib4(int n) {
   }
   }

2. Press shortcuts (Alt+C for Windows and Option (⌥)+C for macOS). CodeArts Agent then generates code in the editor based on the comments.

   To obtain accurate and complete multi-line code, add comments in your code requirements.

   The figure below is only an example. The actual page may vary from it.

   Figure 4 Code completion effect
   

3. To accept the generated code, press Tab or click Accept in the editing area.
   Figure 5 Accepting the code completion suggestion