📦 @windiarta/pinter-fab

A floating action button (FAB) with an AI-powered assistant, built for seamless integration in React and Next.js projects.

This component lets you add a chatbot-style assistant to your app or portfolio.

🚀 Installation

Install the package along with its required peer dependencies:

npm i @windiarta/pinter-fab framer-motion react-markdown remark-gfm

⚠️ Note: react and react-dom are peer dependencies as well. If you are using Next.js or Create React App, they are already installed. Otherwise, add them manually:

npm i react react-dom

📖 Usage

In a Next.js app:

"use client";

import PinterFAB from "@windiarta/pinter-fab";

export default function Home() {
  return (
    <div className="w-full min-h-screen">
      <PinterFAB />
    </div>
  );
}

The FAB button will appear in the bottom-right corner of your app.

⚡ Features

• ✅ Floating Action Button (FAB) to open/close the assistant
• ✅ Auto-formatting for tables, lists, code blocks
• ✅ Accessible and responsive design

⚙️ API

The component assumes you have a backend /api/chat route that accepts the following payload:

{
  "messages": [
    { "role": "user", "content": "Hello!" }
  ]
}

And responds with:

{
  "choices": [
    { "message": { "content": "Hi! I'm your AI assistant." } }
  ]
}

You can connect this endpoint to OpenAI, LangChain, or your own AI backend.

🛠 Development (for contributors)

Clone the repo and run locally:

git clone https://github.com/Data-Science-PIHC/pinter-fab.git
cd pinter-fab
npm install
npm run dev

Build the package:

npm run build

Publish to npm:

npm publish --access public

📄 License

MIT © 2025