Skip to main content

Using the Vibe Coding App to Collaboratively Code with AI

Learn how to use the Vibe Coding app in CodeHS to generate and update code with AI

Written by Talia Smith
Pro Feature

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:

Screenshot pointing to the Vibe Coding app button located under the Assignments category in the left hand navigation menu

You can also access Vibe Coding through the Sandbox:

screenshot of the vibe coding button in the Sandbox to access the vibe coding app

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.

Screenshot of the different tools in the Vibe Coding app including 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.

Screenshot of the Vibe Coding quickstart tool which has a chatbox to enter an initial prompt

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.

screenshot of an HTML sandbox program showing the vibe coding chat

⚠️ 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:

Screenshot of the question mark button in the vibe coding chat

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.

Screenshot of the "My Vibe Code Items" app showing a table with information on the programs you've built

You can also click the three dots (“…”) on the right side of a program to rename, copy, or delete it.

Screenshot of the three dots pop up menu to the right of a program showing button options to copy, delete, and rename a program

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.

Screen shot of the Vibe Coding programs/threads that show up in the My Threads tool in the Vibe Coding app

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.

Screenshot of the message count button and arrow button in the threads tool

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.

Screenshot of the Student threads tool showing student's vibe code threads

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.

Screenshot of the student threads in the student threads tool showing the message count button, flagged signal, and arrow button to open a 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.

Screenshot of the Student Settings tool showing the option to enable/disable vibe coding in the sandbox for students, as well as option to view weekly and monthly usage limits and additional 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.

screenshot showing the toggles to enable/disable sandbox vibe coding for individual students and for all 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.

Did this answer your question?