docs: clean up and resolve formatting/merge conflicts in MCP guides

Clean up and format MCP guides, resolve merge conflicts, and update the Vite configuration tip to use standard Markdown alert blocks.

Author: sugoi-yuzuru

docs/guides/a2ui-in-mcp-apps.md

@@ -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]
+> **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.
 
 ### Step 2: Leveraging A2UI-over-MCP
 

docs/guides/mcp-apps-in-a2ui.md

@@ -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
@@ -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.
 
 **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.
 
@@ -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