Vibe Coding Overview
Vibe coding is a coding method that uses natural language to guide AI instead of writing code line by line. CodeHS now has a Vibe Coding app where you can prompt an AI agent with your idea! Once your idea comes to life in the IDE, you can continue prompting to make changes to your program or ask for explanations to describe the updates that were made.
You can find the Vibe Coding app under the Assignments category in the left-hand navigation menu:
You can also access Vibe Coding through the Sandbox:
Using the Vibe Coding App Tools
The Vibe Coding app features five tools, which can be accessed by the tabs at the top of the page: Quickstart, My Vibe Code Items, My Threads, Student Threads, and Student Settings.
Quickstart
In the Quickstart tool, you’ll find a chat box where you can enter an initial prompt describing what you’d like to build. If you’re not sure where to start, you can also choose from a set of pre-made examples.
After you enter a prompt, click the blue "Go" button to launch a Vibe Coding HTML Sandbox program.
Using the Vibe Coding Chat
After entering your initial prompt, you will be taken to an HTML Sandbox program. You can click the Vibe Code chat bubble icon at the top left to return to the chat at any point.
⚠️ Vibe Coding is only compatible with HTML programs. Additionally, Real-Time Collaboration is not available in Vibe Coding Programs.
In the Vibe Code chat view, you can continue to prompt the AI agent and describe what you want to build, change, or understand in your program. Often, the more specific the prompt, the more helpful the AI’s response will be.
Example prompts:
“Create a simple HTML page with a title, heading, and paragraph about learning computer science.”
“Change the background color to light blue and add a button that says 'Click to Learn More'.”
“Explain what this CSS code does.”
After each prompt, the AI will either update the code directly in the editor or explain how the code works. You can also click the question mark button on the AI’s response at any point to get a more detailed explanation of the code that was added or changed in your program:
The Vibe Coding chat also includes AI moderation that declines requests unrelated to coding to help ensure appropriate educational use.
Supporting Student Learning
The Vibe Coding feature in CodeHS is designed to support student learning and productivity, not replace it. It helps students engage with their code through iterative experimentation, feedback, and refinement. This encourages problem-solving skills and a stronger grasp of programming concepts.
My Vibe Code Items
In the My Vibe Code Items tool, you'll find a table of the programs you’ve built with Vibe Code. You can click on any program title to continue working on it, and view additional details such as the program type, date created, and last updated date.
You can also click the three dots (“…”) on the right side of a program to rename, copy, or delete it.
My Threads
In the My Threads tool, you'll find your own Vibe Coding conversation activity. Each thread shows the number of messages sent in that program’s Vibe Code chat.
You can click on the message count to the right of any thread to open a side panel showing the chat messages from that specific thread. You can also click the arrow all the way to the right to open the thread's related vibe code program in a new window.
Student Threads
In the Student Threads tool, you’ll find your students’ Vibe Coding conversation activity by program. Each thread shows the number of messages sent in that program’s Vibe Code chat. You can also use the Section and Student dropdown menus at the top to filter student threads by section or individual student.
You can click on the message count to the right of any thread to open a side panel showing the chat messages from that specific thread. You can also click the arrow all the way to the right to open the thread's related vibe code program in a new window.
If a student's program is flagged for inappropriate content, you will see a Flagged button to the right of the thread name. Click this button to view the student message that was blocked.
Student Settings
In the Student Settings tool, you can manage which students have access to Vibe Coding in the Sandbox and view each student's weekly and monthly usage limits, as well as any additional Vibe Coding credit grants.
You can enable or disable Vibe Coding access by adjusting the Sandbox Vibe Code Enabled toggle for the entire class or individual students.
⚠️ Teachers need to opt in their students through the Student Settings tool for students to have access to this feature.
The Vibe Coding app is available as part of CodeHS Pro. To get CodeHS Pro for your school, contact our team at sales@codehs.com.















