[Woo AI] Add JSON response format (#46137)

* Add response_format to Woo AI package

* Add changelog

* Request JSON response format for product name generation

* Add changelog

* Add shared types

packages/js/ai/changelog/add-json-response-format-parameter

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Add response format parameter for request completion method

packages/js/ai/src/hooks/useCompletion.ts

@@ -7,8 +7,7 @@ import { useRef, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { getCompletion, createExtendedError } from '../utils/';
-
-type StopReason = 'abort' | 'finished' | 'error' | 'interrupted';
+import { ResponseFormat, StopReason } from '../shared/types';
 
 export type UseCompletionError = Error & { code?: string; cause?: Error };
 
@@ -62,7 +61,8 @@ export const useCompletion = ( {
 
 	const requestCompletion = async (
 		prompt: string,
-		featureOverride?: string
+		featureOverride?: string,
+		responseFormat?: ResponseFormat
 	) => {
 		if (
 			! window.JP_CONNECTION_INITIAL_STATE?.connectionStatus?.isActive
@@ -89,7 +89,8 @@ export const useCompletion = ( {
 		try {
 			const suggestionsSource = await getCompletion(
 				prompt,
-				completionFeature
+				completionFeature,
+				responseFormat ?? 'text'
 			);
 
 			setCompletionActive( true );

packages/js/ai/src/shared/types.ts

@@ -0,0 +1,9 @@
+/**
+ * Streaming Stop Reason
+ */
+export type StopReason = 'abort' | 'finished' | 'error' | 'interrupted';
+
+/**
+ * Response Format for text completion
+ */
+export type ResponseFormat = 'json_object' | 'text';

packages/js/ai/src/utils/text-completion.ts

@@ -2,13 +2,20 @@
  * Internal dependencies
  */
 import { requestJetpackToken } from './requestJetpackToken';
+import { ResponseFormat } from '../shared/types';
 
 /**
  * Leaving this here to make it easier to debug the streaming API calls for now
  *
- * @param {string} prompt - The query to send to the API
+ * @param {string} prompt         - The query to send to the API
+ * @param {string} feature        - The feature to use for the completion
+ * @param {string} responseFormat - The format of the response. Can be 'text' or 'json_object'.
  */
-export async function getCompletion( prompt: string, feature: string ) {
+export async function getCompletion(
+	prompt: string,
+	feature: string,
+	responseFormat?: ResponseFormat
+) {
 	const { token } = await requestJetpackToken();
 
 	const url = new URL(
@@ -19,5 +26,9 @@ export async function getCompletion( prompt: string, feature: string ) {
 	url.searchParams.append( 'token', token );
 	url.searchParams.append( 'feature', feature );
 
+	if ( responseFormat ) {
+		url.searchParams.append( 'response_format', responseFormat );
+	}
+
 	return new EventSource( url.toString() );
 }

plugins/woo-ai/changelog/request-json-response-name-suggestions

@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Request valid JSON from the API when generating AI product names

plugins/woo-ai/src/product-name/product-name-suggestions.tsx

@@ -240,7 +240,7 @@ export const ProductNameSuggestions = () => {
 			'Return a short and concise reason for each suggestion in seven words in the "reason" part of your response.',
 			"The product's properties are:",
 			`${ JSON.stringify( validProductData ) }`,
-			'Here is an example of a valid response:',
+			'Write your response in valid JSON. Here is an example of a valid response:',
 			'{"suggestions": [{"content": "An improved alternative to the product\'s title", "reason": "Reason for the suggestion"}, {"content": "Another improved alternative to the product title", "reason": "Reason for this suggestion"}]}',
 		];
 
@@ -262,7 +262,7 @@ export const ProductNameSuggestions = () => {
 		} );
 
 		try {
-			await requestCompletion( buildPrompt() );
+			await requestCompletion( buildPrompt(), undefined, 'json_object' );
 		} catch ( e ) {
 			setSuggestionsState( SuggestionsState.Failed );
 		}