@ui-guide-agent/web
@ui-guide-agent/web
An AI help agent in your web application. No .NET needed. Your users ask "how do I…?" and get concrete steps: which button to press and which page to open. The answer is in the language of the question and starts from the page the user is on.
Privacy: the page is read the way a screen reader reads it: roles, labels and states. Never field values, passwords, or the contents of lists and tables.
Safe answers: the assistant never gives links, downloads or commands, never asks for passwords, codes or card details, and ignores instructions hidden in texts shown by your application.
Quick start
- Install the package:
npm install -D @ui-guide-agent/web - Add the line for your framework:
| Framework | What to add |
|---|---|
| Vite (React, Vue, Svelte, Solid…), SvelteKit | In vite.config: import uiGuide from '@ui-guide-agent/web/vite' and plugins: [uiGuide()] |
| Astro | In astro.config: import uiGuide from '@ui-guide-agent/web/astro' and integrations: [uiGuide()] |
| Nuxt | In nuxt.config: modules: ['@ui-guide-agent/web/nuxt'] |
| webpack 5 or Rspack | import { UiGuidePlugin } from '@ui-guide-agent/web/webpack' and plugins: [new UiGuidePlugin()] |
| Next.js | In next.config.mjs: export default withUiGuide(nextConfig) (from @ui-guide-agent/web/next). In instrumentation-client.ts: import '@ui-guide-agent/web/auto'; |
| Angular CLI | In package.json: "prestart": "uiguide prepare" and "prebuild": "uiguide prepare --release". In src/main.ts: import '@ui-guide-agent/web/auto'; |
-
Build or start your development server. Every build then:
- writes
uiguide.jsonand the configuration your page reads; - generates the knowledge bundle;
- puts the assistant in every page;
- shows the warning
UIG001for every control without a name.
Until the assistant has a server, it answers "not configured yet" and the build shows the warning
UIG003. - writes
-
Connect a server, then rebuild:
- On your computer:
dotnet tool install -g UiGuideAgent.Server.Host, thenuiguide-server. The next build finds it and registers your application with your development address. - Your company's server:
npx uiguide init --server https://…in your project folder.
The build for your users (
vite build,next build…) leaves the address of your computer out. - On your computer:
Good to know
- Name controls the browser way:
aria-label, a<label for>or a<label>around the field, the button's text. - The language: the assistant follows the language your page shows. The answer is in the language of the question.
- From code:
import { setContext, setToken, setLanguage } from '@ui-guide-agent/web'. - Update: the build tells you (warning
UIG002). Runnpm install -D @ui-guide-agent/web@latest. - Remove: run
npx uiguide removein your project folder. It shows what it removes and asks first.
Full guide: https://github.com/DomitorAI/ui-guide-agent/blob/main/docs/web.md
Free to use without limits, also commercially. You may ship it, unmodified, inside your own application, also one you sell. Selling UiGuide Agent itself, or offering it as a paid hosted service, needs the author's permission. Provided as is, without warranty. https://github.com/DomitorAI/ui-guide-agent
Related Packages
Create In-APP AI agents that answers question and performs actions. Works with R...
Gauss Meridian for Nuxt: a Nuxt module with a server client and composables.
Version History
| Version | Released | License |
|---|---|---|
| 0.11.2 | Custom | |
| 0.11.1 | Custom | |
| 0.11.0 | Custom | |
| 0.10.0 | Custom | |
| 0.9.1 | Custom | |
| 0.9.0 | Custom | |
| 0.8.0 | Custom | |
| 0.7.2 | Custom | |
| 0.7.1 | Custom | |
| 0.7.0 | Custom | |
| 0.6.0 | Custom |
Pre-releases (1)
| Version | Released | License |
|---|---|---|
| 0.0.0-stage |