What is useglass.ai?

Glass is an AI-powered development tool designed to enhance the workflow of React and Next.js developers. It functions as a copilot, enabling users to interact with their codebase directly through the browser. This includes creating new components, adjusting existing component properties, and generating Tailwind CSS, significantly reducing manual coding effort.

The tool also provides a visual representation of the component structure, allowing developers to quickly identify the component associated with each element on the screen. Furthermore, Glass offers a seamless transition from the browser interface to the relevant code, improving navigation and efficiency within the project.

Features

Edit from Browser: Create components, modify props, and write Tailwind using AI directly in the browser.
Component Visualization: Hover over elements to identify their corresponding components.
Code Navigation: Instantly jump to the source code of any clicked element.

Use Cases

Rapid prototyping of React and Next.js applications.
Streamlining UI development with AI-assisted code generation.
Debugging and modifying existing React components.
Improving code navigation and understanding component relationships.

FAQs

Should I use Glass?

Glass lets you write React code quickly 🚀. If that sounds like your thing, Glass is for you!
Does Glass show up in production?

No. Glass only runs in development environments (when process.env.NODE_ENV === "development").
Can Glass install packages?

Glass only edits files in your project, and cannot install packages.
What does Glass edit?

When you click on an HTML element, Glass is allowed to edit the component it belongs to, and all of its descendant components. Glass gives you a list of all the edits it makes.
Does Glass support app or pages router?

Yes - both!