An experiment with Vibe coding on replit - where it works and where it fails

AI Coding Agents

AI coding agents are advanced tools designed to assist developers in writing, debugging, and optimizing code. These agents leverage artificial intelligence and machine learning models to understand natural language commands, generate code snippets, and even handle full-stack development tasks.

Vibe Coding
Vibe coding is a programming technique where developers leverage AI tools to generate code based on natural language prompts, focusing on the desired outcome rather than the technical implementation. Instead of writing code, you describe what you want your app to do, and AI tools handle the technical aspects, including coding.

Replit

Replit is an online Integrated Development Environment (IDE) that allows users to write, run, and deploy code directly from their browser. It supports over 50 programming languages, including Python, JavaScript, and C++ 

Replit is designed for accessibility and ease of use, making it ideal for beginners and experienced developers alike.

Key features of Replit include:

• Real-time collaboration: Multiple users can work on the same project simultaneously.
• Built-in hosting and deployment: Users can deploy their applications directly from the platform.
• AI-powered assistance: The Ghostwriter feature provides code suggestions, autocompletion, and explanations
• No setup required: Everything runs in the cloud, eliminating the need for local installations 
• Replit is particularly popular for rapid prototyping, educational purposes, and collaborative coding projects.

Attempt to build an application on Replit

My objectives were, to create a fairly complex application, front-end, API Integrations, and Backend with DB.

So, this was the initial prompt,

A web-based Engineering Management Dashboard that aggregates team activities from GitHub and JIRA, providing consolidated insights for engineering managers to track their team's progress.

Core Features:

Team management with ability to create teams and add/remove developers

Integration with GitHub API to track code contributions (commits, pull requests, reviews)

Integration with JIRA API to monitor work item status and updates

Chronological activity feed for each developer combining both GitHub and JIRA updates with date filtering

Team dashboard showing consolidated metrics and individual developer summary screens

Visual References:

Inspired by GitHub's activity feed and JIRA's project dashboards, combining clean data presentation with actionable insights.

My Observations:

Excellent ability to create an initial prototype. It knows so much about the domain, to understood the context and did lot of customization by itself. For ex. Created widgets, used native Github and JIRA terminologies, . I liked the communication back to the user. You will be blown away by the output of the first version!

An application build plan was discussed and asked for approval. Code fairly well organized and easy to understand.

The choice of frameworks, components and node modules looks very new and modern.

Replit created the DB schema as below, It's very decent for the purpose. 

 I was very impressed by the creation of persistence layer, together with insertion of the seed data. 

It would have taken around 20 hours for a developer to build this app, replit did it in 20 mins!.  

Adding the first feature

I asked for this feature,

    Ability to add team members in the team view with below attributes - Name, Email, GitId, Jira Id

Agent performed below task, and displayed below message. Again impressed by the communication.

I'm analyzing our current progress on implementing the "Add Team Member" feature.
✓ Created add-team-member-dialog component

✓ Created add-team-member-form component
✓ Created a dedicated add-developer page
✓ Updated the team page with an "Add Developer" button
✓ Added route for the add-developer page

But I could see that all the files were updated, but the feature was not working. I looked at the code and realized that it was not getting triggered. So, I manually triggered by custom url, the page appeared.

Next, I wanted to update the GitHub and JIRA API keys to test if they are working. I found it very difficult to navigate the flow and test the changes. As I was trying multiple attempt to debug the issues, I realized that I need to move to the "Developer" leading mode. Agent sounded confused for many questions.

At this stage, I could not continue on the replit agent, I took out the code to my local to continue with developer lead way (AI as assistant).

Conclusions

The ease with which non-developers can customize applications generated by AI coding tools varies depending on the complexity of the desired modifications and the specific platform being used. Non-developers should approach AI coding for prototyping with realistic expectations, recognizing that while these tools are powerful, they are not a substitute for software development expertise, especially when dealing with complex applications or aiming for production-ready code.

Agentic AI tools (Vibe Coding) are useful for non-developers to to create quick prototypes. It works best with UI heavy applications built with HTML, CSS, Java Script and Node. How ever further customization of the Agent build application will not be smooth sailing. There are rapid development in capability, but AI Agents are not reached a stage were one can create a production grade full-stack application without the involvement of expert developers.