UX Guide

UX Guide is a developer-friendly AI assistant library designed to seamlessly integrate into any JavaScript-based tech stack. It empowers developers to enhance user experiences by providing AI-driven assistance within their applications.

Features

• Framework-Agnostic: Compatible with React, Vue, Svelte, and vanilla JavaScript, offering flexibility across various projects.

• Effortless Integration: Add an AI assistant to your project with just a single line of code, simplifying the setup process.

• Fully Customizable: Easily replace default components with your own to match your project's style and branding.

• Free for Developers: Hobbyist developers and non-profit organizations can use UX Guide at no cost, promoting innovation without financial barriers.

Installation

To include UX Guide in your project, install it via npm:

npm install ux-guide

Getting Started

After installation, you can initialize UX Guide in your application as follows:

import { UxGuide } from "ux-guide";

const uxGuide = new UxGuide();

Defining Actions

Actions enable the AI-powered chatbox to execute specific functions within your website, enhancing user interaction. Here's how to define an action:

import { UxGuide, ActionParameter } from "ux-guide";

const uxGuide = new UxGuide();

uxGuide.addAction(
  "bug-report",
  "Execute when the user reports a bug on this website",
  [
    new ActionParameter(
      "feedback",
      "string",
      "Detailed description of the user's problem"
    ),
    new ActionParameter(
      "frustrationScale",
      "number",
      "Frustration rating (1-10)",
      false
    ),
  ],
  (chat, { feedback, frustrationScale = 0 }) => {
    const frustrationPercentage = (frustrationScale / 10).toFixed(2);
    console.warn(
      `User reported a bug. Frustration: ${frustrationPercentage}%. Description: ${feedback}`
    );
    chat.info(
      "We're sorry for the inconvenience. The issue has been reported!"
    );
  }
);

In this example, an action named 'bug-report' is defined to handle user-reported bugs, collecting feedback and an optional frustration rating. The chat.info() method provides a seamless user experience by adding a message directly inside the chatbox.

Documentation

For comprehensive guides and API references, visit the UX Guide Documentation.