Overview

The AiContentGenerator component provides a UI for generating, editing, and fixing content using AI. It integrates with modal components to handle the AI interactions and provides options for customizing the generation parameters like tone, keywords, language, emojis, and hashtags. It can be used to add AI content generation capabilities to any input field or content area by wrapping the target element with this component.

Import

import AiContentGenerator from "@components/ai-content-generator/AiContentGenerator";

Usage Example

import React, { useState } from "react";
import AiContentGenerator from "@components/ai-content-generator/AiContentGenerator";
import { Button } from "@tag/tag-components-react-v4";

function AnotherComponentWithHandling() {
  // This function receives the output from the AI generator/editor/fixer
  const handleAIResult = (newContent) => {
    console.log("AI Result applied:", newContent);
  };

  return (
    <AiContentGenerator
      defaultValue={content} // Pass the current content as defaultValue
      sourceID="another-component"
      handleAddToEditor={handleAIResult}
    >
      <Button>Generate/Edit with AI</Button>
    </AiContentGenerator>
  );
}

Props

Prop	Type	Description	Default Value
defaultValue	string	The initial content value to be used for editing or fixing. If no value is given the generation modal will appear.
minOutput	number	Minimum limit for the number of words input.	10
maxOutput	number	Maximum limit for the number of words input.	100
tone	boolean	Enables/disables the tone selection option in the generator modal.	true
keywords	boolean	Enables/disables the keywords input option in the generator modal.	true
language	boolean	Enables/disables the language selection option in the generator modal.	false
emojis	boolean	Enables/disables the emojis option in the generator modal.	true
hashtags	boolean	Enables/disables the hashtags option in the generator modal.	true
sourceID	any	An identifier for the source of the content generation request.
handleAddToEditor	function	Callback function to handle adding the generated/edited/fixed content to an editor.
disableTopic	boolean	Disables the topic input field in the generator/edit modal.	false
children	ReactNode	The element that triggers the AI content generator functionality.

sourceID

The sourceID prop is used to identify the source of the content generation request. It is used to track the origin of the content generation request. plasee use one of the foloowing values:

Value	Module	Description
1	Campaign builder	Subject line in Campaign builder
2	Social	Social Media post caption
3	Journey	Not implemented yet
4	Selection	Not implemented yet
5	Ecast profile	Subject line in Ecast profile
6	Email builder	Email body builder