Skip to content

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:

shell
ni @guiiai/core -D
shell
pnpm add @guiiai/core -D
shell
npm install @guiiai/core -D
shell
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:

jsonc
{
  "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 the ESNext-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 a Cannot find module ... or its corresponding type declarations error you may need to set moduleResolution to Bundler.

If you want more configurations, you can refer to the following example:

jsonc
{
  "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"
  ]
}
typescript
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.

Contributors

The avatar of contributor named as RainbowBird RainbowBird
The avatar of contributor named as Dustella Dustella

Changelog