Yoast AI Frontend

The Yoast AI Frontend is a collection of React Components that serve as the building blocks for integrating Yoast AI into any platform. It also contains a reusable API client for interacting with the Yoast AI API.

Note: This package is intended to be used by the Yoast team and its partners only.

Consumption

1. This package requires partner credentials to interact with the Yoast AI API. Without it, you'll need to provide your own API client implementation.
2. Run npm install @yoast/ai-frontend, yarn add @yoast/ai-frontend, or use any other package manager of your choice.
3. Import the components and/or classes you need from the package.

The AI Frontend ships as a single bundle that includes the API client and the React components. Most integrations will use any combination of the Generator components in combination with the API client. For instructions on how to construct and use the Yoast AI API Client, please refer to the AI Client documentation.

Development

Prerequisites

1. Nvm or Node >= 20
2. Yarn

Installation

1. Clone the repository.
2. cd into it.
3. If you have nvm installed, run nvm use to switch to the correct node version.
4. Install the dependencies with yarn install.

Documentation and Testing

The Yoast AI Frontend uses Storybook for documentation and testing (not available when installing through npm). To run the Storybook server, use the following command:

1. yarn storybook
2. Open Storybook in your browser at http://localhost:6006.

The generator components are available in the Generators category. They use a mocked API client by default. To switch to the live API client, toggle the useRealAPI switch in the Storybook UI. You'll need to provide your partner credentials in the UI.