@aws/nx-plugin 0.90.0 → 0.91.0

package/src/ts/strands-agent/react-connection/__snapshots__/generator.spec.ts.snap

@@ -0,0 +1,376 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ts strands agent react connection generator > should generate strands agent react connection files > TestAgentAgentClientProvider.tsx 1`] = `
+"import type { AppRouter } from 'agent-project/src/agent/router.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import { createContext, FC, PropsWithChildren, useMemo } from 'react';
+import { useRuntimeConfig } from '../hooks/useRuntimeConfig';
+import {
+  TRPCClient,
+  createTRPCClient,
+  createWSClient,
+  wsLink,
+} from '@trpc/client';
+import { useSigV4 } from '../hooks/useSigV4';
+
+/**
+ * Build a WebSocket URL from a Bedrock AgentCore Runtime ARN
+ */
+function buildAgentCoreWsUrl(agentRuntimeArn: string): string {
+  const region = agentRuntimeArn.split(':')[3];
+  return \`wss://bedrock-agentcore.\${region}.amazonaws.com/runtimes/\${encodeURIComponent(agentRuntimeArn)}/ws\`;
+}
+
+export interface TestAgentAgentTRPCContextValue {
+  optionsProxy: ReturnType<typeof createTRPCOptionsProxy<AppRouter>>;
+  client: TRPCClient<AppRouter>;
+}
+
+export const TestAgentAgentTRPCContext =
+  createContext<TestAgentAgentTRPCContextValue | null>(null);
+
+export const TestAgentAgentClientProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const queryClient = useQueryClient();
+  const runtimeConfig = useRuntimeConfig();
+  const agentRuntimeValue = runtimeConfig.agentRuntimes.TestAgent;
+  const sigv4Client = useSigV4();
+
+  const container = useMemo<TestAgentAgentTRPCContextValue>(() => {
+    // If the value is an ARN, convert it to a WebSocket URL
+    const wsUrl = agentRuntimeValue.startsWith('arn:')
+      ? buildAgentCoreWsUrl(agentRuntimeValue)
+      : agentRuntimeValue;
+
+    const wsClient = createWSClient({
+      url: async () => {
+        const signedRequest = await sigv4Client.sign(wsUrl, {
+          method: 'GET',
+          aws: { signQuery: true },
+        });
+        return signedRequest.url;
+      },
+    });
+
+    const client = createTRPCClient<AppRouter>({
+      links: [wsLink({ client: wsClient })],
+    });
+
+    const optionsProxy = createTRPCOptionsProxy<AppRouter>({
+      client,
+      queryClient,
+    });
+
+    return { optionsProxy, client };
+  }, [agentRuntimeValue, queryClient, sigv4Client]);
+
+  return (
+    <TestAgentAgentTRPCContext.Provider value={container}>
+      {children}
+    </TestAgentAgentTRPCContext.Provider>
+  );
+};
+
+export default TestAgentAgentClientProvider;
+"
+`;
+
+exports[`ts strands agent react connection generator > should generate strands agent react connection files > useTestAgentAgent.tsx 1`] = `
+"import { useContext } from 'react';
+import {
+  TestAgentAgentTRPCContext,
+  type TestAgentAgentTRPCContextValue,
+} from '../components/TestAgentAgentClientProvider';
+
+export const useTestAgentAgent =
+  (): TestAgentAgentTRPCContextValue['optionsProxy'] => {
+    const container = useContext(TestAgentAgentTRPCContext);
+    if (!container) {
+      throw new Error(
+        'useTestAgentAgent must be used within TestAgentAgentClientProvider',
+      );
+    }
+    return container.optionsProxy;
+  };
+
+export const useTestAgentAgentClient =
+  (): TestAgentAgentTRPCContextValue['client'] => {
+    const container = useContext(TestAgentAgentTRPCContext);
+    if (!container) {
+      throw new Error(
+        'useTestAgentAgentClient must be used within TestAgentAgentClientProvider',
+      );
+    }
+    return container.client;
+  };
+"
+`;
+
+exports[`ts strands agent react connection generator > should handle Cognito auth option > TestAgentAgentClientProvider-Cognito.tsx 1`] = `
+"import type { AppRouter } from 'agent-project/src/agent/router.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import { createContext, FC, PropsWithChildren, useMemo } from 'react';
+import { useRuntimeConfig } from '../hooks/useRuntimeConfig';
+import {
+  TRPCClient,
+  createTRPCClient,
+  createWSClient,
+  wsLink,
+} from '@trpc/client';
+import { useAuth } from 'react-oidc-context';
+
+/**
+ * Utility to base64url-encode a string (for JWT in WebSocket protocol header)
+ */
+function base64UrlEncode(str: string): string {
+  return btoa(str).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=/g, '');
+}
+
+/**
+ * Build a WebSocket URL from a Bedrock AgentCore Runtime ARN
+ */
+function buildAgentCoreWsUrl(agentRuntimeArn: string): string {
+  const region = agentRuntimeArn.split(':')[3];
+  return \`wss://bedrock-agentcore.\${region}.amazonaws.com/runtimes/\${encodeURIComponent(agentRuntimeArn)}/ws\`;
+}
+
+export interface TestAgentAgentTRPCContextValue {
+  optionsProxy: ReturnType<typeof createTRPCOptionsProxy<AppRouter>>;
+  client: TRPCClient<AppRouter>;
+}
+
+export const TestAgentAgentTRPCContext =
+  createContext<TestAgentAgentTRPCContextValue | null>(null);
+
+export const TestAgentAgentClientProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const queryClient = useQueryClient();
+  const runtimeConfig = useRuntimeConfig();
+  const agentRuntimeValue = runtimeConfig.agentRuntimes.TestAgent;
+  const auth = useAuth();
+  const accessToken = auth?.user?.access_token;
+
+  const container = useMemo<TestAgentAgentTRPCContextValue>(() => {
+    // If the value is an ARN, convert it to a WebSocket URL
+    const wsUrl = agentRuntimeValue.startsWith('arn:')
+      ? buildAgentCoreWsUrl(agentRuntimeValue)
+      : agentRuntimeValue;
+
+    const wsClient = createWSClient({
+      url: wsUrl,
+      WebSocket: class extends WebSocket {
+        constructor(url: string | URL, protocols?: string | string[]) {
+          const existingProtocols = protocols
+            ? Array.isArray(protocols)
+              ? protocols
+              : [protocols]
+            : [];
+          if (accessToken) {
+            const base64Token = base64UrlEncode(accessToken);
+            super(url, [
+              ...existingProtocols,
+              \`base64UrlBearerAuthorization.\${base64Token}\`,
+              'base64UrlBearerAuthorization',
+            ]);
+          } else {
+            super(url, existingProtocols);
+          }
+        }
+      },
+    });
+
+    const client = createTRPCClient<AppRouter>({
+      links: [wsLink({ client: wsClient })],
+    });
+
+    const optionsProxy = createTRPCOptionsProxy<AppRouter>({
+      client,
+      queryClient,
+    });
+
+    return { optionsProxy, client };
+  }, [agentRuntimeValue, queryClient, accessToken]);
+
+  return (
+    <TestAgentAgentTRPCContext.Provider value={container}>
+      {children}
+    </TestAgentAgentTRPCContext.Provider>
+  );
+};
+
+export default TestAgentAgentClientProvider;
+"
+`;
+
+exports[`ts strands agent react connection generator > should handle IAM auth option > TestAgentAgentClientProvider-IAM.tsx 1`] = `
+"import type { AppRouter } from 'agent-project/src/agent/router.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import { createContext, FC, PropsWithChildren, useMemo } from 'react';
+import { useRuntimeConfig } from '../hooks/useRuntimeConfig';
+import {
+  TRPCClient,
+  createTRPCClient,
+  createWSClient,
+  wsLink,
+} from '@trpc/client';
+import { useSigV4 } from '../hooks/useSigV4';
+
+/**
+ * Build a WebSocket URL from a Bedrock AgentCore Runtime ARN
+ */
+function buildAgentCoreWsUrl(agentRuntimeArn: string): string {
+  const region = agentRuntimeArn.split(':')[3];
+  return \`wss://bedrock-agentcore.\${region}.amazonaws.com/runtimes/\${encodeURIComponent(agentRuntimeArn)}/ws\`;
+}
+
+export interface TestAgentAgentTRPCContextValue {
+  optionsProxy: ReturnType<typeof createTRPCOptionsProxy<AppRouter>>;
+  client: TRPCClient<AppRouter>;
+}
+
+export const TestAgentAgentTRPCContext =
+  createContext<TestAgentAgentTRPCContextValue | null>(null);
+
+export const TestAgentAgentClientProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const queryClient = useQueryClient();
+  const runtimeConfig = useRuntimeConfig();
+  const agentRuntimeValue = runtimeConfig.agentRuntimes.TestAgent;
+  const sigv4Client = useSigV4();
+
+  const container = useMemo<TestAgentAgentTRPCContextValue>(() => {
+    // If the value is an ARN, convert it to a WebSocket URL
+    const wsUrl = agentRuntimeValue.startsWith('arn:')
+      ? buildAgentCoreWsUrl(agentRuntimeValue)
+      : agentRuntimeValue;
+
+    const wsClient = createWSClient({
+      url: async () => {
+        const signedRequest = await sigv4Client.sign(wsUrl, {
+          method: 'GET',
+          aws: { signQuery: true },
+        });
+        return signedRequest.url;
+      },
+    });
+
+    const client = createTRPCClient<AppRouter>({
+      links: [wsLink({ client: wsClient })],
+    });
+
+    const optionsProxy = createTRPCOptionsProxy<AppRouter>({
+      client,
+      queryClient,
+    });
+
+    return { optionsProxy, client };
+  }, [agentRuntimeValue, queryClient, sigv4Client]);
+
+  return (
+    <TestAgentAgentTRPCContext.Provider value={container}>
+      {children}
+    </TestAgentAgentTRPCContext.Provider>
+  );
+};
+
+export default TestAgentAgentClientProvider;
+"
+`;
+
+exports[`ts strands agent react connection generator > should handle no auth option > TestAgentAgentClientProvider-NoAuth.tsx 1`] = `
+"import type { AppRouter } from 'agent-project/src/agent/router.js';
+import { useQueryClient } from '@tanstack/react-query';
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query';
+import { createContext, FC, PropsWithChildren, useMemo } from 'react';
+import { useRuntimeConfig } from '../hooks/useRuntimeConfig';
+import {
+  TRPCClient,
+  createTRPCClient,
+  createWSClient,
+  wsLink,
+} from '@trpc/client';
+
+/**
+ * Build a WebSocket URL from a Bedrock AgentCore Runtime ARN
+ */
+function buildAgentCoreWsUrl(agentRuntimeArn: string): string {
+  const region = agentRuntimeArn.split(':')[3];
+  return \`wss://bedrock-agentcore.\${region}.amazonaws.com/runtimes/\${encodeURIComponent(agentRuntimeArn)}/ws\`;
+}
+
+export interface TestAgentAgentTRPCContextValue {
+  optionsProxy: ReturnType<typeof createTRPCOptionsProxy<AppRouter>>;
+  client: TRPCClient<AppRouter>;
+}
+
+export const TestAgentAgentTRPCContext =
+  createContext<TestAgentAgentTRPCContextValue | null>(null);
+
+export const TestAgentAgentClientProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const queryClient = useQueryClient();
+  const runtimeConfig = useRuntimeConfig();
+  const agentRuntimeValue = runtimeConfig.agentRuntimes.TestAgent;
+
+  const container = useMemo<TestAgentAgentTRPCContextValue>(() => {
+    // If the value is an ARN, convert it to a WebSocket URL
+    const wsUrl = agentRuntimeValue.startsWith('arn:')
+      ? buildAgentCoreWsUrl(agentRuntimeValue)
+      : agentRuntimeValue;
+
+    const wsClient = createWSClient({
+      url: wsUrl,
+    });
+
+    const client = createTRPCClient<AppRouter>({
+      links: [wsLink({ client: wsClient })],
+    });
+
+    const optionsProxy = createTRPCOptionsProxy<AppRouter>({
+      client,
+      queryClient,
+    });
+
+    return { optionsProxy, client };
+  }, [agentRuntimeValue, queryClient]);
+
+  return (
+    <TestAgentAgentTRPCContext.Provider value={container}>
+      {children}
+    </TestAgentAgentTRPCContext.Provider>
+  );
+};
+
+export default TestAgentAgentClientProvider;
+"
+`;
+
+exports[`ts strands agent react connection generator > should modify main.tsx correctly > main.tsx 1`] = `
+"import TestAgentAgentClientProvider from './components/TestAgentAgentClientProvider';
+import QueryClientProvider from './components/QueryClientProvider';
+import RuntimeConfigProvider from './components/RuntimeConfig';
+
+import { RouterProvider } from '@tanstack/react-router';
+
+const App = () => <RouterProvider router={router} />;
+
+export function Main() {
+  return (
+    <RuntimeConfigProvider>
+      <QueryClientProvider>
+        <TestAgentAgentClientProvider>
+          <App />
+        </TestAgentAgentClientProvider>
+      </QueryClientProvider>
+    </RuntimeConfigProvider>
+  );
+}
+"
+`;

package/src/ts/strands-agent/react-connection/files/src/components/__agentNameClassName__AgentClientProvider.tsx.template

@@ -0,0 +1,117 @@
+import type { AppRouter } from "<%- agentProjectAlias %>/<%- agentPath %>/router.js";
+import { useQueryClient } from "@tanstack/react-query";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+import { createContext, FC, PropsWithChildren, useMemo } from "react";
+import { useRuntimeConfig } from "../hooks/useRuntimeConfig";
+import { TRPCClient, createTRPCClient, createWSClient, wsLink } from "@trpc/client";
+<%_ if (auth === 'IAM') { _%>
+import { useSigV4 } from "../hooks/useSigV4";
+<%_ } else if (auth === 'Cognito') { _%>
+import { useAuth } from "react-oidc-context";
+<%_ } _%>
+<%_ if (auth === 'Cognito') { _%>
+
+/**
+ * Utility to base64url-encode a string (for JWT in WebSocket protocol header)
+ */
+function base64UrlEncode(str: string): string {
+  return btoa(str)
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=/g, '');
+}
+<%_ } _%>
+
+/**
+ * Build a WebSocket URL from a Bedrock AgentCore Runtime ARN
+ */
+function buildAgentCoreWsUrl(agentRuntimeArn: string): string {
+  const region = agentRuntimeArn.split(':')[3];
+  return `wss://bedrock-agentcore.${region}.amazonaws.com/runtimes/${encodeURIComponent(agentRuntimeArn)}/ws`;
+}
+
+export interface <%= agentNameClassName %>AgentTRPCContextValue {
+  optionsProxy: ReturnType<typeof createTRPCOptionsProxy<AppRouter>>;
+  client: TRPCClient<AppRouter>;
+}
+
+export const <%= agentNameClassName %>AgentTRPCContext = createContext<<%= agentNameClassName %>AgentTRPCContextValue | null>(null);
+
+export const <%= agentNameClassName %>AgentClientProvider: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  const queryClient = useQueryClient();
+  const runtimeConfig = useRuntimeConfig();
+  const agentRuntimeValue = runtimeConfig.agentRuntimes.<%= agentNameClassName %>;
+  <%_ if (auth === 'IAM') { _%>
+  const sigv4Client = useSigV4();
+  <%_ } else if (auth === 'Cognito') { _%>
+  const auth = useAuth();
+  const accessToken = auth?.user?.access_token;
+  <%_ } _%>
+
+  const container = useMemo<<%= agentNameClassName %>AgentTRPCContextValue>(() => {
+    // If the value is an ARN, convert it to a WebSocket URL
+    const wsUrl = agentRuntimeValue.startsWith('arn:')
+      ? buildAgentCoreWsUrl(agentRuntimeValue)
+      : agentRuntimeValue;
+
+    <%_ if (auth === 'IAM') { _%>
+    const wsClient = createWSClient({
+      url: async () => {
+        const signedRequest = await sigv4Client.sign(wsUrl, {
+          method: 'GET',
+          aws: { signQuery: true },
+        });
+        return signedRequest.url;
+      },
+    });
+    <%_ } else if (auth === 'Cognito') { _%>
+    const wsClient = createWSClient({
+      url: wsUrl,
+      WebSocket: class extends WebSocket {
+        constructor(url: string | URL, protocols?: string | string[]) {
+          const existingProtocols = protocols
+            ? Array.isArray(protocols)
+              ? protocols
+              : [protocols]
+            : [];
+          if (accessToken) {
+            const base64Token = base64UrlEncode(accessToken);
+            super(url, [
+              ...existingProtocols,
+              `base64UrlBearerAuthorization.${base64Token}`,
+              'base64UrlBearerAuthorization',
+            ]);
+          } else {
+            super(url, existingProtocols);
+          }
+        }
+      },
+    });
+    <%_ } else { _%>
+    const wsClient = createWSClient({
+      url: wsUrl,
+    });
+    <%_ } _%>
+
+    const client = createTRPCClient<AppRouter>({
+      links: [wsLink({ client: wsClient })],
+    });
+
+    const optionsProxy = createTRPCOptionsProxy<AppRouter>({
+      client,
+      queryClient,
+    });
+
+    return { optionsProxy, client };
+  }, [agentRuntimeValue, queryClient<% if (auth === 'IAM') { %>, sigv4Client<% } else if (auth === 'Cognito') { %>, accessToken<% } %>]);
+
+  return (
+    <<%= agentNameClassName %>AgentTRPCContext.Provider value={container}>
+      {children}
+    </<%= agentNameClassName %>AgentTRPCContext.Provider>
+  );
+};
+
+export default <%= agentNameClassName %>AgentClientProvider;

