Guii offers a development experience similar to drawing on a canvas. By adding Guii Devtools to your codebase, you can interact directly on a webpage—selecting visual elements like boxes, text, or areas, and making real-time modifications. It’s more than a copilot; it’s a way to merge visual design and coding effortlessly.
After selecting an element, you can prompt for changes, preview the updated design, and choose whether to accept or reject the generated code.
Guii isn’t just for experienced developers. Beginners can generate applications—such as games or static websites—on a blank canvas, and then iterate on them. With Guii Tutor (in development), as each part of an application is modified, users can learn how different code sections interact, enabling learning through reverse engineering.
The project also benefits from contributions by Rizumu, a core contributor to Vue.js (https://x.com/OikawaRizumu).
The Challenge: Combining Creativity and Code
Today, developers face a growing divide between creative design and coding. Existing tools often fail to integrate the two processes, forcing designers and developers to work in silos. This approach creates friction, where design changes require back-and-forth communication, slowing down iteration cycles and leading to inefficiencies.
Existing developer tools like V0 by Vercel or Cursor allow users to generate complete blocks of code, but they fall short when it comes to making specific, targeted changes directly on the page. For example, it’s not possible to click on a “Hello World” button in a preview and prompt, “change this to blue”—a limitation that makes quick, precise iterations cumbersome.
Building a solution that integrates design and code seamlessly presents its own technical hurdles. Vue.js, for instance, has a component-based architecture that makes parsing complex. The strict type system of TypeScript, while maintaining quality, complicates the task of understanding the original source code to make targeted modifications. Additionally, leveraging build tools like Vite to provide instant feedback and code updates is challenging, especially when dealing with bundled or minified assets.
A major roadblock in achieving a seamless developer experience has been the speed of inference. Existing solutions often introduce delays that make it hard to iterate quickly and maintain creative momentum. Without near-instant feedback, developers struggle to refine their ideas efficiently, resulting in frustration and a fragmented experience.
We saw these challenges as opportunities to develop a tool that reduces friction, integrates design seamlessly into the development process, and provides an intuitive experience for developers.
How We Built This
To make Guii a reality, we focused on creating a tool that feels intuitive and natural for developers. The goal was to allow users to make changes visually—like pointing to a button and saying, “Make this blue”—and have Guii translate that into the right code, all without disrupting the developer’s workflow. We wanted everything to happen directly within the codebase, seamlessly integrating with existing projects.
To achieve this, we built a system that understands the structure of your project. Guii analyzes the different parts of the codebase, identifies how they connect, and provides meaningful suggestions that match the context of what you’re working on. For example, if you’re using a popular framework like Vue or React, Guii is smart enough to know how to modify the components in a way that keeps everything working smoothly.
We also wanted to make sure developers could see their changes in real time. By leveraging modern build tools, Guii offers instant previews of code modifications right in your browser, so you don’t have to switch between different environments or manually update anything. Everything happens in one place, making the development experience smoother and faster.
An essential part of creating this seamless experience was incorporating super-fast inference. By using Cerebras inference, Guii provides a significant speed boost compared to other options. With 2,150 tokens per second for Llama3.1-70B, this represents a 16x speedup over previous inference providers. This boost in speed means that developers get immediate feedback when they make changes, helping them stay in the creative flow without waiting around for results. The faster response time is what makes Guii feel responsive and easy to use, keeping the focus on creativity and iteration without interruption.
We also prioritized integrating Guii Devtools directly into developers’ existing projects without any disruption. Using a unique approach to isolate Guii’s visual elements, we made sure our tools wouldn’t interfere with the rest of your code or its styles. This way, Guii can provide valuable support while staying out of the way, enhancing rather than complicating the development process.
What’s Next
Guii draws its name from GUI—Graphical User Interface—a concept that has defined how people interact online. We envision Guii not only as an interactive coding companion but also as a builder that brings the passion of design into the heart of development.
The creative potential extends beyond web development. For example, current diffusion models can create complex artwork but struggle with simpler sketches or modifications. With inspiration from projects like vector diffusion and tree diffusion (https://tree-diffusion.github.io/), Guii could evolve to offer controllable art creation and even game development, allowing, for example, personalized aesthetics like a Snake game featuring a friend’s portrait.
We’re also exploring Guii Webtool—a feature that could translate an existing webpage into a self-defined GUI, like reimagining Hacker News in a Notion-style interface.
Contact me at
Email: clll@mit.edu
Twitter: @luoluo.ai
LinkedIn: https://www.linkedin.com/in/christina-lee-28528b238/
About the fellows program
Cerebras inference is powering the next generation of AI applications — 70x faster than on GPUS. The Cerebras x Bain Capital Ventures Fellows Program invites engineers, researchers, and students to build impactful, next-level products unlocked by instant AI. Learn more at cerebras.ai/fellows
GENIE
