Guide-ai NPM | npm.io

Guide AI

guide-ai instantly transforms a workflow within your app into step-by-step instructions and video guides in any language!

Video Demo

Installation

To install the package, run:

npm install guide-ai

or with Yarn:

yarn add guide-ai

Example

import React, { useState } from "react";
import { GuideAI } from "guide-ai";

function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="App">
      <h1>Hello World!</h1>
      <button onClick={() => setIsOpen(!isOpen)}>{isOpen ? "Close Guide" : "Open Guide"}</button>
      <GuideAI isOpen={isOpen} setIsOpen={setIsOpen} />
    </div>
  );
}

export default App;

Tip

Ensure that GuideAI is imported at the very top of your App component to make it accessible throughout your entire application.

Props

The GuideAI component has the following props:

Prop Name	Type	Default	Description
`isOpen`	boolean	false	Controls whether the guide is open or closed.
`setIsOpen`	function	null	Callback function to update the state controlling the guide's open or closed status.

Why Do I Need This

🤓 Do you need to demo your product, showcase a feature, or guide users through specific functionalities? Are you frequently answering questions about product features, conducting training sessions, or jumping on 'quick' calls?

🛑 Stop wasting time writing long emails, manually taking screenshots and annotating them, or screen recording & editing the video

✅ guide-ai does the work for you! Show your workflow as usual in your app. Our AI-driven Castbot will capture the process, then transform it into a ready-to-share guide in two formats: