<p align="center">
  <img src="../../docs/public/images/logo.png" width="100" height="100">
</p>

<p align="center">
  <span>Guii.AI DevTools</span>
</p>

<p align="center">
    <a href="https://www.bilibili.com/video/BV131421t7Jk">How does it look like in action?</a> | <a href="https://guii.ai">Official site</a>
</p>

<p align="center">
    <a href="https://discord.gg/jVNjbbUJmy">Join Discord Server <img src="https://img.shields.io/discord/1229292283657195520?style=flat&logo=discord&logoColor=white&label=Discord&color=%23404eed" /></a>
</p>

## Features

- [x] The business always wants to use a stable component library. We support adapting components, existing project architecture and ready-made code in the written code.
- [x] Supported component libraries
- [x] [Radix Vue](https://www.radix-vue.com/)
- [x] [shadcn vue](https://www.shadcn-vue.com/)
- [x] 🚀 Install the plug-in in the development project to use
- [x] 🎁 0 configuration supports front-end developers' favorite hot overload function
- [x] 🔨 The same auxiliary development capabilities as [Nuxt DevTools](https://devtools.nuxt.com/).
- [x] ☝️ Activate, select, modify, review the code, and write the front end with Guii AI
- [x] 🌎 Support any front-end framework, Vue, React, Angular, Svelte, etc.
- [x] 📦 Out of the box support of Vite, Webpack, Nuxt, use it with your favorite tool set!
- [x] 🔮 Multi-mode, describe your expectations with pictures and Figma, and even sketches (🥵 working on it)

## How to install

1. Use your favorite `npm`, `pnpm`, `yarn` to install Guii.AI DevTools into your project.

```shell
npm install @guiiai/core -D
```

1. Add it to plugins:

```javascript
import { GuiiAIDevToolsVitePlugin } from '@guiijs/core'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    GuiiAIDevToolsVitePlugin()
  ]
})
```

## How to use

![](../../docs/public/images/how.png)

1. Start the project, open the browser, and find the Guii.AI DevTools floating window.
2. Activate the small mouse.
3. Select the element.
4. Modify the code through natural language instructions.
5. 💥 You're all set to write frontend codes with LLM and Guii AI!
