fix(docs): add missing mcp apps and custom elements manifest docs#105
Merged
Conversation
📝 WalkthroughWalkthroughAdds three Lit-based chat pattern examples (PageChat, PanelChat, PopoverChat), new Chat and Custom Elements Manifest docs, MCP documentation updates for interactive MCP Apps and tools, and sidebar/index navigation entries for the new pages. ChangesChat Patterns, Docs, and Site Navigation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/internals/patterns/src/chat.examples.ts`:
- Line 55: The demo composer currently uses a submitting button element
(<nve-button> with type="submit") which can trigger form submissions; update the
<nve-button> in the chat example to use type="button" instead so it does not
submit/reload the docs preview—locate the <nve-button> in chat.examples.ts (the
Send button) and change its type attribute from "submit" to "button".
In `@projects/site/src/_11ty/layouts/common.js`:
- Line 139: The selected-state check on the nve-tree-node is comparing
data.page.url against '/docs/integrations/custom-elements/' but the anchor href
points to 'docs/integrations/custom-elements-manifest/'; update the condition in
the highlighted/selected expression to use
'/docs/integrations/custom-elements-manifest/' (or alternatively change the
anchor href to match the original '/docs/integrations/custom-elements/') so the
URL checked by data.page.url.includes(...) matches the link target (adjust the
expression near nve-tree-node and the anchor href accordingly).
In `@projects/site/src/docs/integrations/custom-elements.md`:
- Line 76: Replace the redundant phrase "HTML language services" in the sentence
that explains converting CEM data into data.html.json so VS Code-compatible HTML
language services can offer completions and hover docs for `nve-*` tags and
attributes; change it to a concise term like "HTML services" (or "HTML tooling")
so the sentence reads that Elements converts CEM data into `data.html.json` so
VS Code-compatible HTML services can offer completions and hover docs for
`nve-*` tags and attributes, and ensure the updated wording passes Vale lint
rules for `**/*.{md,ts,tsx}`.
In `@projects/site/src/docs/mcp/index.md`:
- Line 11: The H2 heading is a long run-on sentence; split it into two sentences
and add terminal punctuation by updating the <h2> element text: end the first
sentence after "Elements design system." and start a new sentence with "It gives
tools like Claude Code, Cursor, and Codex direct access to component APIs,
design tokens, template validation, project scaffolding, and interactive MCP
Apps views so your AI assistant can build with Elements effectively." Ensure the
updated heading ends each sentence with a period and remains wrapped in the same
<h2> element.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 215ff226-561b-4743-acd5-0d23629aa7ce
📒 Files selected for processing (6)
projects/internals/patterns/src/chat.examples.tsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/integrations/custom-elements.mdprojects/site/src/docs/mcp/index.mdprojects/site/src/docs/patterns/chat.mdprojects/site/src/docs/patterns/index.md
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
projects/site/src/docs/mcp/index.md (1)
11-11:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winHeading still needs sentence split and terminal punctuation.
This remains hard to scan and still appears to violate the doc style linting expectation for clear sentence boundaries.
As per coding guidelines, "
**/*.{md,ts,tsx}: Documentation files (*.md) and JSDoc comments in TypeScript must follow Vale linting rules (Google style guide, write-good rules, and custom Element rules)".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/site/src/docs/mcp/index.md` at line 11, The heading in the <h2 nve-text="heading sm muted"> element is a single run-on sentence and lacks terminal punctuation; split it into two or three short, clear sentences with periods and make each sentence scannable (for example: describe what the Elements MCP server does, then list key capabilities like component API access, template validation, scaffolding, and MCP Apps integration). Update the text inside the <h2 nve-text="heading sm muted"> tag accordingly so it conforms to Vale/Google style (clear sentence boundaries, terminal punctuation) and keeps the same meaning.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/internals/patterns/src/chat.examples.ts`:
- Around line 5-12: The chat examples import block is missing the avatar
registration so <nve-avatar> remains un-upgraded; update the top import list in
projects/internals/patterns/src/chat.examples.ts (the block that currently
imports `@nvidia-elements/core/button/define.js`, chat-message/define.js,
dialog/define.js, icon-button/define.js, logo/define.js, page/define.js,
page-header/define.js, textarea/define.js) to also import
`@nvidia-elements/core/avatar/define.js` so the avatars rendered at the example
usages (around the <nve-avatar> occurrences) are properly registered and
upgraded.
---
Duplicate comments:
In `@projects/site/src/docs/mcp/index.md`:
- Line 11: The heading in the <h2 nve-text="heading sm muted"> element is a
single run-on sentence and lacks terminal punctuation; split it into two or
three short, clear sentences with periods and make each sentence scannable (for
example: describe what the Elements MCP server does, then list key capabilities
like component API access, template validation, scaffolding, and MCP Apps
integration). Update the text inside the <h2 nve-text="heading sm muted"> tag
accordingly so it conforms to Vale/Google style (clear sentence boundaries,
terminal punctuation) and keeps the same meaning.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 6e7a2799-5984-41b9-88a8-6f5b9429c0f3
📒 Files selected for processing (6)
projects/internals/patterns/src/chat.examples.tsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/integrations/custom-elements.mdprojects/site/src/docs/mcp/index.mdprojects/site/src/docs/patterns/chat.mdprojects/site/src/docs/patterns/index.md
Comment on lines
+5
to
+12
| import '@nvidia-elements/core/button/define.js'; | ||
| import '@nvidia-elements/core/chat-message/define.js'; | ||
| import '@nvidia-elements/core/dialog/define.js'; | ||
| import '@nvidia-elements/core/icon-button/define.js'; | ||
| import '@nvidia-elements/core/logo/define.js'; | ||
| import '@nvidia-elements/core/page/define.js'; | ||
| import '@nvidia-elements/core/page-header/define.js'; | ||
| import '@nvidia-elements/core/textarea/define.js'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify whether nve-avatar is used without explicit definition import in this file,
# and inspect whether chat-message define appears to register avatar transitively.
rg -n "nve-avatar|`@nvidia-elements/core/avatar/define.js`|`@nvidia-elements/core/chat-message/define.js`" projects/internals/patterns/src/chat.examples.ts
# If core source is present in-repo, inspect related define modules.
fd -i "define.js" | rg -n "avatar|chat-message" || trueRepository: NVIDIA/elements
Length of output: 332
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Confirm whether the current file imports avatar define directly
echo "== Direct avatar import in chat.examples.ts =="
rg -n "`@nvidia-elements/core/avatar/define.js`" projects/internals/patterns/src/chat.examples.ts || true
# 2) Locate the chat-message define.js source file(s) in the repo
echo "== Locating chat-message/define.js sources =="
fd -i "chat-message/define\.js$" . | head -n 20
# 3) For each located file, check whether it imports or mentions avatar registration/define
echo "== Searching for avatar usage inside chat-message/define.js =="
fd -i "chat-message/define\.js$" . -x rg -n "avatar|core/avatar/define\.js|nve-avatar" || true
# 4) Also locate avatar/define.js sources and see what they register (quick grep only)
echo "== Locating avatar/define.js sources =="
fd -i "avatar/define\.js$" . | head -n 20
fd -i "avatar/define\.js$" . -x rg -n "customElements\.define|define\\(" || trueRepository: NVIDIA/elements
Length of output: 255
🏁 Script executed:
#!/bin/bash
set -euo pipefail
FILE="projects/internals/patterns/src/chat.examples.ts"
echo "== File head (imports) =="
sed -n '1,120p' "$FILE" | cat -n
echo "== PopoverChat section (search for inline script) =="
# print a broader window where PopoverChat likely lives; adjust if needed
sed -n '120,240p' "$FILE" | cat -n
echo "== Direct search for inline <script type=\"module\"> =="
rg -n "<script[^>]*type=\"module\"" "$FILE" || trueRepository: NVIDIA/elements
Length of output: 8846
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "<script type=\"module\">" -S projects/internals/patterns/src || true
rg -n "<script type=\"module\">" -S projects || true | head -n 50
rg -n "whenDefined\\('nve-dialog'\\)|showPopover\\(\\{ source:" -S projects/internals/patterns/src || trueRepository: NVIDIA/elements
Length of output: 27642
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Files importing avatar define.js =="
rg -n "`@nvidia-elements/core/avatar/define`\.js" . | head -n 50
echo "== Files using nve-avatar in patterns/examples =="
rg -n "nve-avatar" projects/internals/patterns/src | head -n 50
echo "== Chat-message define.js imports in patterns =="
rg -n "`@nvidia-elements/core/chat-message/define`\.js" projects/internals/patterns/src
# For each file using nve-avatar under internals/patterns, see if it also imports avatar define.js
echo "== Cross-check for nve-avatar usage vs avatar define import (internals/patterns) =="
for f in $(rg -l "nve-avatar" projects/internals/patterns/src); do
echo "--- $f"
rg -n "`@nvidia-elements/core/avatar/define`\.js" "$f" || echo "(no avatar define import)"
doneRepository: NVIDIA/elements
Length of output: 6272
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Show the chat-message examples import block (for avatar usage)
FILE="projects/core/src/chat-message/chat-message.examples.ts"
echo "== chat-message.examples.ts import block =="
sed -n '1,120p' "$FILE" | cat -n
# Locate actual define.js files under core/src/chat-message and core/src/avatar
echo "== define.js under projects/core/src/chat-message =="
fd -i "define\.js$" projects/core/src/chat-message -a || true
echo "== define.js under projects/core/src/avatar =="
fd -i "define\.js$" projects/core/src/avatar -a || true
# If define.js exists, search for avatar/define.js import usage inside chat-message define implementation
echo "== Search for avatar define import inside chat-message define.js (if present) =="
fd -i "define\.js$" projects/core/src/chat-message -a | xargs -r rg -n "`@nvidia-elements/core/avatar/define`\.js|avatar" || trueRepository: NVIDIA/elements
Length of output: 6115
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# 1) Find occurrences where chat-message define is imported, nve-avatar is used,
# but avatar define is NOT imported (in same file).
echo "== Patterns/examples: chat-message define + nve-avatar usage without avatar define =="
rg -n "`@nvidia-elements/core/chat-message/define`\.js" projects | cut -d: -f1 | sort -u | while read -r f; do
if rg -q "nve-avatar" "$f"; then
if ! rg -q "`@nvidia-elements/core/avatar/define`\.js" "$f"; then
echo "$f"
fi
fi
done
# 2) Inspect Vite inline <script type="module"> guidance
echo "== Inspect internals/vite/README.md around inline module script note =="
sed -n '150,230p' projects/internals/vite/README.md | cat -n
echo "== Search for 'does not emit JS from inline <script type=\"module\">' =="
rg -n "does not emit JS from inline `<script type=\"module\">`|inline `<script type=\"module\">`" projects/internals/vite -S || true
echo "== Inspect playwright runner comment area (if present) =="
sed -n '70,140p' projects/internals/vite/src/runners/playwright.js | cat -nRepository: NVIDIA/elements
Length of output: 3448
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Locate chat-message/define.js in repo =="
fd -i "chat-message/define\.js$" . | head -n 50
fd -i "chat-message.*define\.js$" projects/core | head -n 50 || true
rg -n "`@nvidia-elements/core/chat-message/define`\.js" projects/core -S | head -n 50 || true
echo "== Locate avatar/define.js in repo =="
fd -i "avatar/define\.js$" . | head -n 50
fd -i "avatar.*define\.js$" projects/core | head -n 50 || true
rg -n "`@nvidia-elements/core/avatar/define`\.js" projects/core -S | head -n 50 || true
echo "== Inspect vite Playwright runner inline <script type=module> note =="
FILE="projects/internals/vite/src/runners/playwright.js"
if [ -f "$FILE" ]; then
sed -n '70,140p' "$FILE" | cat -n
else
echo "Missing $FILE"
fi
echo "== Search again for the inline-script note safely =="
rg -n "Vite 8/Rolldown does not emit JS from inline" projects/internals/vite -S || trueRepository: NVIDIA/elements
Length of output: 6017
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Files that import chat-message/define.js
# and also reference nve-avatar.
rg -l "`@nvidia-elements/core/chat-message/define`\.js" . | while read -r f; do
if rg -q "nve-avatar" "$f"; then
if ! rg -q "`@nvidia-elements/core/avatar/define`\.js" "$f"; then
echo "$f"
fi
fi
doneRepository: NVIDIA/elements
Length of output: 110
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n "inline <script type=\"module\">|html-proxy modules|does not emit JS from inline|whenDefined\\(|showPopover\\(" projects/internals projects/site projects/internals/patterns/src -S || true
# Specifically see if chat/popover examples are referenced in docs/tests.
rg -n "chat-popover|chat-launcher" projects/internals/patterns/src -S || trueRepository: NVIDIA/elements
Length of output: 2040
Add @nvidia-elements/core/avatar/define.js to the chat example import block
projects/internals/patterns/src/chat.examples.ts renders <nve-avatar> (lines 38, 42, 46) but the registration imports do not include @nvidia-elements/core/avatar/define.js, which can leave avatars un-upgraded in isolated pattern rendering. Other chat-message examples import both @nvidia-elements/core/chat-message/define.js and @nvidia-elements/core/avatar/define.js (e.g., projects/core/src/chat-message/chat-message.examples.ts), so this file should match.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@projects/internals/patterns/src/chat.examples.ts` around lines 5 - 12, The
chat examples import block is missing the avatar registration so <nve-avatar>
remains un-upgraded; update the top import list in
projects/internals/patterns/src/chat.examples.ts (the block that currently
imports `@nvidia-elements/core/button/define.js`, chat-message/define.js,
dialog/define.js, icon-button/define.js, logo/define.js, page/define.js,
page-header/define.js, textarea/define.js) to also import
`@nvidia-elements/core/avatar/define.js` so the avatars rendered at the example
usages (around the <nve-avatar> occurrences) are properly registered and
upgraded.
johnyanarella
approved these changes
May 27, 2026
Signed-off-by: Cory Rylan <crylan@nvidia.com>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
projects/site/src/docs/mcp/index.md (1)
11-11:⚠️ Potential issue | 🟡 MinorSplit the run-on heading and add terminal punctuation.
This heading is still a long run-on sentence without proper punctuation. As noted in a previous review, break it into clearer sentences with terminal punctuation to improve readability and comply with Vale/write-good style rules.
As per coding guidelines, "
**/*.{md,ts,tsx}: Documentation files (*.md) and JSDoc comments in TypeScript must follow Vale linting rules (Google style guide, write-good rules, and custom Element rules)".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@projects/site/src/docs/mcp/index.md` at line 11, The H2 heading string in the Markdown ("The Elements MCP server connects AI coding assistants to the Elements design system...") is a run-on sentence; split it into two or more clear sentences and add terminal punctuation (periods) to improve readability and satisfy Vale/write-good rules — for example, end the first sentence after "design system." and start a new sentence like "It gives tools such as Claude Code, Cursor, and Codex direct access to component APIs, design tokens, template validation, project scaffolding, and interactive MCP Apps views so your AI assistant can build with Elements effectively." Update the <h2> element text accordingly to reflect the split and proper punctuation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@projects/site/src/docs/mcp/index.md`:
- Line 291: The paragraph is too dense—split the single sentence into 2–3
clearer sentences: first describe that each app resource is a self-contained
HTML document and list the included components (Elements components, theme CSS,
typography CSS, layout CSS, and the MCP Apps client); then describe the MCP Apps
client responsibilities (initializing the app, reporting size changes, receiving
tool input and result notifications, and calling server tools via the MCP Apps
message channel); finally add a short sentence about security: state that
message handling validates the parent origin before parsing inbound JSON-RPC
payloads. Use the phrases "MCP Apps client" and "message handling validates the
parent origin" so reviewers can locate and verify the change.
---
Duplicate comments:
In `@projects/site/src/docs/mcp/index.md`:
- Line 11: The H2 heading string in the Markdown ("The Elements MCP server
connects AI coding assistants to the Elements design system...") is a run-on
sentence; split it into two or more clear sentences and add terminal punctuation
(periods) to improve readability and satisfy Vale/write-good rules — for
example, end the first sentence after "design system." and start a new sentence
like "It gives tools such as Claude Code, Cursor, and Codex direct access to
component APIs, design tokens, template validation, project scaffolding, and
interactive MCP Apps views so your AI assistant can build with Elements
effectively." Update the <h2> element text accordingly to reflect the split and
proper punctuation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Enterprise
Run ID: 9e088ac2-1489-473a-90e3-65b75023ee93
📒 Files selected for processing (6)
projects/internals/patterns/src/chat.examples.tsprojects/site/src/_11ty/layouts/common.jsprojects/site/src/docs/integrations/custom-elements.mdprojects/site/src/docs/mcp/index.mdprojects/site/src/docs/patterns/chat.mdprojects/site/src/docs/patterns/index.md
| </nve-grid-row> | ||
| </nve-grid> | ||
|
|
||
| Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, receives tool input and result notifications, and calls server tools through the MCP Apps message channel when it needs more data. Message handling validates the parent origin before reading inbound JSON-RPC payloads. |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Split the dense technical sentence for readability.
This sentence packs architecture details, five component types, four client responsibilities, and security validation into a single statement. Breaking it into two or three sentences would improve comprehension without losing technical accuracy.
✏️ Suggested restructuring
-Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, receives tool input and result notifications, and calls server tools through the MCP Apps message channel when it needs more data. Message handling validates the parent origin before reading inbound JSON-RPC payloads.
+Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, and receives tool input and result notifications. When the app needs more data, the client calls server tools through the MCP Apps message channel; message handling validates the parent origin before reading inbound JSON-RPC payloads.As per coding guidelines, "**/*.{md,ts,tsx}: Documentation files (*.md) and JSDoc comments in TypeScript must follow Vale linting rules (Google style guide, write-good rules, and custom Element rules)".
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, receives tool input and result notifications, and calls server tools through the MCP Apps message channel when it needs more data. Message handling validates the parent origin before reading inbound JSON-RPC payloads. | |
| Each app resource is a self-contained HTML document that includes Elements components, theme CSS, typography CSS, layout CSS, and a small MCP Apps client. The client initializes the app, reports size changes, and receives tool input and result notifications. When the app needs more data, the client calls server tools through the MCP Apps message channel; message handling validates the parent origin before reading inbound JSON-RPC payloads. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@projects/site/src/docs/mcp/index.md` at line 291, The paragraph is too
dense—split the single sentence into 2–3 clearer sentences: first describe that
each app resource is a self-contained HTML document and list the included
components (Elements components, theme CSS, typography CSS, layout CSS, and the
MCP Apps client); then describe the MCP Apps client responsibilities
(initializing the app, reporting size changes, receiving tool input and result
notifications, and calling server tools via the MCP Apps message channel);
finally add a short sentence about security: state that message handling
validates the parent origin before parsing inbound JSON-RPC payloads. Use the
phrases "MCP Apps client" and "message handling validates the parent origin" so
reviewers can locate and verify the change.
Collaborator
Author
|
🎉 This issue has been resolved in version 0.2.0 🎉 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Documentation