Introduction
Coding agents like Claude Code or Codex have been drastically changing how computer programmers work over the past year, and will continue to do so. They can write code much faster than human programmers, and they even enable people who don’t know coding to create apps and websites by simply describing them with words - so called “vibe coding”.
At this point of time, no one can predict what software engineering looks like in 10 years, or how AI would transform other types of jobs. However, it is pretty obvious that everyone would be using AI agents as part of their work, so it is an important skill for every student to pick up.
Today, we are introducing a new “agent mode” for the XO AI assistant. In this mode, XO would not just “chat”, but actually make changes to the assets or code blocks in your project directly based on your instructions, such as adding a background image or changing some code blocks. If you learn to use the agent mode well, you will not only build projects faster on CreatiCode, but also become more comfortable working with other agents for learning or work in the future.
Turn On/Off the Agent Mode
To use XO in the agent mode, you simply need to check this checkbox in the XO chat window, and your selection will be remembered. Uncheck it to return to the previous “chat-only” mode.
47a9e112-2738-476f-917a-0905410daaa6-image.png
For teachers, you can enable or disable this feature for the class in the class management page:
0db657a0-3f18-4e8b-b285-327d30893bf4-image.png
Basics of Working with the XO Agent
When working with the XO agent, this is typically what would happen:
You
start with a request to build something new or change an existing project;
The XO agent may ask you some questions to
confirm/clarify what you want to do;
After the agent has gathered enough information, it will
start working on the request, such as adding a costume (search in the AI image library or draw a new svg costume), adding a new sprite, adding code blocks to a sprite, changing some code blocks in a sprite, etc.
The agent will stop after completing a reasonable milestone, and ask you to
review its work. You can ask it to change its work or continue to the next milestone. Of course, if your request is relatively small, it may finish all the work in one go.
Prompt Clinic Score
Every time you submit a message, it will be scored based on how well it is written. This is our “Prompt Clinic” tool that helps you improve prompting skills over time.
If the score is 1 (the lowest), that means your request maybe unclear or confusing, so it will NOT be sent to XO; if the score is 2 to 5, then the request will be sent to XO as usual (not blocked).
ae3dba94-15c2-4b2c-9c01-8334e5a68726-image.png
When the score is 1, you can click the continue anyway button to force the agent to respond, but we strongly recommend you to send a new request that is clearer and more detailed.
Read more about the Prompt Clinic in this post.
Example Workflow - Create a Game
Below is a more concrete example of how you can work with the XO agent to build a simple game. It is just an example to give you some idea how it works, and when you use the agent yourself, it may behave very differently depending on how you prompt itt.
Step 1 - Turn On the Agent Mode
Create a new project, open the XO chat window, and turn on the agent mode. You can turn it off to return to the “chat” mode, or close the window using the “X” button at top right.
t1.gif
Step 2 - Submit a new request
Since we are starting from a blank project, make sure the agent knows what type of game you want to build, and provide enough information for it to get started (the more the better). If the game is kind of well known, then it should know what to build from the name, but if it is a more original game idea, then you need to provide more information.
For this example, we will start with this request: build a classic breakout game, with a few rows of breaks at top, and the player controls a paddle to bounce a ball up to break the bricks.
2fd1740d-a158-4585-8049-ee9f596d002d-image.png
As shown, the Prompt Clinic gave it a score of 3 (Solid), because it is very broad and missing many details. That’s still good enough for now.
Step 4 - Refine the request
In the previous step, the agent first suggested a first milestone that it can work togethers, then asked 2 questions, one on the color of bricks, and another one whether to get started on the first milestone.
It is always a good idea to answer the agent’s questions, unless you want to make big changes in the plane.
In this case, suppose we don’t want the agent to start coding yet. Instead, we want it to prepare all the sprites and the backdrop first. We can provide more details like this: make the bricks colorful. Also, don’t work on any code yet. For first milestone, only prepare the sprites and the backdrop.
This is a fairly “strong” prompt that specifies the exact scope of work for the agent to work on. As you will see, the Prompt Clinic rated it as 5 (Exceptional).
t3.gif
After some thoughts, the agent decided that it has enough information to get to work! It generated a simple blue background, and 5 colored bricks. During this time, the XO chat window is minimized at the bottom right, so we can observe what it is doing. When it is done, it presents a summary of what it did for us to review, and also suggests what can be done next:
d6769243-1402-48ac-a8c7-86833a46e9b0-image.png
The stage looks like this now:
9adc709f-ebf1-4fb3-9a80-e190fc729852-image.png
Step 5 - Prepare more assets
In the previous step, the agent did not generate the paddle and the ball, which are also essential to the breakout game. This is because the agent is instructed to only work on small milestones and do not do “too much” in each run. This allows the user to review its work without overwhelming them. In this case, the agent already created a backdrop and 5 brick sprites, so it “feels” this may be a good time to stop.
For this step, we can simply make it finish the artwork: add the paddle and the ball, and remove the dog sprite. Of course, we could just remove the dog sprite ourselves, but this is a good test.
t5.gif
It turns out the agent did a pretty good job in following our instruction.
Step 6 - Improve the assets
Before continuing, we should fix another problem: the agent added 5 brick sprites with different colors. However, to be more efficient, we should only have one brick sprite with multiple costumes, so we can easily create clones of this sprite. This is where if you know how to code already, you can point out issues with the agent’s work.
t6.gif
As shown, the agent created the single Brick sprite, and then deleted most of the existing bricks. It somehow missed the purple brick (the agent is not perfect), so we have to delete it ourselves to save time.
Now the project has all the sprites we need, and the agent also renamed our project based on our request:
084ee732-30ba-439a-882b-1f8807633d60-image.png
Step 7 - Add Code Blocks
Finally, we are ready to ask the agent to start coding. It is always a good idea to give the agent a small milestone to work on. In this case, let’s make it focus on the bricks:now add code to the Brick sprite so it creates 5 rows of bricks, 10 in each row, using clones.
t7.gif
This time the agent added some blocks to the Brick sprite. It will create the bricks at top like this:
01dc8ce0-0f23-4a75-bea2-25a6fb48b6e6-image.png
Step 8 - Retry a step
Whenever we submit a new request, a snapshot of the entire project is taken, so if we don’t like what the agent did, we can revert the project to its previous state and try again.
In this example, the bricks are all the same color for each row. Suppose we want to make the colors more random, we can send a new message to ask the agent to fix it, or we can trigger a “retry”:
t8.gif
As shown, after we click “retry” and confirm, the project is reverted to its state before any code was added to the Brick sprite, and our message is copied into the input box for us to reuse. In this case, we will simply add some addition requirement that the bricks have to be random:
t9.gif
Now we get a random brick wall like this:
50485d74-2da1-4bfa-bb1d-3e5c3904ac8c-image.png
The game is still not done, but we will stop the example here since you have seen how the agent works. Feel free to create this game or any other project you like.
Conclusion
In summary, the XO agent is not perfect, but it can already help you build your dream project faster and maybe better. The more you use it, the more you will understand its strength and weakness. Give it a try!
