1.0.0 • Published 5 months ago
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.
1.0.0
5 months ago