diff --git a/src/js/settings/components/allowed-roles/index.js b/src/js/settings/components/allowed-roles/index.js
index 686153421..91d9ce1b0 100644
--- a/src/js/settings/components/allowed-roles/index.js
+++ b/src/js/settings/components/allowed-roles/index.js
@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { CheckboxControl } from '@wordpress/components';
@@ -13,6 +13,14 @@ import { STORE_NAME } from '../../data/store';
 import { SettingsRow } from '../settings-row';
 import { useFeatureContext } from '../feature-settings/context';
 
+/**
+ * React Component for selecting user roles to provide access to a specific feature.
+ *
+ * This component is utilized in the feature settings page under the "User Permissions" section.
+ * It allows administrators to specify which user roles are permitted to access the feature.
+ *
+ * @return {React.ReactElement} AllowedRoles component.
+ */
 export const AllowedRoles = () => {
 	const { featureName } = useFeatureContext();
 	const { setFeatureSettings } = useDispatch( STORE_NAME );
diff --git a/src/js/settings/components/classifai-onboarding/classifai-registration.js b/src/js/settings/components/classifai-onboarding/classifai-registration.js
index fa1b1e9d8..06baf4f45 100644
--- a/src/js/settings/components/classifai-onboarding/classifai-registration.js
+++ b/src/js/settings/components/classifai-onboarding/classifai-registration.js
@@ -1,10 +1,28 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { Button, Fill } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-import { useNavigate } from 'react-router-dom';
+/**
+ * Internal dependencies
+ */
 import { ClassifAIRegistrationForm } from '../classifai-registration';
 import { useSetupPage } from './hooks';
 
+/**
+ * ClassifAI Registration Step Component for the Onboarding Process.
+ *
+ * This component is responsible for rendering the registration step in the ClassifAI onboarding process.
+ * It utilizes the ClassifAIRegistrationForm component to display the registration form.
+ *
+ * @return {React.ReactElement} ClassifAIRegistrationStep component.
+ */
 export const ClassifAIRegistrationStep = () => {
 	const navigate = useNavigate();
 	const { nextStepPath } = useSetupPage();
diff --git a/src/js/settings/components/classifai-onboarding/configure-features.js b/src/js/settings/components/classifai-onboarding/configure-features.js
index 57bb5e48d..cd1fa6b81 100644
--- a/src/js/settings/components/classifai-onboarding/configure-features.js
+++ b/src/js/settings/components/classifai-onboarding/configure-features.js
@@ -1,15 +1,32 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { Fill, SlotFillProvider, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 import { FeatureSettings } from '..';
 import { FeatureContext } from '../feature-settings/context';
 import { getFeature, isFeatureActive } from '../../utils/utils';
 import { STORE_NAME } from '../../data/store';
 import { useSetupPage } from './hooks';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for configuring the AI providers step in the onboarding process.
+ *
+ * This component uses the FeatureSettings component to render the settings for each AI provider feature.
+ *
+ * @return {React.ReactElement} ConfigureFeatures component.
+ */
 export const ConfigureFeatures = () => {
 	const settings = useSelect( ( select ) =>
 		select( STORE_NAME ).getSettings()
diff --git a/src/js/settings/components/classifai-onboarding/enable-features.js b/src/js/settings/components/classifai-onboarding/enable-features.js
index 729d14565..62aca1cc7 100644
--- a/src/js/settings/components/classifai-onboarding/enable-features.js
+++ b/src/js/settings/components/classifai-onboarding/enable-features.js
@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import {
 	ToggleControl,
 	Flex,
@@ -9,12 +17,22 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
 import { FeatureContext } from '../feature-settings/context';
 import { EnableToggleControl } from '../feature-settings/enable-feature';
 import { SaveSettingsButton } from '../../components/feature-settings/save-settings-button';
 import { useSetupPage } from './hooks';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for the feature enabling step in the onboarding process.
+ *
+ * This component renders the initial step of the onboarding process, allowing users to enable or disable various features.
+ * It utilizes the EnableToggleControl component to display the settings for each feature.
+ *
+ * @return {React.ReactElement} EnableFeatures component.
+ */
 export const EnableFeatures = () => {
 	const [ registrationSettings, setRegistrationSettings ] = useState( {} );
 	const { features, services, dashboardUrl } = window.classifAISettings;
diff --git a/src/js/settings/components/classifai-onboarding/finish-step.js b/src/js/settings/components/classifai-onboarding/finish-step.js
index 997ddcd99..3174fc8e3 100644
--- a/src/js/settings/components/classifai-onboarding/finish-step.js
+++ b/src/js/settings/components/classifai-onboarding/finish-step.js
@@ -1,11 +1,29 @@
+/**
+ * External dependencies
+ */
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import { Icon, Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
 import { STORE_NAME } from '../../data/store';
 import { isFeatureActive, getFeature } from '../../utils/utils';
-import { useNavigate } from 'react-router-dom';
 
+/**
+ * React Component for the final step in the onboarding process.
+ *
+ * This component displays a summary of the features that have been enabled during the onboarding process.
+ * It provides users with a clear overview of their selected settings before completing the onboarding.
+ *
+ * @return {React.ReactElement} FinishStep component.
+ */
 export const FinishStep = () => {
 	const {
 		features: __settings,
diff --git a/src/js/settings/components/classifai-onboarding/hooks.js b/src/js/settings/components/classifai-onboarding/hooks.js
index 12bd79ff0..e0f9a6149 100644
--- a/src/js/settings/components/classifai-onboarding/hooks.js
+++ b/src/js/settings/components/classifai-onboarding/hooks.js
@@ -8,6 +8,17 @@ import { useLocation } from 'react-router-dom';
  */
 import { getNextOnboardingStep } from '../../utils/utils';
 
+/**
+ * Custom hook to determine if the current page is a setup page and to retrieve the current step, next step, and next step path.
+ *
+ * This hook provides an object containing:
+ * - `isSetupPage`: A boolean indicating whether the current page is a setup page.
+ * - `step`: The current step in the setup process.
+ * - `nextStep`: The next step in the setup process.
+ * - `nextStepPath`: The URL path for the next step.
+ *
+ * @return {Object} An object containing the setup page status, current step, next step, and next step path.
+ */
 export const useSetupPage = () => {
 	const location = useLocation();
 	const isSetupPage =
diff --git a/src/js/settings/components/classifai-onboarding/index.js b/src/js/settings/components/classifai-onboarding/index.js
index 9534f384f..b685d91a0 100644
--- a/src/js/settings/components/classifai-onboarding/index.js
+++ b/src/js/settings/components/classifai-onboarding/index.js
@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import { Outlet } from 'react-router-dom';
 
 // Export the steps of the onboarding process.
@@ -6,6 +9,14 @@ export { ConfigureFeatures } from './configure-features';
 export { FinishStep } from './finish-step';
 export { ClassifAIRegistrationStep } from './classifai-registration';
 
+/**
+ * ClassifAI Onboarding Component.
+ *
+ * This component handles the rendering of the entire onboarding process for ClassifAI.
+ * It guides users through the necessary steps to configure and enable various features.
+ *
+ * @return {React.ReactElement} ClassifAIOnboarding component.
+ */
 export const ClassifAIOnboarding = () => {
 	return (
 		<div className="classifai-setup__content">
diff --git a/src/js/settings/components/classifai-registration/index.js b/src/js/settings/components/classifai-registration/index.js
index fc93c53c7..0cb88c74b 100644
--- a/src/js/settings/components/classifai-registration/index.js
+++ b/src/js/settings/components/classifai-registration/index.js
@@ -2,6 +2,10 @@
  * External dependencies
  */
 import { NavLink } from 'react-router-dom';
+
+/**
+ * WordPress dependencies
+ */
 import {
 	Panel,
 	PanelBody,
@@ -11,14 +15,28 @@ import {
 	Notice,
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
-import { Notices } from '../feature-settings/notices';
 import { __, sprintf } from '@wordpress/i18n';
-import { SettingsRow } from '../settings-row';
 import apiFetch from '@wordpress/api-fetch';
 import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 
+/**
+ * Internal dependencies
+ */
+import { SettingsRow } from '../settings-row';
+import { Notices } from '../feature-settings/notices';
+
+/**
+ * ClassifAI Registration Form Component.
+ *
+ * This component renders the registration settings form for ClassifAI, allowing users to input and save their registration details.
+ *
+ * @param {Object}   props               The component props.
+ * @param {Function} props.onSaveSuccess The callback function to be executed after successfully saving the settings.
+ *
+ * @return {React.ReactElement} The rendered ClassifAIRegistrationForm component.
+ */
 export const ClassifAIRegistrationForm = ( { onSaveSuccess = () => {} } ) => {
 	const [ settings, setSettings ] = useState( {} );
 	const [ isLoaded, setIsLoaded ] = useState( false );
@@ -146,6 +164,8 @@ export const ClassifAIRegistrationForm = ( { onSaveSuccess = () => {} } ) => {
 /**
  * Save Settings Button component.
  *
+ * This component renders a button that allows users to save the settings for the ClassifAI registration form.
+ *
  * @param {Object}   props               Component props.
  * @param {Object}   props.settings      Settings object.
  * @param {Function} props.setSettings   Set settings function.
@@ -219,6 +239,13 @@ export const SaveSettingsButton = ( {
 	);
 };
 
+/**
+ * ClassifAI Registration Component.
+ *
+ * This component serves as a wrapper for the ClassifAIRegistrationForm component.
+ *
+ * @return {React.ReactElement} The ClassifAIRegistration component.
+ */
 export const ClassifAIRegistration = () => {
 	return (
 		<div className="service-settings-wrapper">
diff --git a/src/js/settings/components/classifai-settings/index.js b/src/js/settings/components/classifai-settings/index.js
index 3d064d648..8cb0f1df7 100644
--- a/src/js/settings/components/classifai-settings/index.js
+++ b/src/js/settings/components/classifai-settings/index.js
@@ -44,6 +44,8 @@ const { services, features } = window.classifAISettings;
 /**
  * DefaultFeatureSettings component to navigate to the default feature settings.
  * If no feature is selected, it will redirect to the first feature.
+ *
+ * @return {React.ReactElement} The DefaultFeatureSettings component.
  */
 const DefaultFeatureSettings = () => {
 	const { service } = useParams();
@@ -53,7 +55,9 @@ const DefaultFeatureSettings = () => {
 
 /**
  * FeatureSettingsWrapper component to render the feature settings.
- * If the feature is not available, it will redirect to the first feature.
+ * If the feature is not available from URL parameters, it will redirect to the first feature of selected service.
+ *
+ * @return {React.ReactElement} The FeatureSettingsWrapper component.
  */
 const FeatureSettingsWrapper = () => {
 	const { service, feature } = useParams();
@@ -70,6 +74,12 @@ const FeatureSettingsWrapper = () => {
 	);
 };
 
+/**
+ * ServiceSettingsWrapper component to render the service settings.
+ * If the service is not available from URL parameters, it will redirect to the language processing page.
+ *
+ * @return {React.ReactElement} The ServiceSettingsWrapper component.
+ */
 const ServiceSettingsWrapper = () => {
 	const { service } = useParams();
 
@@ -84,7 +94,9 @@ const ServiceSettingsWrapper = () => {
 /**
  * ServiceNavigation component to render the service navigation tabs.
  *
- * @return {Object} The ServiceNavigation component.
+ * This component renders the service navigation tabs based on the available services.
+ *
+ * @return {React.ReactElement} The ServiceNavigation component.
  */
 export const ServiceNavigation = () => {
 	const { isSetupPage } = useSetupPage();
@@ -123,6 +135,14 @@ export const ServiceNavigation = () => {
 	);
 };
 
+/**
+ * Main ClassifAI Settings Component.
+ *
+ * This component serves as the primary entry point for the ClassifAI settings interface.
+ * It is responsible for rendering the header, service navigation, feature navigation, and feature settings based on the current URL path.
+ *
+ * @return {React.ReactElement} The ClassifAISettings component.
+ */
 export const ClassifAISettings = () => {
 	const { setSettings, setIsLoaded, setError } = useDispatch( STORE_NAME );
 
diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/context.js b/src/js/settings/components/feature-additional-settings/classification-previewers/context.js
index b126596f0..3409220e0 100644
--- a/src/js/settings/components/feature-additional-settings/classification-previewers/context.js
+++ b/src/js/settings/components/feature-additional-settings/classification-previewers/context.js
@@ -1,5 +1,13 @@
+/**
+ * WordPress dependencies
+ */
 import { createContext } from '@wordpress/element';
 
+/**
+ * Context for the PreviewerProvider.
+ *
+ * @return {React.Context} PreviewerProviderContext context.
+ */
 export const PreviewerProviderContext = createContext( {
 	isPreviewerOpen: false,
 } );
diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js b/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js
index fb076f7cf..4c5af18db 100644
--- a/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js
+++ b/src/js/settings/components/feature-additional-settings/classification-previewers/ibm-watson-nlu.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { Card, CardHeader, CardBody, Notice } from '@wordpress/components';
 import { useState, useEffect, useContext } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { normalizeScore } from './utils';
-import { PreviewerProviderContext } from './context';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { normalizeScore } from './utils';
+import { PreviewerProviderContext } from './context';
 import { STORE_NAME } from '../../../data/store';
 
+/**
+ * React Component for displaying IBM Watson NLU classification results.
+ *
+ * This component is responsible for rendering the classification results obtained from the IBM Watson NLU service.
+ * It displays detailed classification data including categories, concepts, entities, and keywords for a specific post.
+ *
+ * @param {Object} props        The component props.
+ * @param {number} props.postId The ID of the post for which to display the classification results.
+ *
+ * @return {React.ReactElement} The IBMWatsonNLUResults component.
+ */
 export function IBMWatsonNLUResults( { postId } ) {
 	const {
 		isPreviewUnderProcess,
diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js b/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js
index 7276cedfa..cb8ca35fb 100644
--- a/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js
+++ b/src/js/settings/components/feature-additional-settings/classification-previewers/openai-embedding.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { Card, CardHeader, CardBody, Notice } from '@wordpress/components';
 import { useState, useEffect, useContext } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { normalizeScore } from './utils';
-import { PreviewerProviderContext } from './context';
 import { __, sprintf } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { normalizeScore } from './utils';
+import { PreviewerProviderContext } from './context';
 import { STORE_NAME } from '../../../data/store';
 
+/**
+ * React Component for displaying Azure OpenAI Embeddings classification results.
+ *
+ * This component is responsible for rendering the classification results obtained from the Azure OpenAI Embeddings service.
+ * It displays detailed classification data including categories and tags for a specific post.
+ *
+ * @param {Object} props        The component props.
+ * @param {number} props.postId The ID of the post for which to display the classification results.
+ *
+ * @return {React.ReactElement} The AzureOpenAIEmbeddingsResults component.
+ */
 export function AzureOpenAIEmbeddingsResults( { postId } ) {
 	const {
 		isPreviewUnderProcess,
diff --git a/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js b/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js
index 715b1486e..15a0209f1 100644
--- a/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js
+++ b/src/js/settings/components/feature-additional-settings/classification-previewers/utils.js
@@ -1,3 +1,12 @@
+/**
+ * Normalize a score for display as a percentage.
+ *
+ * This function takes a score and normalizes it to a percentage format for display purposes.
+ *
+ * @param {number} score The score to normalize.
+ *
+ * @return {number} The normalized score as a percentage.
+ */
 export function normalizeScore( score ) {
 	return Number( ( score * 100 ).toFixed( 2 ) );
 }
diff --git a/src/js/settings/components/feature-additional-settings/classification.js b/src/js/settings/components/feature-additional-settings/classification.js
index be7a30dc4..10ea466f0 100644
--- a/src/js/settings/components/feature-additional-settings/classification.js
+++ b/src/js/settings/components/feature-additional-settings/classification.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	RadioControl,
@@ -16,6 +19,9 @@ import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { isFeatureActive, usePostTypes } from '../../utils/utils';
@@ -26,6 +32,13 @@ import {
 } from './classification-previewers';
 import { PreviewerProviderContext } from './classification-previewers/context';
 
+/**
+ * Component for the Classification Method settings.
+ *
+ * This component is used within the ClassificationSettings component to allow users to configure the Classification Method.
+ *
+ * @return {React.ReactElement} The ClassificationMethodSettings component.
+ */
 const ClassificationMethodSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
@@ -78,6 +91,17 @@ const ClassificationMethodSettings = () => {
 	);
 };
 
+/**
+ * Provider component for the Classification Previewer.
+ *
+ * This component is used to provide the context for the Classification Previewer.
+ *
+ * @param {Object} props          The component props.
+ * @param {Object} props.children The child components.
+ * @param {Object} props.value    The context value.
+ *
+ * @return {React.ReactElement} The PreviewerProvider component.
+ */
 function PreviewerProvider( { children, value } ) {
 	return (
 		<PreviewerProviderContext.Provider value={ value }>
@@ -86,6 +110,13 @@ function PreviewerProvider( { children, value } ) {
 	);
 }
 
+/**
+ * React Component for configuring the Classification feature settings.
+ *
+ * This component is used within the ClassifAI settings to allow users to configure the Classification feature.
+ *
+ * @return {React.ReactElement} The ClassificationSettings component.
+ */
 export const ClassificationSettings = () => {
 	const [ embedInProgress, setEmbedInProgress ] = useState( false );
 	const isEmbeddingInProgress = useRef( false );
@@ -267,6 +298,11 @@ export const ClassificationSettings = () => {
 	);
 };
 
+/**
+ * Component for the Classification Previewer.
+ *
+ * @return {React.ReactElement} The Previewer component.
+ */
 function Previewer() {
 	const { isPreviewerOpen, setIsPreviewerOpen } = useContext(
 		PreviewerProviderContext
@@ -299,6 +335,11 @@ function Previewer() {
 	);
 }
 
+/**
+ * Component for displaying a spinner when the preview is in process.
+ *
+ * @return {React.ReactElement} The PreviewInProcess component.
+ */
 function PreviewInProcess() {
 	const { isPreviewUnderProcess } = useContext( PreviewerProviderContext );
 
@@ -318,6 +359,15 @@ function PreviewInProcess() {
 	);
 }
 
+/**
+ * Component for selecting a post to preview.
+ *
+ * @param {Object}  props             The component props.
+ * @param {string}  props.placeholder The placeholder text for the search control.
+ * @param {boolean} props.showLabel   Whether to show the label for the search control.
+ *
+ * @return {React.ReactElement} The PostSelector component.
+ */
 function PostSelector( { placeholder = '', showLabel = true } ) {
 	const { setSelectedPostId } = useContext( PreviewerProviderContext );
 	const [ searchText, setSearchText ] = useState( '' );
@@ -416,6 +466,11 @@ function PostSelector( { placeholder = '', showLabel = true } ) {
 	);
 }
 
+/**
+ * Component for displaying the results of the previewer.
+ *
+ * @return {React.ReactElement} The PreviewerResults component.
+ */
 function PreviewerResults() {
 	const { selectedPostId } = useContext( PreviewerProviderContext );
 	const activeProvider = useSelect(
diff --git a/src/js/settings/components/feature-additional-settings/content-resizing.js b/src/js/settings/components/feature-additional-settings/content-resizing.js
index 12cb8e2b7..a312112ab 100644
--- a/src/js/settings/components/feature-additional-settings/content-resizing.js
+++ b/src/js/settings/components/feature-additional-settings/content-resizing.js
@@ -1,9 +1,23 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { PromptRepeater } from './prompt-repeater';
 
+/**
+ * Component for the Content Resizing feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Content Resizing feature.
+ *
+ * @return {React.ReactElement} ContentResizingSettings component.
+ */
 export const ContentResizingSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js b/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js
index 1cd7d7ec2..5b3cf89a9 100644
--- a/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js
+++ b/src/js/settings/components/feature-additional-settings/descriptive-text-generator.js
@@ -1,10 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Descriptive Text Generator feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Descriptive Text Generator feature.
+ *
+ * @return {React.ReactElement} DescriptiveTextGeneratorSettings component.
+ */
 export const DescriptiveTextGeneratorSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/excerpt-generation.js b/src/js/settings/components/feature-additional-settings/excerpt-generation.js
index e594cd721..df1cf535e 100644
--- a/src/js/settings/components/feature-additional-settings/excerpt-generation.js
+++ b/src/js/settings/components/feature-additional-settings/excerpt-generation.js
@@ -1,14 +1,28 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	CheckboxControl,
 } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { PromptRepeater } from './prompt-repeater';
 import { usePostTypes } from '../../utils/utils';
 
+/**
+ * Component for Excerpt Generation feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Excerpt Generation feature.
+ *
+ * @return {React.ReactElement} ExcerptGenerationSettings component.
+ */
 export const ExcerptGenerationSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/image-tag-generator.js b/src/js/settings/components/feature-additional-settings/image-tag-generator.js
index a25159d64..96472359a 100644
--- a/src/js/settings/components/feature-additional-settings/image-tag-generator.js
+++ b/src/js/settings/components/feature-additional-settings/image-tag-generator.js
@@ -1,10 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for the Image Tag Generator feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Image Tag Generator feature.
+ *
+ * @return {React.ReactElement} ImageTagGeneratorSettings component.
+ */
 export const ImageTagGeneratorSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/index.js b/src/js/settings/components/feature-additional-settings/index.js
index 8e0e84495..fd61ae513 100644
--- a/src/js/settings/components/feature-additional-settings/index.js
+++ b/src/js/settings/components/feature-additional-settings/index.js
@@ -20,6 +20,14 @@ import { ModerationSettings } from './moderation';
 import { Smart404Settings } from './smart-404';
 import { RecommendedContentSettings } from './recommended-content';
 
+/**
+ * Component for additional settings fields for individual features.
+ *
+ * This component is used to render additional settings fields for a feature.
+ * It determines which feature is current and renders the corresponding settings fields.
+ *
+ * @return {React.ReactElement} AdditionalSettingsFields component.
+ */
 const AdditionalSettingsFields = () => {
 	const { featureName } = useFeatureContext();
 
@@ -60,7 +68,12 @@ const AdditionalSettingsFields = () => {
 };
 
 /**
- * Feature Additional Settings component.
+ * Component for additional settings fields for a feature.
+ *
+ * This component is used to add additional settings for a feature.
+ * It also provides a slot for Third-party plugins to add additional settings for a feature.
+ *
+ * @return {React.ReactElement} FeatureAdditionalSettings component.
  */
 export const FeatureAdditionalSettings = () => {
 	const { featureName } = useFeatureContext();
diff --git a/src/js/settings/components/feature-additional-settings/moderation.js b/src/js/settings/components/feature-additional-settings/moderation.js
index ae70f7e5e..48784e9ca 100644
--- a/src/js/settings/components/feature-additional-settings/moderation.js
+++ b/src/js/settings/components/feature-additional-settings/moderation.js
@@ -1,10 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Moderation feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Moderation feature.
+ *
+ * @return {React.ReactElement} ModerationSettings component.
+ */
 export const ModerationSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/nlu-feature.js b/src/js/settings/components/feature-additional-settings/nlu-feature.js
index 49c645bac..326c9d15f 100644
--- a/src/js/settings/components/feature-additional-settings/nlu-feature.js
+++ b/src/js/settings/components/feature-additional-settings/nlu-feature.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	CheckboxControl,
@@ -5,10 +8,21 @@ import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useTaxonomies } from '../../utils/utils';
 
+/**
+ * Component for render settings fields when IBM Watson NLU is selected as the provider.
+ *
+ * This component is used within the ClassificationSettings component.
+ *
+ * @return {React.ReactElement} NLUFeatureSettings component.
+ */
 export const NLUFeatureSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/prompt-repeater.js b/src/js/settings/components/feature-additional-settings/prompt-repeater.js
index c218aa600..2605bb1f6 100644
--- a/src/js/settings/components/feature-additional-settings/prompt-repeater.js
+++ b/src/js/settings/components/feature-additional-settings/prompt-repeater.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import {
 	Button,
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
@@ -7,6 +10,15 @@ import {
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Component for the Prompt.
+ *
+ * This component allows users to add or remove prompts for various features such as Title Generation, Excerpt Generation and Descriptive Text Generation.
+ *
+ * @param {Object} props Component props.
+ *
+ * @return {React.ReactElement} PromptRepeater component.
+ */
 export const PromptRepeater = ( props ) => {
 	const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
 	const [ activeIndex, setActiveIndex ] = useState( null );
diff --git a/src/js/settings/components/feature-additional-settings/recommended-content.js b/src/js/settings/components/feature-additional-settings/recommended-content.js
index c21320ada..83f23c2f4 100644
--- a/src/js/settings/components/feature-additional-settings/recommended-content.js
+++ b/src/js/settings/components/feature-additional-settings/recommended-content.js
@@ -1,6 +1,16 @@
+/**
+ * WordPress dependencies
+ */
 import { Fill, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Component for Notice about the deprecation of the Personalizer provider.
+ *
+ * This component displays a notice to inform users about the deprecation of the Personalizer provider.
+ *
+ * @return {React.ReactElement} The PersonalizerDeprecationNotice component.
+ */
 const PersonalizerDeprecationNotice = () => (
 	<Notice
 		status="warning"
@@ -33,6 +43,13 @@ const PersonalizerDeprecationNotice = () => (
 	</Notice>
 );
 
+/**
+ * Component for the Recommended Content settings.
+ *
+ * This component displays a notice to inform users about the deprecation of the Personalizer provider.
+ *
+ * @return {React.ReactElement} The RecommendedContentSettings component.
+ */
 export const RecommendedContentSettings = () => {
 	return (
 		<Fill name="ClassifAIBeforeFeatureSettingsPanel">
diff --git a/src/js/settings/components/feature-additional-settings/smart-404.js b/src/js/settings/components/feature-additional-settings/smart-404.js
index af5e96272..2d1582603 100644
--- a/src/js/settings/components/feature-additional-settings/smart-404.js
+++ b/src/js/settings/components/feature-additional-settings/smart-404.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	CheckboxControl,
@@ -5,9 +8,20 @@ import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Smart 404 feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Smart 404 feature.
+ *
+ * @return {React.ReactElement} Smart404Settings component.
+ */
 export const Smart404Settings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/text-to-speech.js b/src/js/settings/components/feature-additional-settings/text-to-speech.js
index c808173bb..4f5362e87 100644
--- a/src/js/settings/components/feature-additional-settings/text-to-speech.js
+++ b/src/js/settings/components/feature-additional-settings/text-to-speech.js
@@ -1,11 +1,25 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { CheckboxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { usePostTypes } from '../../utils/utils';
 
+/**
+ * Component for Text to Speech feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Text to Speech feature.
+ *
+ * @return {React.ReactElement} TextToSpeechSettings component.
+ */
 export const TextToSpeechSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-additional-settings/title-generation.js b/src/js/settings/components/feature-additional-settings/title-generation.js
index 5cdb51e30..e696434e3 100644
--- a/src/js/settings/components/feature-additional-settings/title-generation.js
+++ b/src/js/settings/components/feature-additional-settings/title-generation.js
@@ -1,9 +1,23 @@
+/**
+ * WordPress Dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { PromptRepeater } from './prompt-repeater';
 
+/**
+ * Component for Title Generation feature settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the Title Generation feature.
+ *
+ * @return {React.ReactElement} TitleGenerationSettings component.
+ */
 export const TitleGenerationSettings = () => {
 	const featureSettings = useSelect( ( select ) =>
 		select( STORE_NAME ).getFeatureSettings()
diff --git a/src/js/settings/components/feature-settings/context.js b/src/js/settings/components/feature-settings/context.js
index 4a0d0362e..2f2194879 100644
--- a/src/js/settings/components/feature-settings/context.js
+++ b/src/js/settings/components/feature-settings/context.js
@@ -1,12 +1,22 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { createContext, useContext } from '@wordpress/element';
 
+/**
+ * Context for the FeatureSettings.
+ */
 export const FeatureContext = createContext( {
 	featureName: '',
 } );
 
+/**
+ * Custom hook to access the FeatureContext.
+ *
+ * This hook provides a convenient way to access the FeatureContext.
+ *
+ * @return {Object} The current context value for FeatureContext.
+ */
 export const useFeatureContext = () => {
 	return useContext( FeatureContext );
 };
diff --git a/src/js/settings/components/feature-settings/index.js b/src/js/settings/components/feature-settings/index.js
index 86249c630..cc2d031cd 100644
--- a/src/js/settings/components/feature-settings/index.js
+++ b/src/js/settings/components/feature-settings/index.js
@@ -19,6 +19,11 @@ import { Notices } from './notices';
 import { useFeatureContext } from './context';
 import { FeatureAdditionalSettings } from '../feature-additional-settings';
 
+/**
+ * Component to display a notice when the Smart 404 feature is enabled but ElasticPress is not active.
+ *
+ * @return {React.ReactElement} The ElasticPressRequiredNotice component.
+ */
 const ElasticPressRequiredNotice = () => (
 	<Notice
 		status="error"
@@ -37,6 +42,8 @@ const ElasticPressRequiredNotice = () => (
 /**
  * Feature Settings component.
  *
+ * This is the main component for the feature settings page. It renders the settings panel for the selected feature.
+ *
  * @param {Object}   props               Component props.
  * @param {Function} props.onSaveSuccess Callback function to be executed after saving settings.
  */
diff --git a/src/js/settings/components/feature-settings/notices.js b/src/js/settings/components/feature-settings/notices.js
index d549ae868..fc9920d8c 100644
--- a/src/js/settings/components/feature-settings/notices.js
+++ b/src/js/settings/components/feature-settings/notices.js
@@ -1,7 +1,18 @@
+/**
+ * WordPress dependencies
+ */
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { NoticeList } from '@wordpress/components';
 
+/**
+ * Component for displaying notices for a specific feature.
+ *
+ * @param {Object} props         Component props.
+ * @param {string} props.feature Feature name.
+ *
+ * @return {React.ReactElement} Notices component.
+ */
 export const Notices = ( { feature } ) => {
 	const { removeNotice } = useDispatch( noticesStore );
 	const notices = useSelect( ( select ) =>
diff --git a/src/js/settings/components/feature-settings/save-settings-button.js b/src/js/settings/components/feature-settings/save-settings-button.js
index f69e95dee..8cb36698d 100644
--- a/src/js/settings/components/feature-settings/save-settings-button.js
+++ b/src/js/settings/components/feature-settings/save-settings-button.js
@@ -17,6 +17,9 @@ import { useSetupPage } from '../classifai-onboarding/hooks';
 /**
  * Save Settings Button component.
  *
+ * This component renders a button that allows users to save the settings for a feature.
+ * It also handles the saving of settings via the REST API.
+ *
  * @param {Object}   props               Component props.
  * @param {Function} props.onSaveSuccess Callback function to be executed after saving settings.
  * @param {string}   props.label         Button label.
diff --git a/src/js/settings/components/header/index.js b/src/js/settings/components/header/index.js
index 309b18bf3..eeb3f1229 100644
--- a/src/js/settings/components/header/index.js
+++ b/src/js/settings/components/header/index.js
@@ -3,6 +3,9 @@
  */
 import { NavLink } from 'react-router-dom';
 
+/**
+ * WordPress dependencies
+ */
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -19,6 +22,13 @@ import { __ } from '@wordpress/i18n';
 import { ClassifAILogo } from '../../utils/icons';
 import { useSetupPage } from '../classifai-onboarding/hooks';
 
+/**
+ * Header component for the ClassifAI settings.
+ *
+ * This component renders the header for the ClassifAI settings page and the onboarding process.
+ *
+ * @return {React.ReactElement} Header component.
+ */
 export const Header = () => {
 	const { isSetupPage, step } = useSetupPage();
 	const onBoardingSteps = {
diff --git a/src/js/settings/components/provider-settings/amazon-polly.js b/src/js/settings/components/provider-settings/amazon-polly.js
index ed3843958..b10e24a86 100644
--- a/src/js/settings/components/provider-settings/amazon-polly.js
+++ b/src/js/settings/components/provider-settings/amazon-polly.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	SelectControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Amazon Polly Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Amazon Polly Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} AmazonPollySettings component.
+ */
 export const AmazonPollySettings = ( { isConfigured = false } ) => {
 	const providerName = 'aws_polly';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/azure-ai-vision.js b/src/js/settings/components/provider-settings/azure-ai-vision.js
index 446412507..f34a27e21 100644
--- a/src/js/settings/components/provider-settings/azure-ai-vision.js
+++ b/src/js/settings/components/provider-settings/azure-ai-vision.js
@@ -1,11 +1,28 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useFeatureContext } from '../feature-settings/context';
 
+/**
+ * Component for Azure AI Vision Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Azure AI Vision Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} AzureAIVisionSettings component.
+ */
 export const AzureAIVisionSettings = ( { isConfigured = false } ) => {
 	const providerName = 'ms_computer_vision';
 	const { featureName } = useFeatureContext();
diff --git a/src/js/settings/components/provider-settings/azure-openai.js b/src/js/settings/components/provider-settings/azure-openai.js
index f2f794860..9a6b9b016 100644
--- a/src/js/settings/components/provider-settings/azure-openai.js
+++ b/src/js/settings/components/provider-settings/azure-openai.js
@@ -1,11 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useFeatureContext } from '../feature-settings/context';
 
+/**
+ * Component for Azure OpenAI Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Azure OpenAI Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {string}  props.providerName The provider name.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} AzureOpenAISettings component.
+ */
 export const AzureOpenAISettings = ( {
 	providerName = 'azure_openai',
 	isConfigured = false,
diff --git a/src/js/settings/components/provider-settings/azure-personlizer.js b/src/js/settings/components/provider-settings/azure-personlizer.js
index 10e8dea7d..d4b3c4872 100644
--- a/src/js/settings/components/provider-settings/azure-personlizer.js
+++ b/src/js/settings/components/provider-settings/azure-personlizer.js
@@ -1,10 +1,27 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Azure Personalizer Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Azure Personalizer Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} AzurePersonalizerSettings component.
+ */
 export const AzurePersonalizerSettings = ( { isConfigured = false } ) => {
 	const providerName = 'ms_azure_personalizer';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/azure-text-to-speech.js b/src/js/settings/components/provider-settings/azure-text-to-speech.js
index ae1893e66..f486c5a79 100644
--- a/src/js/settings/components/provider-settings/azure-text-to-speech.js
+++ b/src/js/settings/components/provider-settings/azure-text-to-speech.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	SelectControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Azure Text to Speech Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Azure Text to Speech Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} AzureTextToSpeechSettings component.
+ */
 export const AzureTextToSpeechSettings = ( { isConfigured = false } ) => {
 	const providerName = 'ms_azure_text_to_speech';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/google-gemini-api.js b/src/js/settings/components/provider-settings/google-gemini-api.js
index 98f93af0c..5ac90eeb3 100644
--- a/src/js/settings/components/provider-settings/google-gemini-api.js
+++ b/src/js/settings/components/provider-settings/google-gemini-api.js
@@ -1,10 +1,27 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for Google AI (Gemini API) Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Google AI (Gemini API) Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} GoogleAIGeminiAPISettings component.
+ */
 export const GoogleAIGeminiAPISettings = ( { isConfigured = false } ) => {
 	const providerName = 'googleai_gemini_api';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/ibm-watson-nlu.js b/src/js/settings/components/provider-settings/ibm-watson-nlu.js
index 32d2edbdc..6283c6361 100644
--- a/src/js/settings/components/provider-settings/ibm-watson-nlu.js
+++ b/src/js/settings/components/provider-settings/ibm-watson-nlu.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import {
@@ -5,9 +8,23 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for IBM Watson NLU Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the IBM Watson NLU Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} IBMWatsonNLUSettings component.
+ */
 export const IBMWatsonNLUSettings = ( { isConfigured = false } ) => {
 	const providerName = 'ibm_watson_nlu';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/index.js b/src/js/settings/components/provider-settings/index.js
index 4dceb9194..8567c4978 100644
--- a/src/js/settings/components/provider-settings/index.js
+++ b/src/js/settings/components/provider-settings/index.js
@@ -28,6 +28,15 @@ import { AmazonPollySettings } from './amazon-polly';
 import { AzureTextToSpeechSettings } from './azure-text-to-speech';
 import { OpenAITextToSpeachSettings } from './openai-text-to-speech';
 
+/**
+ * Component for rendering provider setting fields based on the selected provider.
+ *
+ * @param {Object}  props              Component props.
+ * @param {string}  props.provider     The selected provider.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} ProviderFields component.
+ */
 const ProviderFields = ( { provider, isConfigured } ) => {
 	switch ( provider ) {
 		case 'openai_chatgpt':
@@ -81,7 +90,11 @@ const ProviderFields = ( { provider, isConfigured } ) => {
 };
 
 /**
- * Feature Settings component.
+ * Provider Settings component.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the provider settings.
+ *
+ * @return {React.ReactElement} ProviderSettings component.
  */
 export const ProviderSettings = () => {
 	const [ editProvider, setEditProvider ] = useState( false );
diff --git a/src/js/settings/components/provider-settings/openai-chatgpt.js b/src/js/settings/components/provider-settings/openai-chatgpt.js
index 6e412c74b..12cf8191b 100644
--- a/src/js/settings/components/provider-settings/openai-chatgpt.js
+++ b/src/js/settings/components/provider-settings/openai-chatgpt.js
@@ -1,11 +1,28 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useFeatureContext } from '../feature-settings/context';
 
+/**
+ * Component for OpenAI ChatGPT Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI ChatGPT Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAIChatGPTSettings component.
+ */
 export const OpenAIChatGPTSettings = ( { isConfigured = false } ) => {
 	const { featureName } = useFeatureContext();
 	const providerName = 'openai_chatgpt';
diff --git a/src/js/settings/components/provider-settings/openai-dalle.js b/src/js/settings/components/provider-settings/openai-dalle.js
index 7bc01358b..9431c06b5 100644
--- a/src/js/settings/components/provider-settings/openai-dalle.js
+++ b/src/js/settings/components/provider-settings/openai-dalle.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	SelectControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for OpenAI DALL-E Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI DALL-E Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAIDallESettings component.
+ */
 export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 	const providerName = 'openai_dalle';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/openai-embeddings.js b/src/js/settings/components/provider-settings/openai-embeddings.js
index 8e5e847e4..8e7afe11c 100644
--- a/src/js/settings/components/provider-settings/openai-embeddings.js
+++ b/src/js/settings/components/provider-settings/openai-embeddings.js
@@ -1,7 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
 import { STORE_NAME } from '../../data/store';
 import { OpenAISettings } from './openai';
 
+/**
+ * React Component for OpenAI Embeddings settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI Embeddings settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAIEmbeddingsSettings component.
+ */
 export const OpenAIEmbeddingsSettings = ( { isConfigured = false } ) => {
 	const providerName = 'openai_embeddings';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/openai-moderation.js b/src/js/settings/components/provider-settings/openai-moderation.js
index ae45bfb2c..5491ccc1b 100644
--- a/src/js/settings/components/provider-settings/openai-moderation.js
+++ b/src/js/settings/components/provider-settings/openai-moderation.js
@@ -1,7 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
 import { STORE_NAME } from '../../data/store';
 import { OpenAISettings } from './openai';
 
+/**
+ * Component for OpenAI Moderation settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI Moderation settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAIModerationSettings component.
+ */
 export const OpenAIModerationSettings = ( { isConfigured = false } ) => {
 	const providerName = 'openai_moderation';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/openai-text-to-speech.js b/src/js/settings/components/provider-settings/openai-text-to-speech.js
index 5f67ea2ae..127b71706 100644
--- a/src/js/settings/components/provider-settings/openai-text-to-speech.js
+++ b/src/js/settings/components/provider-settings/openai-text-to-speech.js
@@ -1,12 +1,29 @@
+/**
+ * WordPress dependencies
+ */
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	SelectControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
 import { SettingsRow } from '../settings-row';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { STORE_NAME } from '../../data/store';
 
+/**
+ * Component for OpenAI Text to Speech Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI Text to Speech Provider settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAITextToSpeachSettings component.
+ */
 export const OpenAITextToSpeachSettings = ( { isConfigured = false } ) => {
 	const providerName = 'openai_text_to_speech';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/openai-whisper.js b/src/js/settings/components/provider-settings/openai-whisper.js
index 7d4fc1441..a2aeb4cc5 100644
--- a/src/js/settings/components/provider-settings/openai-whisper.js
+++ b/src/js/settings/components/provider-settings/openai-whisper.js
@@ -1,7 +1,24 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
 import { STORE_NAME } from '../../data/store';
 import { OpenAISettings } from './openai';
 
+/**
+ * Component for OpenAI Whisper settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI Whisper settings.
+ *
+ * @param {Object}  props              Component props.
+ * @param {boolean} props.isConfigured Whether the provider is configured.
+ *
+ * @return {React.ReactElement} OpenAIWhisperSettings component.
+ */
 export const OpenAIWhisperSettings = ( { isConfigured = false } ) => {
 	const providerName = 'openai_whisper';
 	const providerSettings = useSelect(
diff --git a/src/js/settings/components/provider-settings/openai.js b/src/js/settings/components/provider-settings/openai.js
index 5de1692ab..0b2c5c374 100644
--- a/src/js/settings/components/provider-settings/openai.js
+++ b/src/js/settings/components/provider-settings/openai.js
@@ -3,6 +3,18 @@ import { __experimentalInputControl as InputControl } from '@wordpress/component
 import { __ } from '@wordpress/i18n';
 import { SettingsRow } from '../settings-row';
 
+/**
+ * Component for OpenAI Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the OpenAI Provider settings.
+ * This is the base component for OpenAI settings.
+ *
+ * @param {Object}   props                  Component props.
+ * @param {Object}   props.providerSettings The provider settings.
+ * @param {Function} props.onChange         Function to call when the provider settings change.
+ *
+ * @return {React.ReactElement} OpenAISettings component.
+ */
 export const OpenAISettings = ( { providerSettings, onChange } ) => {
 	const Description = () => (
 		<>
diff --git a/src/js/settings/components/user-permissions/index.js b/src/js/settings/components/user-permissions/index.js
index aeb6b4a28..4d16ab948 100644
--- a/src/js/settings/components/user-permissions/index.js
+++ b/src/js/settings/components/user-permissions/index.js
@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -14,6 +14,13 @@ import { SettingsRow } from '../settings-row';
 import { STORE_NAME } from '../../data/store';
 import { useUserPermissionsPreferences } from '../../utils/utils';
 
+/**
+ * Component for User Permissions settings.
+ *
+ * This component is used within the FeatureSettings component to allow users to configure the User Permissions settings.
+ *
+ * @return {React.ReactElement} UserPermissions component.
+ */
 export const UserPermissions = () => {
 	const { isOpen, setIsOpen } = useUserPermissionsPreferences();
 	const { setFeatureSettings } = useDispatch( STORE_NAME );
diff --git a/src/js/settings/data/hooks.js b/src/js/settings/data/hooks.js
index dccc36bc1..0c02561b5 100644
--- a/src/js/settings/data/hooks.js
+++ b/src/js/settings/data/hooks.js
@@ -1,9 +1,20 @@
+/**
+ * WordPress dependencies
+ */
 import { useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { STORE_NAME } from '../data/store';
 
+/**
+ * Internal dependencies
+ */
+import { STORE_NAME } from '../data/store';
 import { FeatureContext } from '../components/feature-settings/context';
 
+/**
+ * Custom hook to get and set feature settings.
+ *
+ * @return {Object} The feature settings.
+ */
 export const useFeatureSettings = () => {
 	let { featureName } = useContext( FeatureContext );
 
diff --git a/src/js/settings/data/store.js b/src/js/settings/data/store.js
index 1967aac25..50e3aaa46 100644
--- a/src/js/settings/data/store.js
+++ b/src/js/settings/data/store.js
@@ -12,10 +12,14 @@ import * as actions from './actions';
 
 export const STORE_NAME = 'classifai-settings';
 
+/**
+ * Store for the settings data.
+ */
 export const store = createReduxStore( STORE_NAME, {
 	reducer,
 	selectors,
 	actions,
 } );
 
+// Register the store.
 register( store );
diff --git a/src/js/settings/index.js b/src/js/settings/index.js
index 3d19774e6..f4135d149 100644
--- a/src/js/settings/index.js
+++ b/src/js/settings/index.js
@@ -11,6 +11,9 @@ import './data/store';
 import '../../scss/settings.scss';
 import { ClassifAISettings } from './components';
 
+/**
+ * Render the ClassifAI settings component.
+ */
 domReady( () => {
 	const adminEl = document.getElementById( 'classifai-settings' );
 
diff --git a/src/js/settings/utils/icons.js b/src/js/settings/utils/icons.js
index 75fcf1c4d..fd6d51f34 100644
--- a/src/js/settings/utils/icons.js
+++ b/src/js/settings/utils/icons.js
@@ -3,6 +3,11 @@
  */
 import { SVG, Path } from '@wordpress/components';
 
+/**
+ * ClassifAI Logo SVG component.
+ *
+ * @return {React.ReactElement} ClassifAI Logo SVG component.
+ */
 export const ClassifAILogo = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 197 32" fill="none">
 		<Path d="M138.103 0H196.007V32H138.103V0Z" fill="#F82C2C" />
diff --git a/src/js/settings/utils/utils.js b/src/js/settings/utils/utils.js
index 5d04817df..e9736398c 100644
--- a/src/js/settings/utils/utils.js
+++ b/src/js/settings/utils/utils.js
@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
@@ -23,11 +26,23 @@ export const updateUrl = ( key, value ) => {
 	}
 };
 
+/**
+ * Get the feature settings for the given feature name.
+ *
+ * @param {string} featureName The feature name.
+ * @return {Object} The feature settings.
+ */
 export const getFeature = ( featureName ) => {
 	const features = getFeatures();
 	return features[ featureName ];
 };
 
+/**
+ * Get the features object.
+ * The features object is a combination of all the features from all the services.
+ *
+ * @return {Object} The features object.
+ */
 export const getFeatures = () => {
 	let features = {};
 	for ( const key in window.classifAISettings?.features || {} ) {