Skip to content

fix: Fix the failing format of md files. #1400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
josemontespg merged 2 commits into from
May 11, 2026
+37 −62
Merged

fix: Fix the failing format of md files. #1400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
815c5c0
docs: clean up and resolve formatting/merge conflicts in MCP guides
sugoi-yuzuru May 11, 2026
19d2c5f
docs: update renderers ecosystem list and add license note to React c…
sugoi-yuzuru May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/ecosystem/renderers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ Community and third-party A2UI renderer implementations.

## Community Renderers

| Renderer | Platform | v0.8 | v0.9 | Activity | Links |
| ------------------------------------------- | --------------------------------------------------- | ---- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Renderer | Platform | v0.8 | v0.9 | Activity | Links |
| ------------------------------------------- | --------------------------------------------------- | ---- | ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **easyops-cn/a2ui-sdk** (`@a2ui-sdk/react`) | React (Web) | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/easyops-cn/a2ui-sdk?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/easyops-cn/a2ui-sdk?style=flat-square&label=updated) | [GitHub](https://github.com/easyops-cn/a2ui-sdk) · [npm](https://www.npmjs.com/package/@a2ui-sdk/react) · [Docs](https://a2ui-sdk.js.org/) |
| **lmee/A2UI-Android** | Android (Compose) | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/lmee/A2UI-Android?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/lmee/A2UI-Android?style=flat-square&label=updated) | [GitHub](https://github.com/lmee/A2UI-Android) |
| **sivamrudram-eng/a2ui-react-native** | React Native | ✅ | ❌ | ![Stars](https://img.shields.io/github/stars/sivamrudram-eng/a2ui-react-native?style=flat-square&label=⭐) ![Last commit](https://img.shields.io/github/last-commit/sivamrudram-eng/a2ui-react-native?style=flat-square&label=updated) | [GitHub](https://github.com/sivamrudram-eng/a2ui-react-native) |
Expand Down
41 changes: 23 additions & 18 deletions docs/guides/a2ui-in-mcp-apps.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,24 +104,29 @@ MCP Apps are typically delivered as a single HTML resource from the MCP Server.
2. Use a post-build script (like the [`inline.js`](https://github.com/google/A2UI/blob/main/samples/mcp/a2ui-in-mcpapps/server/apps/src/inline.js) script in the sample) to read the `index.html` and replace external `<script src="...">` and `<link rel="stylesheet" href="...">` tags with inline `<script>` and `<style>` tags containing the actual file contents.
3. This produces a self-contained HTML file that can be safely loaded via `srcdoc` in the restricted iframe.

!!! tip "Using Vite to inline "
If your project uses Vite (common for React, Vue, or Lit), you can achieve the same single-file output automatically using plugins like `vite-plugin-singlefile`. This eliminates the need for a custom post-build script by handling the inlining during the build process itself.

**How to use it:**
1. **Install the plugin**:
```bash
npm install -D vite-plugin-singlefile
```
2. **Configure Vite**: Add the plugin to your `vite.config.ts` (or `.js`):
```typescript
import { defineConfig } from 'vite'
import { viteSingleFile } from 'vite-plugin-singlefile'

export default defineConfig({
plugins: [viteSingleFile()],
})
```
This will ensure that all JS and CSS assets are inlined into the `index.html` file on build, making it ready to be served by your MCP server as a single resource.
> [!TIP]
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The change from !!! tip to > [!TIP] replaces MkDocs admonition syntax with GitHub-specific alert syntax. If the project's documentation site is built using MkDocs, this will break the visual rendering of the tip box. Ensure this change is intentional and compatible with the documentation toolchain.

Copy link
Copy Markdown
Collaborator

@ditman ditman May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to work? https://a2ui.org/guides/a2ui-in-mcp-apps/#step-1-inlining-the-renderer

> **Using Vite to inline**
>
> If your project uses Vite (common for React, Vue, or Lit), you can achieve the same single-file output automatically using plugins like `vite-plugin-singlefile`. This eliminates the need for a custom post-build script by handling the inlining during the build process itself.
>
> **How to use it:**
>
> 1. **Install the plugin**:
> ```bash
> npm install -D vite-plugin-singlefile
> ```
> 2. **Configure Vite**: Add the plugin to your `vite.config.ts` (or `.js`):
>
> ```typescript
> import {defineConfig} from 'vite';
> import {viteSingleFile} from 'vite-plugin-singlefile';
>
> export default defineConfig({
> plugins: [viteSingleFile()],
> });
> ```
>
> This will ensure that all JS and CSS assets are inlined into the `index.html` file on build, making it ready to be served by your MCP server as a single resource.
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

This paragraph should be aligned as a separate paragraph within the tip block rather than being indented as part of the second list item. Additionally, index.html (here) and vite-plugin-singlefile (on line 110) should be wrapped in backticks to match the project's documentation style.

Suggested change
> This will ensure that all JS and CSS assets are inlined into the `index.html` file on build, making it ready to be served by your MCP server as a single resource.
> This will ensure that all JS and CSS assets are inlined into the index.html file on build, making it ready to be served by your MCP server as a single resource.


### Step 2: Leveraging A2UI-over-MCP

Expand Down
53 changes: 11 additions & 42 deletions docs/guides/mcp-apps-in-a2ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,42 +138,24 @@ There are two primary samples demonstrating MCP Apps integration. Each sample re

---

### 1. MCP App Standalone Sample (Lit & ADK Agent)
### Sample 1: MCP App Standalone Sample (Lit Client & ADK Agent)

This sample verifies the sandbox with a Lit-based client and an ADK-based A2A agent.

- **A2A Agent Server**:
- Path: [`samples/agent/adk/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/agent/adk/mcp-apps-in-a2ui-sample/)
- Command: `uv run .` (requires `GEMINI_API_KEY` in `.env`)
- **Lit Client App**:
- Path: [`samples/client/lit/mcp-apps-in-a2ui-sample/`](https://github.com/google/A2UI/tree/main/samples/client/lit/mcp-apps-in-a2ui-sample/)
- Command: `npm install && npm run dev` (requires building the Lit renderer first)
- URL: `http://localhost:5173/`
#### Step 1: Start the Agent

**What to expect**: A simple interface loading the MCP App, with a button to trigger an action handled by the agent.

### 2. MCP Apps (Calculator + Pong) (Angular)

#### Step 3: Open in Browser

Open your browser and navigate to `http://localhost:5173`. You should see the A2UI interface loading the MCP App.

**What to expect**: A page loading the MCP App in a sandboxed iframe. Clicking the "Call Agent Tool" button inside the iframe will trigger an action that is handled by the agent.

---

### Sample 2: MCP Apps (Calculator + Pong) (Angular Client + MCP Server + Proxy Agent)

This sample verifies the sandbox with an Angular-based client, an MCP Proxy Agent, and a remote MCP Server. It requires **three** backend processes.

#### Step 1: Start the MCP Server (Calculator)
In a separate terminal, navigate to the agent directory and start the agent:

```bash
cd samples/mcp/mcp-apps-calculator/
uv run .
cd samples/agent/adk/mcp-apps-in-a2ui-sample
uv run agent.py
```

=======
The agent will run on `http://localhost:8000`.

#### Step 2: Start the Client

In a new terminal, navigate to the client directory and start the dev server (requires building the Lit renderer first):

```bash
cd samples/client/lit/mcp-apps-in-a2ui-sample
Expand All @@ -183,20 +165,9 @@ npm run dev

The client starts at `http://localhost:5173/`.

#### Step 2: Start the Agent

In a separate terminal, navigate to the agent directory and start the agent:

```bash
cd samples/agent/adk/mcp-apps-in-a2ui-sample
uv run agent.py
```

The agent will run on `http://localhost:8000`.

#### Step 3: Open in Browser

Open your browser and navigate to `http://localhost:5173`. You should see the A2UI interface loading the MCP App.
Open your browser and navigate to `http://localhost:5173/`. You should see the A2UI interface loading the MCP App.
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The URL should be wrapped in backticks for better readability and consistency with the rest of the guide. This also applies to the URL on line 154.


**What to expect**: A page loading the MCP App in a sandboxed iframe. Clicking the "Call Agent Tool" button inside the iframe will trigger an action that is handled by the agent.

Expand All @@ -213,8 +184,6 @@ cd samples/mcp/mcp-apps-calculator/
uv run .
```

> > > > > > > e3c17f1f (docs: add npm install step to MCP guide)

The MCP server starts on `http://localhost:8000` using SSE transport.

#### Step 2: Start the MCP Apps Proxy Agent
Expand Down
1 change: 1 addition & 0 deletions renderers/react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
## Unreleased

- Added license.
- (v0_8) Exclude SVG elements and descendants from CSS reset to restore SVG rendering. [#1252](https://github.com/google/A2UI/pull/1252)
- **BREAKING CHANGE**: Renamed `createReactComponent` to `createComponentImplementation`.
Expand Down
Loading