Vibe Cody

Start Building Now!

(no registration required)

What is Vibe Cody?

Vibe Cody is a natural language interface (NLI) built into the Cody Play prototyping platform.

In a nutshell: You use prompts to tell Cody how your software should look and behave.

Cody is a coding agent trained in building apps on the Cody Play platform. He is fast and provides reliable results. No hallucinations or dead ends.

Each version of your prototype can be saved as a Playshot to share it with peers, and open it at any time.

The playshots are managed on a connected prooph board, and Cody can create or update an existing Event Model, based on the information stored in the Playshot.

Vibe Cody is brand new and currently available as a beta version for testing. We’ll add more features in the next weeks, and run test sessions with key users. It’s very likely that apps built with Vibe Cody can be directly deployed to production in the future. At the moment, this is only possible by generating the source code using Cody Engine

Product Status / Feedback / Bug Reporting

We’ve set up a Github project to track status. You can view the project issue board here.

As Vibe Cody is currently under heavy development, you’ll likely hit bugs when testing. Please report any bug on the board linked above or contact the prooph board team directly.

Questionnaire

🙏 We kindly ask our beta testers to fill out this Questionnaire. Your feedback is very welcome and help us to make Vibe Cody the easiest tool for modern app development.

Tips and Tricks

Prompt Suggestions

Start typing in the instructions input to get prompt suggestions. A single space gives you all available prompts.

Focused Elements

Cody can focus a specific element in the app to concentrate his work on this element. Many prompt suggestions only appear in combination with a focused element. To focus an element, click the target icon next to it. Or, tell Cody to focus an element.

Data Structures and Validation

In the first beta version of Vibe Cody you can describe a data structure by defining table columns. We’ll add more possibilities with the next update!

Cody can read specific instructions to add validation logic to a data property or specify its type.

1. Start by telling Cody: “Add the following columns to the table:”
2. Press Shift+Enter to write each column into a dedicated line.

Let’s say we want to develop a little Fleet Management app for a car rental company. We already have pages and tables to manage car Brands and Models, now we want to add a table to manage individual cars in the fleet.

Cody prompt:

Add the following columns to the table:

vin: string|minLength:17|maxLength:17|title:Vehicle Identification Number
brand: Brand
model: Model
licence plate?
status: Ready, Booked, Damaged, Sold
bookable: boolean

The prompt demonstrates different options:

1. vin: is a string with min and max length validation as well as a title used in the UI (vin is still the data property name)
2. brand: is a reference to the Brand data type, it becomes a dropdown in the form to add or edit a car
3. model: similar to brand, a reference to the Model data type
4. licence plate: no type specified, so it defaults to string without any validation, the question mark indicates that licence plate is optional
5. status: a list of fixed string values, it becomes a dropdown in the form to add or edit a car
6. bookable: a boolean type (or flag), it becomes a checkbox in the form to add or edit a car

Types and validation rules are based on JSON Schema. And, Cody will be able to suggest own JSON Schemas soon.

Watch the video to see the result of this prompt:

Colors and Theming

Cody Play uses Material UI as UI library. It ships with powerful theming options, and a theme creator tool with integrated AI. For now, Cody is trained to import themes created with the MUI Theme Creator tool.

Here is how it works:

1. Start by typing: I’d like to change the color theme
2. Cody will provide you with instructions and a link to the theme creator tool.
3. Create a theme and copy the configuration into the instructions input.
4. Switch the color mode in the theme creator and copy the configuration of the second color mode also into the instructions input.

The video demonstrates the usage: