Studio Assistant: Add "Open in Studio" button to Blueprint output

src/components/add-site-with-blueprint-button.tsx

@@ -0,0 +1,37 @@
+import { __ } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+import { PROTOCOL_PREFIX } from 'common/constants';
+import Button, { ButtonProps } from 'src/components/button';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+
+type AddSiteWithBlueprintButtonProps = ButtonProps & {
+	content: string;
+};
+
+function createBlueprintDeeplinkUrl( blueprintContent: string ): string {
+	const bytes = new TextEncoder().encode( blueprintContent );
+	const binString = Array.from( bytes, ( byte ) => String.fromCodePoint( byte ) ).join( '' );
+	const base64 = btoa( binString );
+	return `${ PROTOCOL_PREFIX }://add-site?blueprint=${ encodeURIComponent( base64 ) }`;
+}
+
+export function AddSiteWithBlueprintButton( {
+	content,
+	children,
+	icon = plus,
+	onClick,
+	...props
+}: AddSiteWithBlueprintButtonProps ) {
+	return (
+		<Button
+			{ ...props }
+			icon={ icon }
+			onClick={ () => {
+				const url = createBlueprintDeeplinkUrl( content );
+				getIpcApi().openURL( url );
+			} }
+		>
+			{ children || __( 'Add new site' ) }
+		</Button>
+	);
+}

src/components/assistant-code-block.tsx

@@ -4,11 +4,13 @@ import { Icon, archive, pencil, preformatted } from '@wordpress/icons';
 import { useCallback, useEffect, useState } from 'react';
 import { ExtraProps } from 'react-markdown';
 import stripAnsi from 'strip-ansi';
+import { AddSiteWithBlueprintButton } from 'src/components/add-site-with-blueprint-button';
 import Button from 'src/components/button';
 import { ChatMessageProps } from 'src/components/chat-message';
 import { CopyTextButton } from 'src/components/copy-text-button';
 import { ExecuteIcon } from 'src/components/icons/execute';
 import { useExecuteWPCLI } from 'src/hooks/use-execute-cli';
+import { useIsValidBlueprint } from 'src/hooks/use-is-valid-blueprint';
 import { useIsValidWpCliInline } from 'src/hooks/use-is-valid-wp-cli-inline';
 import { useSiteDetails } from 'src/hooks/use-site-details';
 import { cx } from 'src/lib/cx';
@@ -47,6 +49,7 @@ const LanguageBlock = ( props: ContextProps & CodeBlockProps ) => {
 	const cliTime = block?.cliTime ?? null;
 
 	const { selectedSite } = useSiteDetails();
+	const isValidBlueprint = useIsValidBlueprint( className, content );
 
 	return (
 		<>
@@ -70,6 +73,14 @@ const LanguageBlock = ( props: ContextProps & CodeBlockProps ) => {
 						} );
 					} }
 				></CopyTextButton>
+				{ isValidBlueprint && (
+					<AddSiteWithBlueprintButton
+						content={ content }
+						variant="outlined"
+						className="h-auto mr-2 !px-2.5 py-0.5 font-sans select-none"
+						iconSize={ 16 }
+					/>
+				) }
 				{ [ 'language-sh', 'language-bash' ].includes( props.className || '' ) && selectedSite && (
 					<Button
 						icon={ preformatted }

src/hooks/use-is-valid-blueprint.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState, useMemo } from 'react';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import type { Blueprint } from 'src/stores/wpcom-api';
+
+export function useIsValidBlueprint( className?: string, content?: string ) {
+	const blueprintJson = useMemo< Blueprint[ 'blueprint' ] | null >( () => {
+		if ( ! className?.includes( 'language-json' ) || ! content ) {
+			return null;
+		}
+		try {
+			const parsed = JSON.parse( content );
+			return parsed;
+		} catch {
+			return null;
+		}
+	}, [ className, content ] );
+
+	const [ isBlueprintValid, setIsBlueprintValid ] = useState( false );
+
+	useEffect( () => {
+		const validate = async () => {
+			if ( ! blueprintJson ) {
+				return;
+			}
+
+			try {
+				const validation = await getIpcApi().validateBlueprint( blueprintJson );
+				setIsBlueprintValid( Boolean( validation.valid ) );
+			} catch {
+				console.error( 'Failed to validate blueprint' );
+			}
+		};
+
+		void validate();
+	}, [ blueprintJson ] );
+
+	return isBlueprintValid;
+}