package/src/ts/strands-agent/react-connection/files/src/hooks/use__agentNameClassName__Agent.tsx.template

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import { <%= agentNameClassName %>AgentTRPCContext, type <%= agentNameClassName %>AgentTRPCContextValue } from '../components/<%- agentNameClassName %>AgentClientProvider';
+
+export const use<%- agentNameClassName %>Agent = (): <%= agentNameClassName %>AgentTRPCContextValue['optionsProxy'] => {
+  const container = useContext(<%= agentNameClassName %>AgentTRPCContext);
+  if (!container) {
+    throw new Error('use<%- agentNameClassName %>Agent must be used within <%= agentNameClassName %>AgentClientProvider');
+  }
+  return container.optionsProxy;
+};
+
+export const use<%- agentNameClassName %>AgentClient = (): <%= agentNameClassName %>AgentTRPCContextValue['client'] => {
+  const container = useContext(<%= agentNameClassName %>AgentTRPCContext);
+  if (!container) {
+    throw new Error('use<%- agentNameClassName %>AgentClient must be used within <%= agentNameClassName %>AgentClientProvider');
+  }
+  return container.client;
+};

package/src/ts/strands-agent/react-connection/generator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Tree } from '@nx/devkit';
+import { NxGeneratorInfo } from '../../../utils/nx';
+import { ResolvedConnectionOptions } from '../../../connection/generator';
+export declare const TS_STRANDS_AGENT_REACT_CONNECTION_GENERATOR_INFO: NxGeneratorInfo;
+export declare function tsStrandsAgentReactConnectionGenerator(tree: Tree, options: ResolvedConnectionOptions): Promise<() => void>;
+export default tsStrandsAgentReactConnectionGenerator;

