Inspiration
Roblox game development is incredibly popular but comes with a steep learning curve, especially when it comes to scripting in Luau and managing project workflows. We wanted to bridge the gap between a creator's vision and technical execution. The inspiration was to bring the power of modern LLMs into a tailored, highly customizable workspace designed specifically for Roblox developers, making game creation faster, more accessible, and much more fun.
What it does
VibeCoder is an AI-driven workspace that acts as your co-pilot for Roblox game creation. It translates natural language prompts—and even real-time voice input—into functional Luau scripts, structural game logic, and asset recommendations. It features a highly personalized chat interface where users can bring their own API keys (Gemini, OpenAI, Anthropic) and deeply customize their environment. You can tweak everything from the AI response fonts to a tactile, mechanical 3D send button, and toggle experimental features like AST-patching for faster code generation.
How we built it
We built the frontend using React 19 and Vite, styling it with Tailwind CSS for rapid, responsive design, and Framer Motion for fluid animations. The backend is powered by Express and Node.js, bundled cleanly with ESBuild. We focused heavily on the UI/UX architecture, utilizing robust local state management (localStorage) to persist complex user configurations—like custom API keys, UI preferences, and experimental feature flags—without requiring a heavy database backend for unauthenticated users.
Challenges we ran into
One of our fun but surprisingly complex challenges was UI craftsmanship—specifically, engineering a custom, tactile mechanical 3D button. We had to move away from brittle CSS box-shadows and instead build a structural DOM approach with nested wrapper divs to create a true physical depression effect that dynamically adapts to user-selected colors. Additionally, orchestrating multi-model API support while cleanly managing the state of our "Experimental Lab" (handling permissions for features like Wikimedia API access and AST patching) required building a very modular and extensible state architecture.
Accomplishments that we're proud of
We are incredibly proud of the deep personalization engine and the sheer level of polish in the user interface. The modular settings panel allows users to fine-tune their workspace exactly to their liking. We're also proud of successfully integrating hands-free voice input and structuring a clean, extensible codebase that is fully prepared to handle advanced AI features in the future.
What we learned
Building VibeCoder taught us a lot about advanced DOM manipulation for custom interactive UI elements. We also learned how to effectively build flexible wrappers around multiple different LLM provider APIs, giving users the ultimate freedom of choice, and how to manage complex, cascading user preferences securely entirely on the client side.
What's next for VibeCoder
The next major step for VibeCoder is introducing Context Caching and RAG (Retrieval-Augmented Generation) to give the AI deep, persistent awareness of a user's entire Roblox project structure. We are also experimenting with Multi-Agent Parallelism (Swarm Architecture) so that different AI agents can simultaneously work on server scripts, client scripts, and UI design. Finally, we plan to build tighter integrations with Rojo workflows to allow seamless, one-click syncing directly into Roblox Studio.
Built With
- anthropic
- artificial-intelligence
- css3
- developer-tools
- esbuild
- express.js
- framer-motion
- gemini-api
- html5
- javascript
- llm
- luau
- node.js
- openai
- react
- roblox
- tailwind-css
- typescript
- vite
- web-speech-api
- wikimedia-api

Log in or sign up for Devpost to join the conversation.