feat(integrate): add publishable GenUI SDK integration skill npm package - #237
Conversation
Add packages/integrate/skill/genui-integration with SKILL.md, framework references, and usage examples so agents can guide SDK integration. Co-authored-by: Cursor <cursoragent@cursor.com>
Add README/MAINTENANCE guides, SKILL updates, and scripts to check docs drift and sync/update the integration skill workflow. Co-authored-by: Cursor <cursoragent@cursor.com>
Improve skill description triggers, add integration decision tree, and document React/theme/custom-component guidance in SKILL.md. Co-authored-by: Cursor <cursoragent@cursor.com>
移除 Python 维护脚本与仓库内重复的 examples,新增 package.json 与 copy-from-docs 构建流程。 Co-authored-by: Cursor <cursoragent@cursor.com>
Prevent build-time examples copied from docs from being committed. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds a publishable ChangesGenUI integration skill
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (1)
new-skills/genui-integration/MAINTENANCE.md (1)
96-110: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAlign version-tracking instructions with
SKILL.md.This section requires
version,last_synced, andsource_commitfrontmatter fields, butpackages/integrate/skill/genui-integration/SKILL.mdcurrently defines onlynameanddescription. Add those fields or document the tracking metadata as optional.🤖 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 `@new-skills/genui-integration/MAINTENANCE.md` around lines 96 - 110, Align the version-tracking section with the frontmatter in SKILL.md: either add version, last_synced, and source_commit to the genui-integration SKILL.md frontmatter, or revise the maintenance guidance to explicitly mark these fields as optional.
🤖 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 `@new-skills/genui-integration/MAINTENANCE.md`:
- Around line 33-62: Update the maintenance instructions around the
synchronization and regeneration examples to use the existing
scripts/copy-from-docs.mjs Node script, with repository-relative commands that
work from any checkout. Remove the hard-coded /Users/jyh path and references to
nonexistent sync_skill.py and regenerate_skill.py scripts, while preserving
guidance for updating the skill and validating the result.
In `@packages/integrate/skill/genui-integration/package.json`:
- Around line 31-35: Update the package publish configuration so the build
script referenced by the prepack/build commands is available when packaging: add
the scripts directory to the files list in package.json, or remove/relocate the
published build entry so it is only used from a source checkout.
- Around line 16-19: Update the package.json scripts so prepack invokes the
build script through a package-manager-independent command, and add the scripts
directory to the files whitelist so scripts/copy-from-docs.mjs is included in
the published package.
In `@packages/integrate/skill/genui-integration/references/angular.md`:
- Around line 382-386: Update the openPage action’s execute handler to validate
params.url against an explicit allowed-origin or URL allowlist before calling
window.open, rejecting disallowed or malformed destinations. Preserve safe
same-origin navigation, and ensure cross-origin or _blank opens use noopener and
noreferrer window features.
In `@packages/integrate/skill/genui-integration/references/server.md`:
- Around line 387-395: Update the server example’s package setup to explicitly
install or declare the express-rate-limit dependency used by the limiter
snippet, ensuring the documented npm installation flow supports the import
without relying on an undeclared preinstalled package.
- Around line 106-108: Remove the no-option app.use(cors()) snippet from the
Express setup example. Keep CORS configured only through explicit allowed
production origins, consistent with the existing allowed-origins guidance and
the repeated middleware later in the document.
- Around line 346-355: Update the server-side proxy fetch request in the API-key
handling example to include a headers object setting Content-Type to
application/json, while preserving the existing JSON.stringify body and request
behavior.
In `@packages/integrate/skill/genui-integration/references/vue.md`:
- Around line 398-426: Update chatStream to route fetch and stream-reader
failures through handler.onError instead of onDone, preserving onDone() only for
successful completion. Wrap the response body read loop in try/catch/finally so
reader errors are reported and the reader lock is always released; use the
existing onData flow unchanged for successful chunks.
In `@packages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs`:
- Around line 10-11: Update the copy flow around rm and cp to validate that
docsExamples exists and is accessible before deleting target. Ensure generated
examples remain intact when the source is unavailable, or stage the copy in a
temporary location and replace target only after cp succeeds.
In `@packages/integrate/skill/genui-integration/SKILL.md`:
- Around line 76-90: Update the GenuiConfigProvider description in the component
overview to require it only for current GenuiChat and GenuiRenderer
integrations, and explicitly note that legacy Vue and Angular compatibility
renderers with built-in materials are exempt.
---
Nitpick comments:
In `@new-skills/genui-integration/MAINTENANCE.md`:
- Around line 96-110: Align the version-tracking section with the frontmatter in
SKILL.md: either add version, last_synced, and source_commit to the
genui-integration SKILL.md frontmatter, or revise the maintenance guidance to
explicitly mark these fields as optional.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 56507759-77a4-4787-970b-0fe87aa3885e
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.gitignorenew-skills/genui-integration/MAINTENANCE.mdpackages/integrate/skill/genui-integration/README.mdpackages/integrate/skill/genui-integration/SKILL.mdpackages/integrate/skill/genui-integration/package.jsonpackages/integrate/skill/genui-integration/references/angular.mdpackages/integrate/skill/genui-integration/references/server.mdpackages/integrate/skill/genui-integration/references/vue.mdpackages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs
补充 SKILL.md 可选物料说明,同步 docs 物料专页到 references/materials/,并在 build 脚本中自动复制。 Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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
`@packages/integrate/skill/genui-integration/references/materials/vue-opentiny-vue.md`:
- Line 5: Fix the broken material-reference links by replacing the unresolved
relative paths with valid local, package/API, or public documentation URLs:
update the IMaterials and IMaterialsMeta links at
packages/integrate/skill/genui-integration/references/materials/vue-opentiny-vue.md:5
and :18, the GenPrompt link at :34, the corresponding IMaterials/IMaterialsMeta
links at
packages/integrate/skill/genui-integration/references/materials/vue-element-plus.md:5
and :18, its GenPrompt link at :35, and the applicable IMaterials/IMaterialsMeta
links at
packages/integrate/skill/genui-integration/references/materials/angular-opentiny-ng.md:5
and :33.
In `@packages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs`:
- Around line 19-24: Update the synchronization flow around materialsTarget and
materialFiles to stage the complete docsMaterials source set and replace
generated materialsTarget, removing stale files from prior synchronizations.
Preserve any hand-authored files when the target directory is not fully
generated, rather than deleting them indiscriminately.
In `@packages/integrate/skill/genui-integration/SKILL.md`:
- Line 3: Update the skill metadata description to explicitly include Node.js
server-only integration and OpenAI-compatible LLM proxy use cases, while
preserving the existing Vue/Angular, dynamic UI, and genui-sdk coverage. Modify
only the description field.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 01427f01-74bb-4903-8351-51bf2408566e
📒 Files selected for processing (7)
packages/integrate/skill/genui-integration/README.mdpackages/integrate/skill/genui-integration/SKILL.mdpackages/integrate/skill/genui-integration/references/materials/angular-opentiny-ng.mdpackages/integrate/skill/genui-integration/references/materials/index.mdpackages/integrate/skill/genui-integration/references/materials/vue-element-plus.mdpackages/integrate/skill/genui-integration/references/materials/vue-opentiny-vue.mdpackages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/integrate/skill/genui-integration/README.md
删除已迁移到 packages/integrate/skill 的旧维护文档,避免与 npm 包构建流程重复。 Co-authored-by: Cursor <cursoragent@cursor.com>
prepack 改用 npm run build,避免 npm pack/publish 依赖 pnpm;files 白名单加入 scripts 目录。 Co-authored-by: Cursor <cursoragent@cursor.com>
为 openPage 自定义动作补充 URL 白名单与 origin 校验示例,并在 SKILL/server 参考中说明前后端安全职责。 Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/integrate/skill/genui-integration/references/server.md (1)
312-340: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winMake the complete request example self-contained.
The snippet references
customComponents,customExamples,customSnippets, andcustomActions, but does not declare them in the same code block. Copying this example alone causesReferenceError. Inline the definitions or state clearly that the earlier declarations are required.🤖 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 `@packages/integrate/skill/genui-integration/references/server.md` around lines 312 - 340, Make the complete request example self-contained by defining customComponents, customExamples, customSnippets, and customActions within the same code block before they are used in the metadata.tinygenui payload. Ensure the example can be copied and executed without ReferenceError.
🤖 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.
Outside diff comments:
In `@packages/integrate/skill/genui-integration/references/server.md`:
- Around line 312-340: Make the complete request example self-contained by
defining customComponents, customExamples, customSnippets, and customActions
within the same code block before they are used in the metadata.tinygenui
payload. Ensure the example can be copied and executed without ReferenceError.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 14ed140a-7bed-45cc-8d9b-63a008a8ba19
📒 Files selected for processing (3)
packages/integrate/skill/genui-integration/SKILL.mdpackages/integrate/skill/genui-integration/references/angular.mdpackages/integrate/skill/genui-integration/references/server.md
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/integrate/skill/genui-integration/SKILL.md
使用显式 ALLOWED_ORIGINS 白名单替代无选项 cors(),开发环境自动放行 localhost 任意端口,生产环境要求配置正式域名。 Co-authored-by: Cursor <cursoragent@cursor.com>
补充 /chat/completions fetch 示例的 application/json 请求头,确保 Express JSON 中间件能解析请求体。 Co-authored-by: Cursor <cursoragent@cursor.com>
Rewrite broken VitePress links when syncing material docs, clarify GenuiConfigProvider vs Legacy usage in SKILL.md, and document Express integration dependencies in server.md. Co-authored-by: Cursor <cursoragent@cursor.com>
Reduce vue/angular reference duplication by pointing to official docs, expand skill description for server integration, and preserve materials index during doc sync. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (6)
packages/integrate/skill/genui-integration/references/vue.md (1)
50-55: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winFix the “Next steps” links in the packaged docs.
At runtime,
../examples/renderer/*.mdis intended to resolve topackages/integrate/skill/genui-integration/examples/renderer/...; the repository has no matching markdown files there. Add the referenced docs to the publishedexamplesfolder, or update these links to stable documentation URLs.🤖 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 `@packages/integrate/skill/genui-integration/references/vue.md` around lines 50 - 55, Fix the “下一步” links in the Vue integration documentation so they resolve in the packaged documentation: either add the referenced renderer markdown files under the published examples/renderer location, or replace the relative links with stable documentation URLs. Keep all four navigation targets valid and preserve their intended topics.packages/integrate/skill/genui-integration/references/angular.md (5)
42-42: 🔒 Security & Privacy | 🟡 Minor | ⚡ Quick winDo not log raw action payloads.
rawUrlmay contain credentials or sensitive query parameters.params.messagemay contain user data. Log a fixed event or a sanitized value instead of the original payload.Proposed fix
- console.warn('[openPage] blocked disallowed navigation target:', rawUrl); + console.warn('[openPage] blocked disallowed navigation target'); - console.log('Notification:', params.message); + console.log('Notification received');Also applies to: 80-81
🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md` at line 42, Update the disallowed-navigation warning in the openPage flow to avoid logging rawUrl or any related action payload, including params.message. Replace the payload interpolation with a fixed event message or a sanitized, non-sensitive navigation identifier while preserving the warning behavior.
121-121: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winRemove the unsupported
[(ngModel)]troubleshooting step.
[changeDetectionNotWorking]does not explain any standalone component with[(ngModel)], and the referenced example is the[(ngModel)]-freeGenuiExamplecomponent. Keeping this step can make users add[(ngModel)]without importingFormsModuleor provide an irreducible fix.🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md` at line 121, Remove the “Use [(ngModel)] for two-way binding on inputs” troubleshooting step from the Angular integration documentation, including its associated guidance, since the referenced GenuiExample does not use [(ngModel)] and the step is unsupported.Source: MCP tools
75-76: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winValidate
paramsbefore readingparams.url.
customActions.executereceivesparams: any, sonullor a non-object value crashes this action beforeopenAllowedPagecan validate the URL. Useunknownforparamsand guard it before dereferencingurlandtarget.🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md` around lines 75 - 76, Update customActions.execute to accept params as unknown and validate that it is a non-null object before accessing url or target. Only after this guard should the action pass those values to openAllowedPage, preserving its existing URL validation behavior.
150-153: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winFix the broken references in
angular.md.The four links under this list point to
../examples/angular/renderer/*.md, but those targets do not exist under the skill package. Update them to valid published documentation links or add the referenced examples.🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md` around lines 150 - 153, Update the four Angular documentation links in angular.md—custom-components.md, custom-actions.md, required-complete-field-selectors.md, and state.md—to point to valid published documentation URLs, or add the corresponding example files under the skill package so every reference resolves.
58-60: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winMark the example component as standalone.
importsis only valid for standalone components. Addstandalone: trueto make this example compile on Angular < 19, where standalone defaults tofalse.`@Component`({ + standalone: true, imports: [GenuiConfigProvider, GenuiRenderer],🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md` around lines 58 - 60, Update the example’s `@Component` metadata to include standalone: true alongside imports, ensuring the component compiles on Angular versions before 19 while preserving the existing GenuiConfigProvider and GenuiRenderer imports.Source: MCP tools
🤖 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 `@packages/integrate/skill/genui-integration/references/angular.md`:
- Line 7: Update the Angular integration guide’s version statements and setup
instructions around GenuiConfigProvider and the referenced prerequisite sections
to match the supported Angular range, rather than claiming generic Angular 14+
support. Make Zone.js and provideAnimations() requirements specific to versions,
and document the Angular 21+ zoneless/native animate.enter and animate.leave
setup unless GenUI explicitly remains limited to the legacy path; apply the same
corrections to the additional referenced lines.
In `@packages/integrate/skill/genui-integration/references/server.md`:
- Around line 125-155: Add application authentication/authorization middleware
before the equipChatCompletions(app, ...) route registration, ensuring requests
without an Origin are still protected before proxying OpenAI requests;
alternatively document that the host Express application must enforce this
authorization before invoking the route.
- Around line 125-130: Update the Express examples around the
environment-variable reads, including isProduction, allowedOrigins, and the API
key usage, to load .env values before accessing process.env via dotenv.config()
or dotenv/config. Also add dotenv to the Express integration dependencies,
unless the documentation explicitly states that deployment injects every
variable.
In `@packages/integrate/skill/genui-integration/references/vue.md`:
- Line 15: Update the Vue integration guidance around PatternExtractor to
explicitly describe the processing order: parse SSE data frames first, extract
text deltas, pass each delta to PatternExtractor, then update GenuiRenderer and
generating. Clarify that PatternExtractor handles reasoning/schema extraction
only and does not perform SSE parsing.
In `@packages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs`:
- Around line 50-58: Move the materialsTmp material-file staging loop, including
readdir, readFile, rewriteMaterialLinks, and writeFile calls, into the existing
try block so its finally cleanup always runs when staging fails. Keep the
current materialsTmp setup and cleanup behavior unchanged.
---
Outside diff comments:
In `@packages/integrate/skill/genui-integration/references/angular.md`:
- Line 42: Update the disallowed-navigation warning in the openPage flow to
avoid logging rawUrl or any related action payload, including params.message.
Replace the payload interpolation with a fixed event message or a sanitized,
non-sensitive navigation identifier while preserving the warning behavior.
- Line 121: Remove the “Use [(ngModel)] for two-way binding on inputs”
troubleshooting step from the Angular integration documentation, including its
associated guidance, since the referenced GenuiExample does not use [(ngModel)]
and the step is unsupported.
- Around line 75-76: Update customActions.execute to accept params as unknown
and validate that it is a non-null object before accessing url or target. Only
after this guard should the action pass those values to openAllowedPage,
preserving its existing URL validation behavior.
- Around line 150-153: Update the four Angular documentation links in
angular.md—custom-components.md, custom-actions.md,
required-complete-field-selectors.md, and state.md—to point to valid published
documentation URLs, or add the corresponding example files under the skill
package so every reference resolves.
- Around line 58-60: Update the example’s `@Component` metadata to include
standalone: true alongside imports, ensuring the component compiles on Angular
versions before 19 while preserving the existing GenuiConfigProvider and
GenuiRenderer imports.
In `@packages/integrate/skill/genui-integration/references/vue.md`:
- Around line 50-55: Fix the “下一步” links in the Vue integration documentation so
they resolve in the packaged documentation: either add the referenced renderer
markdown files under the published examples/renderer location, or replace the
relative links with stable documentation URLs. Keep all four navigation targets
valid and preserve their intended topics.
🪄 Autofix
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: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c4ff33c2-b352-49af-8aa8-d2322c3283a5
📒 Files selected for processing (9)
packages/integrate/skill/genui-integration/README.mdpackages/integrate/skill/genui-integration/SKILL.mdpackages/integrate/skill/genui-integration/references/angular.mdpackages/integrate/skill/genui-integration/references/materials/angular-opentiny-ng.mdpackages/integrate/skill/genui-integration/references/materials/vue-element-plus.mdpackages/integrate/skill/genui-integration/references/materials/vue-opentiny-vue.mdpackages/integrate/skill/genui-integration/references/server.mdpackages/integrate/skill/genui-integration/references/vue.mdpackages/integrate/skill/genui-integration/scripts/copy-from-docs.mjs
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/integrate/skill/genui-integration/references/materials/angular-opentiny-ng.md
- packages/integrate/skill/genui-integration/references/materials/vue-element-plus.md
State the supported Angular 20.3.x range, attribute Zone.js and provideAnimations to official materials, and document that Angular 21+ zoneless/native animation paths are not yet supported. Co-authored-by: Cursor <cursoragent@cursor.com>
… cleanup Separate SSE frame parsing from PatternExtractor in the Vue skill guide, and ensure materials.__build_tmp__ is removed when staging fails. Co-authored-by: Cursor <cursoragent@cursor.com>
…ence The server is a pass-through proxy with no MODEL env var; model comes from the request body and must match the provider behind BASE_URL. Replace the hardcoded deepseek-v3.2 in the fetch example with an env-driven value and note the ownership next to the .env docs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Ignore generated materials pages like examples; document build/prepack sync in README. Co-authored-by: Cursor <cursoragent@cursor.com>
Fix garbled Multiple text and leftover English prose in server/angular guides. Co-authored-by: Cursor <cursoragent@cursor.com>
Summary by CodeRabbit
New Features
Chores