ai-product-kit v1.0.0

ReactProductAI

A React TypeScript library for product management with integrated AI chat capabilities.

Features

• Complete CRUD operations for product management
• Local storage persistence
• AI-powered chat interface for product queries
• TypeScript support
• Customizable styling
• Easy to integrate

Installation

npm install react-product-ai
# or
yarn add react-product-ai

Usage

Basic Product Management

import { ProductForm, ProductList, useProducts } from 'react-product-ai';
import 'react-product-ai/styles.css';

function App() {
  return (
    <div>
      <h1>Product Management</h1>
      <ProductForm />
      <ProductList />
    </div>
  );
}

AI Chat Integration

import { AIChat } from 'react-product-ai';
import 'react-product-ai/styles.css';

function App() {
  return (
    <div>
      <h1>Product Assistant</h1>
      <AIChat />
    </div>
  );
}

Custom Hook Usage

import { useProducts, useAIChat } from 'react-product-ai';

function CustomComponent() {
  const { products, addProduct, updateProduct, deleteProduct } = useProducts();
  const { messages, sendMessage, loading } = useAIChat();

  // Your custom logic here
}

Components

ProductForm

A form component for creating and updating products.

<ProductForm 
  initialProduct={existingProduct} // Optional, for editing
  onSubmit={() => console.log('Product saved')} 
/>

ProductList

Displays a grid of products with basic information and delete functionality.

<ProductList />

AIChat

An AI-powered chat interface for querying product information.

<AIChat />

Hooks

useProducts

const {
  products,         // Array of products
  addProduct,      // (product: Omit<Product, 'id'>) => void
  updateProduct,   // (id: string, product: Partial<Product>) => void
  deleteProduct,   // (id: string) => void
  getProduct       // (id: string) => Product | undefined
} = useProducts();

useAIChat

const {
  messages,        // Array of chat messages
  sendMessage,     // (message: string) => Promise<void>
  loading          // boolean
} = useAIChat();

useLocalStorage

const [value, setValue] = useLocalStorage('key', initialValue);

Types

Product

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
  photo: string; // URL or base64
  description: string;
}

ChatMessage

interface ChatMessage {
  role: 'user' | 'assistant';
  content: string;
}

Customization

The library comes with default styling that can be imported from 'react-product-ai/styles.css'. You can override these styles by targeting the CSS classes in your own stylesheets.

AI Integration

To integrate with your preferred AI service (like OpenAI or Genkit), modify the useAIChat hook implementation:

// In your app's configuration
const AI_CONFIG = {
  apiKey: 'your-api-key',
  endpoint: 'your-ai-service-endpoint',
};

// In useAIChat
const sendMessage = async (userMessage: string) => {
  // Your AI service integration code here
  const response = await yourAIService.chat({
    message: userMessage,
    context: productsContext
  });
  // Handle response
};

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.