Add dynamic SDUI app example

dynamic-sdui-app/.gitignore

@@ -0,0 +1,50 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+.editorconfig
+.vscode/
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+.gemini/
+.angular/
+.genkit/
+mcp-server/__pycache__/
+
+# System files
+.DS_Store
+Thumbs.db
+

dynamic-sdui-app/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

dynamic-sdui-app/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2010-2025 Google LLC. https://angular.dev/license
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

dynamic-sdui-app/README.md

@@ -0,0 +1,121 @@
+# Dynamic SDUI Generation Framework with Angular and AI
+
+This repository contains an *experimental and exploratory* framework for building and running dynamic, AI-powered, Server-Driven UI (SDUI) applications using Angular and a generative AI backend. The system uses a unique two-AI architecture: a **Generator AI** to help developers scaffold application assets and an **Executor AI** to render UIs dynamically at runtime.
+
+**Please note: This is an experimental project and not an official Angular solution for generating SDUI apps.** 
+
+##  Core Concepts
+
+The framework is built on the idea of separating the application's UI components from the logic that assembles them. An AI-powered backend takes on the role of a real-time UI/UX designer, constructing views on the fly based on user intent.
+
+### The Two-AI Architecture
+
+1.  **Generator AI**: An interactive command-line tool, powered by a Python MCP (Model-Centric Programming) server. It guides a developer through a series of questions to design, define, and generate all the necessary assets for a new dynamic application. This includes creating Angular components, configuration files, and theme variables.
+
+2.  **Executor AI**: A runtime AI, powered by [Genkit](https://genkit.dev/) flows. When a user interacts with the running application (e.g., through a chat interface), the Executor AI receives the user's prompt, analyzes the available data and UI components, and generates a JSON-based `componentSchema` that represents the entire view layout. The Angular frontend then renders this schema into a fully interactive UI.
+
+### The `app-context.ts` File
+
+Each dynamic application has a central manifest file called `app-context.ts`. This file is crucial as it provides the Executor AI with all the context it needs to build a UI. It contains:
+*   **App Metadata**: The application's name, theme, and welcome messages.
+*   **Component Map**: A registry that maps component names to their actual Angular component classes.
+*   **Component Context**: Detailed metadata for each component, including its purpose and input properties.
+*   **App Description & Layout Rules**: A detailed prompt for the Executor AI, explaining the application's domain and defining `LayoutCompositions`—rules for how to assemble components for different scenarios (e.g., a "list view" vs. a "detail view").
+
+---
+
+## How It Works: The Rendering Flow
+
+1.  **User Interaction**: A user types a prompt into the chat interface of the running Angular application (e.g., "show me modern lofts in New York").
+2.  **Genkit Flow**: The prompt is sent to the Genkit backend, which triggers the Executor AI flow.
+3.  **AI-Powered Layout Generation**: The Executor AI analyzes the user's prompt, the `app-context.ts` for the current application, and the available data (from `data-store.ts`). It then constructs a detailed JSON `componentSchema` that represents the optimal UI layout for the user's request.
+4.  **Dynamic Rendering**: The Angular frontend receives this JSON schema.
+5.  **UI Display**: The `MagicAiRendererComponent` recursively walks the JSON tree and dynamically creates and renders the corresponding Angular components, resulting in a fully interactive view generated in real-time.
+
+---
+
+## Sample Applications
+
+This repository includes three sample applications to demonstrate the framework's capabilities. You can switch between these applications by updating the `APP_NAME` constant in `src/app/magic-ai/app-context.ts`.
+
+### 1. Haven - Vacation Rentals
+
+*   **Description**: An application for discovering and booking vacation rentals. The AI can generate views for property listings, detailed property pages, and inspirational destination cards.
+*   **Directory**: `src/app/apps/vacation-rentals`
+
+### 2. Magic Bookstore
+
+*   **Description**: An e-commerce application for a bookstore. The AI can create layouts for book search results, detailed product pages with author bios and reviews, and carousels of related books.
+*   **Directory**: `src/app/apps/magic-bookstore`
+
+### 3. Adev Docs - Angular Documentation
+
+*   **Description**: A dynamic documentation site for the Angular framework. The AI can assemble complex, informative pages by combining concept explanations, API references, code snippets, and full code examples in response to a user's query.
+*   **Directory**: `src/app/apps/adev-docs`
+* **Please note**: This is a sample application and is not intended to be used as an official source for Angular documentation.
+
+---
+
+## Getting Started
+
+### Prerequisites
+
+*   [Node.js](https://nodejs.org/) (LTS version recommended)
+*   [pnpm](https://pnpm.io/installation)
+*   [Angular CLI](https://angular.io/cli)
+*   [Python](https://www.python.org/downloads/) (3.x recommended)
+
+### Installation
+
+1.  Clone the repository:
+    ```bash
+    git clone <repository-url>
+    cd <repository-directory>
+    ```
+
+2.  Install the Node.js dependencies:
+    ```bash
+    pnpm install
+    ```
+
+### Running the Application
+
+1.  **Start the Angular Development Server**:
+    This will serve the frontend application.
+    ```bash
+    ng serve
+    ```
+    The application will be available at `http://localhost:4200/`.
+
+
+
+---
+
+## Creating a New Dynamic Application
+
+This application comes packaged with an MCP server that allows you to easily create your own SDUI application like the provided samples. For detailed instructions on how to use the Generator AI, please refer to the [MCP Server README](mcp-server/README.md).
+
+---
+
+## Project Structure
+
+```
+/
+├── mcp-server/               # Python server for the Generator AI
+│   └── server.py
+├── src/
+│   ├── app/
+│   │   ├── apps/             # Contains the dynamic application packages
+│   │   │   ├── vacation-rentals/
+│   │   │   │   ├── components/
+│   │   │   │   └── app-context.ts  # The "manifest" for the Haven app
+│   │   │   └── ...
+│   │   ├── magic-ai/         # Core logic for rendering AI-generated schemas
+│   │   │   └── magic-ai-renderer.component.ts
+│   │   └── chat/             # The main chat interface component
+│   └── genkit-utils/         # Genkit flows and prompts for the Executor AI
+│       ├── flows.ts
+│       └── prompts.ts
+└── angular.json
+└── package.json
+```

dynamic-sdui-app/angular.json

@@ -0,0 +1,101 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": false
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "dynamic-sdui-app": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "allowedCommonJsDependencies": [
+              "node-domexception",
+              "web-streams-polyfill/dist/ponyfill.es2018.js",
+              "@genkit-ai/core/async"
+            ],
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "node_modules/highlight.js/styles/atom-one-dark.css",
+              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "server": "src/main.server.ts",
+            "outputMode": "server",
+            "ssr": {
+              "entry": "src/server.ts"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "dynamic-sdui-app:build:production"
+            },
+            "development": {
+              "buildTarget": "dynamic-sdui-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

dynamic-sdui-app/mcp-server/README.md

@@ -0,0 +1,45 @@
+# FastMCP Server for Dynamic SDUI Generation
+
+This directory contains a pre-packaged MCP (Model-Centric Programming) server built with [FastMCP](https://gofastmcp.com/). This server provides the prompts and logic necessary to generate entire Server-Driven UI (SDUI) applications or individual components for existing SDUI apps within this project.
+
+## What is FastMCP?
+
+FastMCP is a Python library that simplifies the creation of MCP servers, allowing you to easily expose your own tools and prompts to compatible clients, like the Gemini CLI.
+
+To install FastMCP, please visit the official documentation:
+[**FastMCP Installation Guide**](https://gofastmcp.com/getting-started/installation)
+
+## Integration with Gemini CLI
+
+The easiest way to interact with this server and use the generative prompts is through the [Gemini CLI](https://github.com/google/gemini-cli).
+
+### Get Started Today
+
+Want to try out the integration? It’s easy to get up and running with Gemini CLI and FastMCP.
+
+1.  **Install Gemini CLI**: `npm install -g @google/gemini-cli@latest`
+2.  **Install FastMCP** (*v2.12.3* or later): `pip install fastmcp>=2.12.3`
+3.  **Create your `server.py`** with custom tools and prompts. ([example](https://gofastmcp.com/integrations/gemini-cli#create-a-server))
+4.  **Integrate**: `fastmcp install gemini-cli server.py`
+5.  **Launch Gemini CLI** and use `/mcp` to verify.
+
+For more information on the integration between Gemini CLI and FastMCP, check out this blog post:
+[**Gemini CLI & FastMCP: Simplifying MCP Server Development**](https://developers.googleblog.com/en/gemini-cli-fastmcp-simplifying-mcp-server-development/)
+
+---
+
+## Available Prompts
+
+You can run the following prompts from the Gemini CLI to generate code for this project.
+
+### 1. Generate a New SDUI Application
+
+*   **Command**: `/generate_dynamic_sdui_app`
+*   **Description**: This prompt initiates an interactive workflow to design and generate all the necessary assets for a new dynamic SDUI application. The AI will guide you through a series of questions to define the app's domain, components, and styling, and then generate all the corresponding files.
+*   **How to run**: Type `/generate_dynamic_sdui_app` in the Gemini CLI and follow the on-screen instructions.
+
+### 2. Create a New Dynamic Component
+
+*   **Command**: `/create_dynamic_component`
+*   **Description**: This prompt allows you to add a new, single component to an *existing* SDUI application. The AI will ask for the application name and a description of the component, then generate the component files and integrate them into the application's context and showcase.
+*   **How to run**: Type `/create_dynamic_component` in the Gemini CLI and follow the on-screen instructions.