Getting Started
You can choose to start with the template or install Guii.AI DevTools into an existing project.
Start with the Template
We offer a Vue + Vite template: 🐌 guiiai/starter-vue
With it, you can quickly try out Guii.AI DevTools in a new project.
Install into an Existing Project
Install @guiiai/core
to your project dependencies by running the following command:
ni @guiiai/core -D
pnpm add @guiiai/core -D
npm install @guiiai/core -D
yarn add @guiiai/core -D
Use Vite
Vite is a modern JavaScript build tool designed to enhance the development experience for web applications. In order to use Guii, a vite plugin, read Vite Documentation to understand more details.
Usage
Configure Vite plugin
Ensure vite.config.ts
is created
If you understand what vite.config.ts
is already and have created it, you can skip this preparation step and jump to the next step Configure plugin in vite.config.ts
.
New to vite.config.ts
is?
First of all, vite.config.ts
is a configuration file for Vite, a build tool. It allows developers to build and transform assets, content, and data in the project.
Our plugin depends on tools with development servers like Vite, Webpack, and Rspack, so we need to configure the plugin in the Vite configuration file.
Therefore, please create a separated vite.config.ts
file in the root directory of your VitePress project:
Configure plugin in vite.config.ts
In the standalone Vite configuration file (e.g. vite.config.ts
) file we have under our root directory, we need to import GuiiAIDevToolsVitePlugin
and configure it properly:
If you've never seen a colored diff before
This is a markup rule for displaying diff in the user interface (UI).
Red parts usually represents the lines you are going to remove, commonly appeared with a Minus sign -, or you could simply understand it as: this line will be removed.
Green parts usually represents the lines you are going to add, commonly appeared with a Plus sign +, or you could simply understand it as: this line will be added.
To learn more about diff, you can check out this answer about the history of diffutils and Git's documentation
A TypeScript User?
You need to configure at least the following options:
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
},
"include": [
"**/.vitepress/**/*.ts",
"**/.vitepress/**/*.mts",
"**/.vitepress/**/*.vue"
],
"exclude": [
"node_modules"
]
}
And the options
module
option specifies the JavaScript/TypeScript module format, and Nolebase Integrations uses theESNext
-compatible module format by default.moduleResolution
option specifies the module resolution policy, since all Nolebase Integrations plugins follow the latest ECMAScript specifications and export declarations, if you encounter aCannot find module ... or its corresponding type declarations
error you may need to setmoduleResolution
toBundler
.
If you want more configurations, you can refer to the following example:
{
"compilerOptions": {
"jsx": "preserve",
"lib": [
"DOM",
"ESNext"
],
"module": "ESNext",
"moduleResolution": "Bundler",
"resolveJsonModule": true,
"strict": true,
"strictNullChecks": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noEmit": true,
"removeComments": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"verbatimModuleSyntax": true,
"skipLibCheck": true
},
"include": [
"**/.vitepress/**/*.ts",
"**/.vitepress/**/*.mts",
"**/.vitepress/**/*.vue"
],
"exclude": [
"node_modules"
]
}
import { } from 'node:path'
import { } from 'vite'
import { } from '@guiiai/core'
export default (() => {
return {
: [
(),
]
// other vite configurations...
}
})
Environment Recommendation
We recommend using StarterVue to start your first project, which integrates guii.ai and all the required environments.
FAQ
Why do I need to subscribe?
Please fill in your API key and BaseURL in the Devtools settings panel, and select the correct model to use normally.
Can I use local models?
Currently, we do not support local models, because Guii Agent is deployed on a remote server, and we need to process the prompt before sending it to the model.
Why does my modification not take effect?
We use the following packages to generate code, please install them and try again:
- vue
- radix-vue
- unocss
- @vueuse/core
- @vueuse/shared
We will provide more choices in the future.
Can I use React?
We will support it in the future, please stay tuned.
Which components libraries are supported?
Currently, we only support radix-vue and shadcn/vue, more component libraries are welcome to join us.
More questions?
Since the current version is in the early stage of the test, please join our Discord server to contact us, and we will reply to you within 24 hours.