Agent Chats

1. Switch to the agent mode.
   1. Log in to CodeArts Agent IDE as instructed in Quick Start.
   2. At the bottom of the input box on the chat panel, choose Built-in > Agent to switch to the agent mode. The selected model is displayed on the right. You can select a model as required from the drop-down list.
      

      If the chat panel of CodeArts Agent is not displayed, click (Expand AI Sidebar) in the upper right corner of the top menu bar to open it.

   3. On the chat panel, click Vibe Coding.

2. Explain what you need. Type your task into the box, and click or press Enter to submit your request.

   Generate a lightweight music player with a clean, minimalist design and a dark, immersive theme. Use a simple, uncluttered layout with no unnecessary elements. Incorporate a vinyl-inspired texture, and present the lyrics with generous spacing for a breathable visual experience.

   

   • During the response generation, you can initiate a new chat in the input box, and the new chat will be automatically added to the task queue. The task queue supports a maximum of 20 messages waiting to be sent, and any exceeding messages will no longer be accepted.
   • Different models may vary in their generated results; refer to the actual output for the final performance.

3. Check and confirm the plan. The agent generates a to-do list based on your prompt.
   Figure 1 Execution plan
   

4. Watch the process run. Once the plan is confirmed, the task begins step by step. The agent will walk you through each operation for confirmation. You can also expand the to-do list to view the progress of the current task.
   • : The task is completed.
   • : The task is in progress.
   • : The task is not started.

5. Confirm that tasks are completed. After the task is complete, the changed files are stored in the temporary storage area.
6. Confirm the result. Click the arrow next to the file changed to expand the file information. Perform operations as required.
   Figure 2 Result confirmation
   
   • Click the file name to view the generated content.
   • Move the cursor to the file, and click to accept it or to reject it.
   • If there are multiple files, you can click the accept all button to accept all files or click the reject all button to reject all files.

1. Switch to the agent mode.
   1. Log in to CodeArts Agent IDE as instructed in Quick Start.
   2. At the bottom of the input box on the chat panel, choose Built-in > Agent to switch to the agent mode. The selected model is displayed on the right. You can select a model as required from the drop-down list.
      

      If the chat panel of CodeArts Agent is not displayed, click (Expand AI Sidebar) in the upper right corner of the top menu bar to open it.

   3. On the chat panel, click Spec-driven.

2. View the operations step by step following the preset workflow. In the input box, enter the task you want to complete and click or press Enter. The agent will execute sequentially according to the following workflow: requirement specification design > implementation scheme creation > coding task planning > task execution. This ensures that each step advances efficiently and orderly.

   Generate the core logic of a music player according to the following specifications. Strictly follow the requirements with no omission of logic allowed.
   - Supports play, pause, previous track, next track, and loop playback (single/list).
   - The progress bar supports clicking to skip and dragging.
   - The volume range is 0 to 1, defaulted to 0.7 and with mute toggling.
   - Automatically updates the cover, song title, and artist information when switching songs.
   - Implemented using HTML+CSS+JS

   Figure 3 Executing a task based on a specified workflow
   
   • If you confirm that the content of the requirements document basically meets your expectations, click Accept All or click to accept the generated requirements document.
   • If you do not approve the currently generated requirements document, click Reject All or click to reject the generated requirements document. In this case, if the model cannot find the generated document in subsequent steps, it will generate the missing document again.
   • After confirming that the requirements document is correct, click Start Create Solution to initiate the solution generation process.

Beyond spec-driven development, CodeArts Agent can also use slash commands for code development.

1. Switch to the agent mode.
   1. Log in to CodeArts Agent IDE as instructed in Quick Start.
   2. At the bottom of the input box on the chat panel, choose Built-in > Agent to switch to the agent mode. The selected model is displayed on the right. You can select a model as required from the drop-down list.
      

      If the chat panel of CodeArts Agent is not displayed, click (Expand AI Sidebar) in the upper right corner of the top menu bar to open it.

   3. On the chat panel, click Vibe Coding.

2. Create requirement specifications.
   1. Enter a slash (/) in the input box and choose /sdd-new from the shortcut menu.
   2. Enter the task you want to complete (for example, writing a calculator app) and click or press Enter.
   3. The agent generates a requirement specification document named spec.md based on the task you entered. If the generated spec.md file does not meet your expectations, you can manually modify it or use the agent to modify it.
      Figure 4 Generating spec.md
      
   4. Open Project root directory /.codeartsdoer/specs/Name of the generated file. You can find the generated spec.md file.

3. Create a technical design.

   Enter a slash (/) in the input box and choose /sdd-design from the shortcut menu. Then enter the artifact folder name (for example, calculator) and click or press Enter.

   The agent generates the design.md file based on the spec.md file obtained in the previous step. If the generated design.md file does not meet your expectations, you can manually modify it or use the agent to modify it.

   Figure 5 Generate design.md
   

4. Create a coding task list.

   Enter a slash (/) in the input box and choose /sdd-tasks from the shortcut menu. Then enter the artifact folder name (for example, calculator) and click or press Enter.

   The agent generates the task list tasks.md based on spec.md and design.md. If the generated tasks.md file does not meet your expectations, you can manually modify it or use the agent to modify it.

5. Perform coding tasks.

   Enter a slash (/) in the input box and choose /sdd-apply from the shortcut menu. Then enter the artifact folder name (for example, calculator) and click or press Enter.

   The agent performs coding tasks item by item according to tasks.md.