AiAssetsWidget

AiAssetsWidget is a React component designed to provide a user interface for exploring, generating, and managing AI assets.

Installation

To use AiAssetsWidgetin your React project, you need to install the package by running this command:

npm install rfox-ai-assets

Usage

To integrate AiAssetsWidget into your React application, follow these steps:

1. Import the Component: Import AiAssetsWidget into your JSX file.

   import { AiAssetsWidget } from "rfox-ai-assets";

2. Include the Component in Your JSX: Render the AiAssetsWidget component, passing apiEndpoint and accessToken as props.

   ReactDOM.render(
     <AiAssetsWidget
       apiEndpoint="https://api.example.com"
       accessToken="your-access-token"
     />,
     document.getElementById("root"),
   );

3. Standalone Application: To use the widget as a standalone application, pass the apiEndpoint and accessToken via URL parameters. For example:

   http://localhost:3000?api=http://localhost:3001&token=your-access-token

Props

AiAssetsWidget accepts the following props:

• apiEndpoint (optional): The API endpoint to fetch data from. The default value is http://localhost:3001, which is suitable for local development.
• accessToken: The RFOX ID access token for authentication.

interface Props {
  apiEndpoint?: string;
  accessToken: string;
}

Components

AiAssetsWidget

The main component that wraps the entire widget with necessary providers.

PromptGenerator

A component used for generating AI assets by prompts.

AssetLists

A component used for listing assets.

AssetDetails

A component used for displaying details of a specific asset.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

N/A

This README provides a basic guide on how to use the AiAssetsWidget component. For more detailed documentation, please refer to the source code and comments within the components.