From 665b564d8715b1fbe0b2efbd5aa4bce61c969eeb Mon Sep 17 00:00:00 2001 From: Holt Skinner <13262395+holtskinner@users.noreply.github.com> Date: Tue, 4 Nov 2025 14:11:59 -0600 Subject: [PATCH 1/2] docs: Update Homepage Styling --- docs/index.md | 51 ++++++++++++++++++++------ docs/stylesheets/custom.css | 72 ++++++------------------------------- mkdocs.yaml | 22 ++++++------ 3 files changed, 62 insertions(+), 83 deletions(-) diff --git a/docs/index.md b/docs/index.md index 63b6a95cc..433070fd1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -6,19 +6,50 @@ hide: -
-
- A2UI Protocol Logo -

A2UI (Agent to UI) Protocol

-
+
+ + +A2UI Logo + +A2UI Logo + +# The Future of UI is Agent-Generated + +

+An open-source UI toolkit built on the A2A protocol. A2UI enables UI widgets to be passed from remote agents to any application in a simple, declarative, and framework-agnostic way. +

+ +[Join the Waitlist](https://goo.gle/a2ui-form){ .md-button .md-button--primary style="padding: 0.6rem 2rem; font-size: 1.1rem;" } +
-Thank you for your interest in A2UI! A new open source UI Toolkit to facilitate LLM-generated UIs. A2UI is built with [A2A](https://a2a-protocol.org) and allows an A2A server agent to send interactive components instead of just text, using a high level framework-agnostic format that can be rendered natively on any surface (web, mobile). + +
+ +
-We will be sharing more soon. Sign up here to learn when we publish more details about A2UI. +## A New Paradigm for UI Development ---- +A2UI's core philosophy enables the creation of dynamic, secure, and adaptable user interfaces driven by AI. + +
+ +- :material-shield-lock: **Secure & Performant Transport** + + --- + + Built on the [Agent2Agent (A2A) protocol](https://a2a-protocol.org), A2UI inherits a secure transport layer, while mitigating risks like UI injection through a clean separation of structure and data. + +- :material-code-json: **LLM-Friendly Format** + + --- + + A2UI uses a streamable JSON Lines (JSONL) format designed for generative models. Transported over the A2A protocol, it enables progressive rendering and real-time UI updates. + +- :material-devices: **Truly Framework-Agnostic** + + --- + + Built for maximum portability. Render components on any platform, with initial clients for JavaScript Web Components, Flutter, and more to come. -
-
diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css index 955c14b57..1dde39b59 100644 --- a/docs/stylesheets/custom.css +++ b/docs/stylesheets/custom.css @@ -14,80 +14,28 @@ * limitations under the License. */ -/* Index page styling */ +/* --- Global Site Preferences --- */ +/* Makes the content area wider than standard MkDocs Material */ .md-grid { max-width: 80%; } -.footer { - padding-bottom: 30vh; -} - -.centered-logo-text-group { - display: inline-flex; - align-items: center; - gap: 1.5em; - margin-bottom: 0.5em; - vertical-align: middle; -} - -.centered-logo-text-group img { - height: auto; -} - -.centered-logo-text-group h1 { - margin: 0; - text-align: left; -} - -.install-command-container { - max-width: 600px; - margin: 2.5em auto; - padding: 1.5em 2em; - background-color: var(--md-code-bg-color, #f5f5f5); - border-radius: 8px; - text-align: center; - box-shadow: 0 3px 6px rgb(0 0 0 / 5%); - border-left: 5px solid var(--md-primary-fg-color, #526cfe); - margin-top: 30px; -} - -.install-command-container p { - font-size: 1.1em; - color: var(--md-default-fg-color); - margin-bottom: -10px; - margin-top: -10px; -} - -.install-command-container p code { - font-size: 1.1em; - font-weight: 600; - padding: 0.3em 0.6em; - background-color: var(--md-code-fg-color--light); - border-radius: 4px; - display: inline-block; - line-height: 1.4; -} - +/* Optional: Tweak for announcement bar buttons if you use them */ .announce .md-button { font-size: 0.8em; padding: 0.3em 1em; margin-left: 0.5em; } -h1#agent2agent-a2a-protocol { - display: none; -} +/* --- Dark/Light Mode Utilities --- */ -figure.hero { - margin-top: 0; - margin-bottom: 10px; +/* Hide elements meant for dark mode when in light (default) mode */ +[data-md-color-scheme="default"] .dark-mode-only { + display: none !important; } -figure.hero figcaption { - max-width: 100%; - width: 100%; - margin-bottom: 0; - text-align: left; +/* Hide elements meant for light mode when in dark (slate) mode */ +[data-md-color-scheme="slate"] .light-mode-only { + display: none !important; } diff --git a/mkdocs.yaml b/mkdocs.yaml index c9fa6c25d..e1de7e52e 100644 --- a/mkdocs.yaml +++ b/mkdocs.yaml @@ -12,9 +12,9 @@ # See the License for the specific language governing permissions and # limitations under the License. -site_name: A2UI Protocol +site_name: A2UI site_url: https://google.github.io/A2UI/ -site_description: Official Sign-up for the A2UI (Generative UI Language Format) protocol, a JSONL-based, streaming UI protocol designed to be easily generated by Large Language Models (LLMs). +site_description: Official Sign-up for A2UI, a JSONL-based, streaming UI protocol designed to be easily generated by Large Language Models (LLMs). site_author: Google site_dir: site # edit_uri: edit/main/docs/ @@ -67,16 +67,16 @@ theme: - scheme: default primary: teal accent: light blue - # toggle: - # icon: material/brightness-7 - # name: Switch to dark mode + toggle: + icon: material/brightness-7 + name: Switch to dark mode - # - scheme: slate - # primary: teal - # accent: light blue - # toggle: - # icon: material/brightness-4 - # name: Switch to light mode + - scheme: slate + primary: teal + accent: light blue + toggle: + icon: material/brightness-4 + name: Switch to light mode features: - announce.dismiss From 68bbf36c78ac43b70a17e21528df5e3074ad092d Mon Sep 17 00:00:00 2001 From: Holt Skinner <13262395+holtskinner@users.noreply.github.com> Date: Wed, 5 Nov 2025 10:22:17 -0600 Subject: [PATCH 2/2] docs: Update Page with new Legal text --- docs/index.md | 6 +++--- mkdocs.yaml | 9 ++++++++- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/index.md b/docs/index.md index 433070fd1..350793783 100644 --- a/docs/index.md +++ b/docs/index.md @@ -13,10 +13,10 @@ hide: A2UI Logo -# The Future of UI is Agent-Generated +# The Future of UI is LLM-Generated

-An open-source UI toolkit built on the A2A protocol. A2UI enables UI widgets to be passed from remote agents to any application in a simple, declarative, and framework-agnostic way. +A new open source UI Toolkit to facilitate LLM-generated UIs. A2UI is built with A2A protocol and allows an A2A agent to send interactive components instead of just text, using a high level framework-agnostic format that can be rendered natively on any surface (starting with examples for web and mobile).

[Join the Waitlist](https://goo.gle/a2ui-form){ .md-button .md-button--primary style="padding: 0.6rem 2rem; font-size: 1.1rem;" } @@ -30,7 +30,7 @@ An open-source UI toolkit built on the A2A pr ## A New Paradigm for UI Development -A2UI's core philosophy enables the creation of dynamic, secure, and adaptable user interfaces driven by AI. +A2UI's core philosophy enables the creation of dynamic, and adaptable user interfaces driven by AI.
diff --git a/mkdocs.yaml b/mkdocs.yaml index e1de7e52e..20aeef36b 100644 --- a/mkdocs.yaml +++ b/mkdocs.yaml @@ -23,6 +23,13 @@ extra: analytics: provider: google property: G-YX9TPV8DCC + consent: + title: Cookie consent + description: >- + We use cookies to recognize repeated visits and preferences, + as well as to measure the effectiveness of our documentation and + whether users find the information they need. With your consent, + you're helping us to make our documentation better. # Navigation nav: @@ -33,7 +40,7 @@ nav: # repo_url: https://github.com/google/A2UI # Copyright -copyright: Copyright 2025 Google. Licensed under the Apache License, Version 2.0. +copyright: Copyright Google 2025  |  Terms  |  Privacy  |  Manage cookies # Custom CSS extra_css: