Laravert

Home web

Inspiration As vocational high school (SMK) students majoring in Software Engineering, we live in two worlds. In school, our curriculum focuses heavily on the stability of Laravel (PHP), but the tech industry and hackathons demand the interactivity and speed of Next.js (TypeScript).

We often found ourselves in a frustrating cycle: building backend logic in Laravel for school assignments, then manually rewriting it into Next.js for our personal projects and portfolios. We realized this "context switching" wasn't just our problem—it's a pain point for thousands of developers migrating legacy codebases.

We didn't want a simple syntax translator. We wanted a bridge. Laravert was born from our desire to create an intelligent assistant that understands "The Laravel Way" and automatically refactors it into "The Next.js Way," saving developers hours of tedious work.

What it does Laravert is an intelligent Pattern Migration Engine powered by Google Gemini. It allows developers to paste their legacy Laravel Controller code and instantly generates a production-ready Next.js Server Action.

Unlike basic regex-based converters, Laravert understands the intent of the code:

Smart Refactoring: It transforms a Laravel Controller method (e.g., store, update) into a Next.js Server Action with the correct 'use server' directive.

Type Safety: It automatically converts Laravel's $request->validate([...]) rules into strict Zod schemas, ensuring runtime type safety in TypeScript.

ORM Translation: It translates Eloquent ORM queries (like Post::create or User::where) into optimized Prisma ORM syntax.

Response Handling: It replaces Laravel's return view() or redirect() with Next.js equivalents like revalidatePath() or redirect().

How we built it We built Laravert using a modern, edge-ready stack:

Frontend: Built with Next.js 15 (App Router) and styled with Tailwind CSS for a sleek, glassmorphism UI. We integrated Monaco Editor to give users a familiar, VS Code-like coding experience directly in the browser.

AI Engine: We utilized the Google Gemini 1.5 Flash model via the Vercel AI SDK. We chose the Flash model for its incredible balance of speed and reasoning capability, which is crucial for a real-time coding tool.

Prompt Engineering: We crafted a sophisticated "System Instruction" that acts as a Senior Backend Architect. This prompt guides Gemini to follow strict rules—such as enforcing Zod validation and Prisma syntax—rather than just translating code line-by-line.

Challenges we ran into Our biggest hurdle was handling the real-time communication between the AI model and the code editor.

State Management Conflicts: Initially, we used the useChat hook, but it conflicted with the Monaco Editor's internal state. This caused the editor to crash or display [object Object] instead of code.

Streaming Issues: We faced errors like append is not a function and stream parsing failures because the standard chat hooks weren't designed for a "single-shot" code conversion workflow.

The Fix: We re-architected our data fetching logic. We switched to a custom fetch implementation on the client side and used generateText on the server side to ensure the code is fully generated and formatted before being delivered to the editor.

Accomplishments that we're proud of Solving a Real Problem: We built a tool that we actually use. Seeing the AI correctly convert a complex Laravel store method—complete with validation logic—into a working Next.js Server Action for the first time was a magical moment.

Mastering the Stack: We learned how to integrate the Gemini API into a full-stack Next.js application and handle complex state management.

Teamwork: As a team of students (Fatih, Nawfal, Narayana, and myself), we successfully divided roles—from prompt engineering to frontend architecture—to ship a polished product in a short time.

What we learned We learned that Prompt Engineering is actually Logic Engineering. Telling the AI what to do wasn't enough; we had to explain how a Laravel developer thinks versus how a Next.js developer thinks. We also gained deep experience in debugging "Edge Runtime" issues and optimizing AI responses for code generation tasks.

What's next for Laravert We have big plans to expand Laravert:

VS Code Extension: Bringing Laravert directly into the IDE so developers can migrate files with a right-click.

Vue/Nuxt Support: Since many Laravel developers also love Vue.js, adding support for Nuxt Server Actions is our next priority.

Project-Wide Migration: Upgrading the AI context to handle entire folders or multiple files at once, not just single controllers.