package/src/ts/strands-agent/react-connection/generator.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TS_STRANDS_AGENT_REACT_CONNECTION_GENERATOR_INFO = void 0;
+exports.tsStrandsAgentReactConnectionGenerator = tsStrandsAgentReactConnectionGenerator;
+/**
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const devkit_1 = require("@nx/devkit");
+const generator_1 = require("../../react-website/runtime-config/generator");
+const npm_scope_1 = require("../../../utils/npm-scope");
+const versions_1 = require("../../../utils/versions");
+const ast_1 = require("../../../utils/ast");
+const names_1 = require("../../../utils/names");
+const format_1 = require("../../../utils/format");
+const nx_1 = require("../../../utils/nx");
+const metrics_1 = require("../../../utils/metrics");
+const serve_local_1 = require("./serve-local");
+exports.TS_STRANDS_AGENT_REACT_CONNECTION_GENERATOR_INFO = (0, nx_1.getGeneratorInfo)(__filename);
+async function tsStrandsAgentReactConnectionGenerator(tree, options) {
+    const frontendProjectConfig = (0, nx_1.readProjectConfigurationUnqualified)(tree, options.sourceProject);
+    const agentProjectConfig = (0, nx_1.readProjectConfigurationUnqualified)(tree, options.targetProject);
+    const targetComponent = options.targetComponent;
+    // Extract agent metadata from the target component or project metadata
+    const metadata = agentProjectConfig.metadata;
+    const agentName = targetComponent?.name ?? 'agent';
+    const agentNameClassName = targetComponent?.rc ?? (0, names_1.toClassName)(agentName);
+    const agentPort = targetComponent?.port ?? metadata?.ports?.[0] ?? 8081;
+    const auth = targetComponent?.auth ?? metadata?.auth ?? 'IAM';
+    const agentProjectAlias = (0, npm_scope_1.toScopeAlias)(agentProjectConfig.name);
+    const agentPath = targetComponent?.path ?? 'src/agent';
+    // Ensure the agent project has a wildcard path entry in tsconfig.base.json
+    // so that deep imports (e.g., for the router type) resolve correctly
+    ensureWildcardPathEntry(tree, agentProjectConfig.name, agentProjectConfig.root);
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, 'files'), frontendProjectConfig.root, {
+        agentName,
+        agentNameClassName,
+        auth,
+        agentProjectAlias,
+        agentPath,
+    }, {
+        overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+    });
+    // Generate the tanstack query provider if it does not exist already
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../../../utils/files/website/components/tanstack-query'), (0, devkit_1.joinPathFragments)(frontendProjectConfig.sourceRoot, 'components'), {}, {
+        overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+    });
+    if (auth === 'IAM') {
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../../../utils/files/website/hooks/sigv4'), (0, devkit_1.joinPathFragments)(frontendProjectConfig.sourceRoot, 'hooks'), {}, {
+            overwriteStrategy: devkit_1.OverwriteStrategy.KeepExisting,
+        });
+    }
+    await (0, generator_1.runtimeConfigGenerator)(tree, {
+        project: frontendProjectConfig.name,
+    });
+    // update main.tsx
+    const mainTsxPath = (0, devkit_1.joinPathFragments)(frontendProjectConfig.sourceRoot, 'main.tsx');
+    await (0, ast_1.addSingleImport)(tree, mainTsxPath, 'QueryClientProvider', './components/QueryClientProvider');
+    const clientProviderName = `${agentNameClassName}AgentClientProvider`;
+    await (0, ast_1.addSingleImport)(tree, mainTsxPath, clientProviderName, `./components/${clientProviderName}`);
+    // Wrap <App /> in QueryClientProvider if not already present
+    if (!(await (0, ast_1.matchGritQL)(tree, mainTsxPath, '`<QueryClientProvider>$_</QueryClientProvider>`'))) {
+        await (0, ast_1.applyGritQL)(tree, mainTsxPath, '`<App />` => `<QueryClientProvider><App /></QueryClientProvider>`');
+    }
+    // Wrap <App /> in the agent client provider if not already present
+    if (!(await (0, ast_1.matchGritQL)(tree, mainTsxPath, `\`<${clientProviderName}>$_</${clientProviderName}>\``))) {
+        await (0, ast_1.applyGritQL)(tree, mainTsxPath, `\`<App />\` => \`<${clientProviderName}><App /></${clientProviderName}>\``);
+    }
+    await (0, serve_local_1.addStrandsAgentTargetToServeLocal)(tree, frontendProjectConfig.name, agentProjectConfig.name, {
+        agentName,
+        agentNameClassName,
+        port: agentPort,
+        targetComponent,
+    });
+    (0, devkit_1.addDependenciesToPackageJson)(tree, (0, versions_1.withVersions)([
+        '@trpc/client',
+        '@tanstack/react-query',
+        '@tanstack/react-query-devtools',
+        '@trpc/tanstack-react-query',
+        ...(auth === 'IAM'
+            ? [
+                'oidc-client-ts',
+                'aws4fetch',
+                '@aws-sdk/credential-providers',
+                'react-oidc-context',
+            ]
+            : []),
+        ...(auth === 'Cognito' ? ['react-oidc-context'] : []),
+    ]), (0, versions_1.withVersions)(['@smithy/types']));
+    await (0, metrics_1.addGeneratorMetricsIfApplicable)(tree, [
+        exports.TS_STRANDS_AGENT_REACT_CONNECTION_GENERATOR_INFO,
+    ]);
+    await (0, format_1.formatFilesInSubtree)(tree);
+    return () => {
+        (0, devkit_1.installPackagesTask)(tree);
+    };
+}
+exports.default = tsStrandsAgentReactConnectionGenerator;
+/**
+ * Ensures a wildcard path entry exists in tsconfig.base.json for the given project,
+ * allowing deep imports (e.g., `:scope/project/src/agent/router.js`).
+ * Both the scope alias and npm package name forms are added.
+ */
+function ensureWildcardPathEntry(tree, projectName, projectRoot) {
+    const tsconfigPath = ['tsconfig.base.json', 'tsconfig.json'].find((p) => tree.exists(p));
+    if (!tsconfigPath)
+        return;
+    const wildcardValue = [`./${projectRoot}/*`];
+    const scopeAlias = (0, npm_scope_1.toScopeAlias)(projectName);
+    (0, devkit_1.updateJson)(tree, tsconfigPath, (json) => {
+        const paths = json.compilerOptions?.paths ?? {};
+        // Add wildcard for the scope alias (used by generated templates)
+        const scopeWildcardKey = `${scopeAlias}/*`;
+        if (!paths[scopeWildcardKey]) {
+            paths[scopeWildcardKey] = wildcardValue;
+        }
+        // Also add wildcard for the npm package name
+        const npmWildcardKey = `${projectName}/*`;
+        if (!paths[npmWildcardKey]) {
+            paths[npmWildcardKey] = wildcardValue;
+        }
+        json.compilerOptions = {
+            ...json.compilerOptions,
+            paths,
+        };
+        return json;
+    });
+}
+//# sourceMappingURL=generator.js.map

package/src/ts/strands-agent/react-connection/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../packages/nx-plugin/src/ts/strands-agent/react-connection/generator.ts"],"names":[],"mappings":"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"}

package/src/ts/strands-agent/react-connection/schema.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ComponentMetadata } from '../../../utils/nx';
+
+/**
+ * TypeScript types for options defined in schema.json
+ */
+export interface TsStrandsAgentReactConnectionGeneratorSchema {
+  sourceProject: string;
+  targetProject: string;
+  sourceComponent?: ComponentMetadata;
+  targetComponent?: ComponentMetadata;
+}