Skip to content

Commit edf372b

Browse files
devchasdevchas
authored
Add dynamic SDUI app example (#25)
* Add dynamic SDUI app
1 parent e95cedf commit edf372b

120 files changed

Lines changed: 29141 additions & 0 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dynamic-sdui-app/.gitignore‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
2+
3+
# Compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
/bazel-out
8+
9+
# Node
10+
/node_modules
11+
npm-debug.log
12+
yarn-error.log
13+
14+
# IDEs and editors
15+
.idea/
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# Visual Studio Code
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
.history/*
30+
.editorconfig
31+
.vscode/
32+
33+
# Miscellaneous
34+
/.angular/cache
35+
.sass-cache/
36+
/connect.lock
37+
/coverage
38+
/libpeerconnection.log
39+
testem.log
40+
/typings
41+
__screenshots__/
42+
.gemini/
43+
.angular/
44+
.genkit/
45+
mcp-server/__pycache__/
46+
47+
# System files
48+
.DS_Store
49+
Thumbs.db
50+

‎dynamic-sdui-app/.postcssrc.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"plugins": {
3+
"@tailwindcss/postcss": {}
4+
}
5+
}

‎dynamic-sdui-app/LICENSE‎

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

‎dynamic-sdui-app/README.md‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Dynamic SDUI Generation Framework with Angular and AI
2+
3+
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.
4+
5+
**Please note: This is an experimental project and not an official Angular solution for generating SDUI apps.**
6+
7+
## Core Concepts
8+
9+
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.
10+
11+
### The Two-AI Architecture
12+
13+
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.
14+
15+
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.
16+
17+
### The `app-context.ts` File
18+
19+
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:
20+
* **App Metadata**: The application's name, theme, and welcome messages.
21+
* **Component Map**: A registry that maps component names to their actual Angular component classes.
22+
* **Component Context**: Detailed metadata for each component, including its purpose and input properties.
23+
* **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").
24+
25+
---
26+
27+
## How It Works: The Rendering Flow
28+
29+
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").
30+
2. **Genkit Flow**: The prompt is sent to the Genkit backend, which triggers the Executor AI flow.
31+
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.
32+
4. **Dynamic Rendering**: The Angular frontend receives this JSON schema.
33+
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.
34+
35+
---
36+
37+
## Sample Applications
38+
39+
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`.
40+
41+
### 1. Haven - Vacation Rentals
42+
43+
* **Description**: An application for discovering and booking vacation rentals. The AI can generate views for property listings, detailed property pages, and inspirational destination cards.
44+
* **Directory**: `src/app/apps/vacation-rentals`
45+
46+
### 2. Magic Bookstore
47+
48+
* **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.
49+
* **Directory**: `src/app/apps/magic-bookstore`
50+
51+
### 3. Adev Docs - Angular Documentation
52+
53+
* **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.
54+
* **Directory**: `src/app/apps/adev-docs`
55+
* **Please note**: This is a sample application and is not intended to be used as an official source for Angular documentation.
56+
57+
---
58+
59+
## Getting Started
60+
61+
### Prerequisites
62+
63+
* [Node.js](https://nodejs.org/) (LTS version recommended)
64+
* [pnpm](https://pnpm.io/installation)
65+
* [Angular CLI](https://angular.io/cli)
66+
* [Python](https://www.python.org/downloads/) (3.x recommended)
67+
68+
### Installation
69+
70+
1. Clone the repository:
71+
```bash
72+
git clone <repository-url>
73+
cd <repository-directory>
74+
```
75+
76+
2. Install the Node.js dependencies:
77+
```bash
78+
pnpm install
79+
```
80+
81+
### Running the Application
82+
83+
1. **Start the Angular Development Server**:
84+
This will serve the frontend application.
85+
```bash
86+
ng serve
87+
```
88+
The application will be available at `http://localhost:4200/`.
89+
90+
91+
92+
---
93+
94+
## Creating a New Dynamic Application
95+
96+
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).
97+
98+
---
99+
100+
## Project Structure
101+
102+
```
103+
/
104+
├── mcp-server/ # Python server for the Generator AI
105+
│ └── server.py
106+
├── src/
107+
│ ├── app/
108+
│ │ ├── apps/ # Contains the dynamic application packages
109+
│ │ │ ├── vacation-rentals/
110+
│ │ │ │ ├── components/
111+
│ │ │ │ └── app-context.ts # The "manifest" for the Haven app
112+
│ │ │ └── ...
113+
│ │ ├── magic-ai/ # Core logic for rendering AI-generated schemas
114+
│ │ │ └── magic-ai-renderer.component.ts
115+
│ │ └── chat/ # The main chat interface component
116+
│ └── genkit-utils/ # Genkit flows and prompts for the Executor AI
117+
│ ├── flows.ts
118+
│ └── prompts.ts
119+
└── angular.json
120+
└── package.json
121+
```

‎dynamic-sdui-app/angular.json‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"cli": {
5+
"packageManager": "npm",
6+
"analytics": false
7+
},
8+
"newProjectRoot": "projects",
9+
"projects": {
10+
"dynamic-sdui-app": {
11+
"projectType": "application",
12+
"schematics": {},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular/build:application",
19+
"options": {
20+
"allowedCommonJsDependencies": [
21+
"node-domexception",
22+
"web-streams-polyfill/dist/ponyfill.es2018.js",
23+
"@genkit-ai/core/async"
24+
],
25+
"browser": "src/main.ts",
26+
"tsConfig": "tsconfig.app.json",
27+
"assets": [
28+
{
29+
"glob": "**/*",
30+
"input": "public"
31+
}
32+
],
33+
"styles": [
34+
"node_modules/highlight.js/styles/atom-one-dark.css",
35+
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
36+
"src/styles.css"
37+
],
38+
"server": "src/main.server.ts",
39+
"outputMode": "server",
40+
"ssr": {
41+
"entry": "src/server.ts"
42+
}
43+
},
44+
"configurations": {
45+
"production": {
46+
"budgets": [
47+
{
48+
"type": "initial",
49+
"maximumWarning": "500kB",
50+
"maximumError": "1MB"
51+
},
52+
{
53+
"type": "anyComponentStyle",
54+
"maximumWarning": "4kB",
55+
"maximumError": "8kB"
56+
}
57+
],
58+
"outputHashing": "all"
59+
},
60+
"development": {
61+
"optimization": false,
62+
"extractLicenses": false,
63+
"sourceMap": true
64+
}
65+
},
66+
"defaultConfiguration": "production"
67+
},
68+
"serve": {
69+
"builder": "@angular/build:dev-server",
70+
"configurations": {
71+
"production": {
72+
"buildTarget": "dynamic-sdui-app:build:production"
73+
},
74+
"development": {
75+
"buildTarget": "dynamic-sdui-app:build:development"
76+
}
77+
},
78+
"defaultConfiguration": "development"
79+
},
80+
"extract-i18n": {
81+
"builder": "@angular/build:extract-i18n"
82+
},
83+
"test": {
84+
"builder": "@angular/build:karma",
85+
"options": {
86+
"tsConfig": "tsconfig.spec.json",
87+
"assets": [
88+
{
89+
"glob": "**/*",
90+
"input": "public"
91+
}
92+
],
93+
"styles": [
94+
"src/styles.css"
95+
]
96+
}
97+
}
98+
}
99+
}
100+
}
101+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# FastMCP Server for Dynamic SDUI Generation
2+
3+
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.
4+
5+
## What is FastMCP?
6+
7+
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.
8+
9+
To install FastMCP, please visit the official documentation:
10+
[**FastMCP Installation Guide**](https://gofastmcp.com/getting-started/installation)
11+
12+
## Integration with Gemini CLI
13+
14+
The easiest way to interact with this server and use the generative prompts is through the [Gemini CLI](https://github.com/google/gemini-cli).
15+
16+
### Get Started Today
17+
18+
Want to try out the integration? It’s easy to get up and running with Gemini CLI and FastMCP.
19+
20+
1. **Install Gemini CLI**: `npm install -g @google/gemini-cli@latest`
21+
2. **Install FastMCP** (*v2.12.3* or later): `pip install fastmcp>=2.12.3`
22+
3. **Create your `server.py`** with custom tools and prompts. ([example](https://gofastmcp.com/integrations/gemini-cli#create-a-server))
23+
4. **Integrate**: `fastmcp install gemini-cli server.py`
24+
5. **Launch Gemini CLI** and use `/mcp` to verify.
25+
26+
For more information on the integration between Gemini CLI and FastMCP, check out this blog post:
27+
[**Gemini CLI & FastMCP: Simplifying MCP Server Development**](https://developers.googleblog.com/en/gemini-cli-fastmcp-simplifying-mcp-server-development/)
28+
29+
---
30+
31+
## Available Prompts
32+
33+
You can run the following prompts from the Gemini CLI to generate code for this project.
34+
35+
### 1. Generate a New SDUI Application
36+
37+
* **Command**: `/generate_dynamic_sdui_app`
38+
* **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.
39+
* **How to run**: Type `/generate_dynamic_sdui_app` in the Gemini CLI and follow the on-screen instructions.
40+
41+
### 2. Create a New Dynamic Component
42+
43+
* **Command**: `/create_dynamic_component`
44+
* **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.
45+
* **How to run**: Type `/create_dynamic_component` in the Gemini CLI and follow the on-screen instructions.

0 commit comments

Comments
 (0)