Image by Editor | ChatGPT# Introduction
Vibe coding is a new term for approaching code-based development with natural language prompts to generate working code instead of writing it manually. By explaining what we want to an AI assistant, we can acquire code that we can run and then refine with further prompts. The main idea is that we don’t need to understand the code syntax deeply to still acquire the benefits.
Often, vibe coding in typical LLM products, such as ChatGPT, results in fragmented code that is difficult to assemble into a complete project. We need to refine the code multiple times before it becomes useful, and you might require advanced skills if things don’t work as expected. That’s why companies are building AI agents capable of constructing entire coding projects from simple vibe coding; one of them is Replit.
In this article, we will go through how to use vibe coding to build something useful. We will explore the considerations when building with vibe coding and the issues you might encounter.
Curious? Let’s get into it.
# Vibe Coding with Replit
Vibe coding is all about providing a precise description of what you want to achieve. By developing a prompt that explains our project in detail, we can get a much better result.
However, not everyone who performs vibe coding is adept at programming, so they might not be able to describe the technology and project structure in great detail. This is why we can do vibe coding with a tool such as Replit, which provides a complete code project structure from only a simple prompt.
Let’s work on creating a simple stock price explorer using Replit. First, register and navigate to the home page, which should look similar to the image below.
Then, pass a descriptive prompt for the application we want to make. For example, here is my prompt to develop the stock price explorer based on Python.
Create a Python-based web app called Stock Price Explorer. It allows users to enter a stock ticker (like AAPL, MSFT, or BTC-USD), choose a date range, and visualize stock prices and basic analysis like moving averages and volatility.
Start the chat and wait for some time for Replit to finish the overall planning. When it is completed, you will see an approval form similar to the image below.
You can continue chatting with the agent to adjust the plan details proposed by Replit, which you can then pass into the input form, as shown below.
Alternatively, you can choose to approve the plan and begin creating the application. Wait for a while until the agent completes the development of the application. You can choose to receive a notification when the application is ready by either installing the Replit application or simply visiting the dashboard.
When the application development is done, you can see the preview similar to the image below.
All the code used to develop the application is available for us to view in the adjacent tabs. Additionally, we can preview the application and use it to determine if it’s working as intended.
Usually, the basic application will work well according to the prompt we provide, although there are still many considerations to review, such as the overall features, bugs, and security.
Security is the most important issue to handle, as many people who perform vibe coding often don’t realize that their important credentials, such as API keys, are pushed into the public domain. This is a security concern that is often only recognized by those in the technical field and overlooked by vibe coders.
For vibe coding, you can use the following prompt to the agent for evaluating bugs and security measures for your application.
Please review the application for potential bugs and suggest any necessary security practices or safeguards that should be implemented before deployment.
Using the prompt above, the Replit agent will evaluate the overall application produced, fix any errors, and provide a comprehensive report on further recommended practices.
Another issue that often arises when vibe coding is external integration with other applications, such as a database or user authentication.
For vibe coders using Replit, the agent often recommends adding various external connections, such as databases. If you have a specific addition in mind, you can go to the Tools tab and ask Replit to incorporate it into your application, as shown in the image below.
Often, it will require you to pay an additional charge for the services, so evaluate them before you decide to use a specific tool.
If you feel the application is already good enough and has all the features we need, we can deploy it to the public. For a more adept user, you can download all the files and deploy them by yourself.
However, if you are not familiar with the deployment process, Replit provides a deployment procedure where we can publish our application with four different deployment types according to our requirements. The deployment selection is shown in the image below.
All of them require payment, so only proceed if you feel the application is ready to use. Otherwise, keep chatting with the agent until you are satisfied with the result.
That’s all you need to know for now. Give it a try, and you’ll be able to vibe code something useful in three hours with Replit.
# Conclusion
Vibe coding is a process that utilizes a generative LLM to produce working code solely from natural language input. Vibe coding is beneficial because many non-developers can create something useful just by providing prompts, without needing to understand the underlying details.
In this article, we explored how to create a stock price explorer with Replit and addressed various issues that may arise, such as bugs, security measures, external tool connections, and deployment.
I hope this has helped!
Cornellius Yudha Wijaya is a data science assistant manager and data writer. While working full-time at Allianz Indonesia, he loves to share Python and data tips via social media and writing media. Cornellius writes on a variety of AI and machine learning topics.
