diff --git a/README.md b/README.md index 7af5327..cf5317c 100644 --- a/README.md +++ b/README.md @@ -109,26 +109,13 @@ The backend server is powered by Python and runs our sample agent. The frontend is a React web application that communicates with the backend agent and renders the interactive UI. -1. **Build and link the core @googlemaps/a2ui library:** - First, we need to compile the core web components in the `a2ui` repository and make them available locally via `npm link`. From your main parent folder, navigate to the core client directory: - ```bash - cd a2ui/client/web - npm run build-and-link - ``` - -2. **Navigate to the sample React client directory:** - ```bash - cd ../../../a2ui-samples/client/web/react - ``` - -3. **Install dependencies, link the core library, and start the development server:** +1. **Install dependencies and start the development server:** ```bash npm install - npm link @googlemaps/a2ui npm run dev ``` -4. **See the demo working live!** 🌟 +2. **See the demo working live!** 🌟 Open [http://localhost:5173](http://localhost:5173) in your web browser to interact with your fully functioning Agentic UI demo! ## Google API Keys diff --git a/client/web/react/README.md b/client/web/react/README.md index e290ad1..0953666 100644 --- a/client/web/react/README.md +++ b/client/web/react/README.md @@ -4,21 +4,13 @@ Note: this example requires a valid Google Maps API Key to be set within [index. ## To run this sample project -1. Download the latest Agentic UI Toolkit source files. -2. Open the a2ui/client/web directory in a terminal and run: - -``` -npm run build-and-link -``` - -3. Open this directory in a terminal, and run: +1. Open this directory in a terminal, and run: ``` npm install -npm link @googlemaps/a2ui npm run dev ``` -4. Open [http://localhost:5173](http://localhost:5173) in your browser. You should see a chat interface. +2. Open [http://localhost:5173](http://localhost:5173) in your browser. You should see a chat interface. To run the backend, follow the instructions in [../../../agent/python/README.md](../../../agent/python/README.md) \ No newline at end of file diff --git a/client/web/react/package-lock.json b/client/web/react/package-lock.json index a1dd91c..10256ce 100644 --- a/client/web/react/package-lock.json +++ b/client/web/react/package-lock.json @@ -11,6 +11,7 @@ "@a2a-js/sdk": "^0.3.13", "@a2ui/lit": "^0.9.1", "@a2ui/markdown-it": "^0.0.1", + "@googlemaps/a2ui": "^0.1.0", "react": "^19.2.4", "react-dom": "^19.2.4" }, @@ -540,6 +541,69 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@googlemaps/a2ui": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@googlemaps/a2ui/-/a2ui-0.1.0.tgz", + "integrity": "sha512-wgL5vkAezJmGQ4bia6OOnQGo96UkpEYyDjnaJolQrP++aH8R1rUmF7PYtvrs2btTOSWo1TZ6e63hmVrgS1Pz5g==", + "license": "Apache-2.0", + "dependencies": { + "@a2a-js/sdk": "^0.3.8", + "@a2ui/lit": "^0.9.3", + "@a2ui/markdown-it": "^0.0.3", + "@lit-labs/signals": "^0.1.3", + "@lit/context": "^1.1.4", + "lit": "^3.3.1", + "markdown-it": "^14.1.0", + "signal-utils": "^0.21.1" + } + }, + "node_modules/@googlemaps/a2ui/node_modules/@a2ui/lit": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/@a2ui/lit/-/lit-0.9.3.tgz", + "integrity": "sha512-9Z6LAPQ0w8Se+Atul1fKo/obJPLinSsP16h86xTjr8qRBQDmK6GFnT2fIkUJVALzVoADObidfIdmtbgosFDenA==", + "license": "Apache-2.0", + "dependencies": { + "@a2ui/web_core": "^0.9.2", + "@lit-labs/signals": "^0.1.3", + "@lit/context": "^1.1.4", + "lit": "^3.3.1", + "signal-utils": "^0.21.1", + "zod": "^3.25.76" + }, + "peerDependencies": { + "@a2ui/markdown-it": "^0.0.3" + }, + "peerDependenciesMeta": { + "@a2ui/markdown-it": { + "optional": true + } + } + }, + "node_modules/@googlemaps/a2ui/node_modules/@a2ui/markdown-it": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@a2ui/markdown-it/-/markdown-it-0.0.3.tgz", + "integrity": "sha512-ni/aK2oeBcjEESTO+XE+CidDb0N4aOzYL14XSYBAdAH2E7jmsbuUyHEKf4FQyYK0f8AA0C5thkZ09qPV2C3ikA==", + "license": "Apache-2.0", + "dependencies": { + "dompurify": "^3.3.1", + "markdown-it": "^14.1.0" + }, + "peerDependencies": { + "@a2ui/web_core": "^0.9.2" + } + }, + "node_modules/@googlemaps/a2ui/node_modules/@a2ui/web_core": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@a2ui/web_core/-/web_core-0.9.2.tgz", + "integrity": "sha512-EOfhLOF7tnpPmNq4y116k3gxWdrXQW8h3dhKF0pC++21zLZnCSLSHl6zgQFG+kPeVAZb64t+sQiRXlnyS8+RBg==", + "license": "Apache-2.0", + "dependencies": { + "@preact/signals-core": "^1.13.0", + "date-fns": "^4.1.0", + "zod": "^3.25.76", + "zod-to-json-schema": "^3.25.1" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/client/web/react/package.json b/client/web/react/package.json index 0c4382a..031b134 100644 --- a/client/web/react/package.json +++ b/client/web/react/package.json @@ -5,15 +5,15 @@ "type": "module", "scripts": { "dev": "vite", - "build": "npm run build:@googlemaps/a2ui && tsc -b && vite build", + "build": "tsc -b && vite build", "lint": "eslint .", - "preview": "vite preview", - "build:@googlemaps/a2ui": "cd ../../../../a2ui/client/web && npm install && npm run build && npm link && cd ../../../a2ui-samples/client/web/react && npm link @googlemaps/a2ui" + "preview": "vite preview" }, "dependencies": { "@a2a-js/sdk": "^0.3.13", "@a2ui/lit": "^0.9.1", "@a2ui/markdown-it": "^0.0.1", + "@googlemaps/a2ui": "^0.1.0", "react": "^19.2.4", "react-dom": "^19.2.4" }, @@ -31,4 +31,4 @@ "typescript-eslint": "^8.57.0", "vite": "^8.0.1" } -} \ No newline at end of file +}