refactor: new simpilfied ui builder api #158
Conversation
… OpenAI and non-OpenAI environments
…ross multiple files
…ross multiple files
…eview handlers and esbuild configuration
📝 WalkthroughWalkthroughReorganizes Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
# Conflicts: # libs/ui/src/bundler/browser-components.ts # libs/ui/src/bundler/bundler.ts # libs/ui/src/bundler/file-cache/component-builder.ts # libs/ui/src/bundler/file-cache/hash-calculator.ts # libs/ui/src/bundler/file-cache/storage/filesystem.ts # libs/ui/src/bundler/file-cache/storage/redis.ts # libs/ui/src/pages/consent.ts # libs/ui/src/pages/error.ts # libs/uipack/src/build/index.ts # libs/uipack/src/index.ts # libs/uipack/src/styles/variants.ts
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
🧹 Nitpick comments (4)
libs/uipack/src/registry/render-template.ts (1)
88-90: Error message references wrong package.The error message says
[@frontmcp/ui]but this file is in@frontmcp/uipack. Consider updating for consistency and accurate error attribution.🔎 Proposed fix
console.error( - '[@frontmcp/ui] MDX rendering failed:', + '[@frontmcp/uipack] MDX rendering failed:', error instanceof Error ? error.stack || error.message : String(error), );libs/uipack/src/preview/types.ts (1)
18-32: Type design consideration:PlatformvsAIPlatformTypeoverlap.
Platformis a strict subset ('openai' | 'claude' | 'generic') whileAIPlatformTypeincludes additional platforms. Consider using a shared base or documenting the relationship more explicitly to prevent confusion about which type to use where.The current design is acceptable for the use case (handlers vs detection), but a brief inline comment clarifying the distinction would help maintainability.
libs/uipack/src/preview/openai-preview.ts (2)
112-115: DRY violation: Hardcoded CSP domains repeated across all discovery handlers.The same CSP configuration is duplicated in
forDiscoveryStatic,forDiscoveryHybrid, andforDiscoveryInline. Per coding guidelines, usetheme.cdnconfiguration instead of hard-coding CDN URLs.Consider extracting to a shared constant:
🔎 Proposed refactor to extract CSP configuration
+// Default CSP configuration for OpenAI widgets +private static readonly DEFAULT_WIDGET_CSP = { + connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], + resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], +} as const; + private forDiscoveryStatic(result: StaticBuildResult, toolName: string, _description?: string): DiscoveryMeta { const resourceUri = `resource://widget/${toolName}`; const _meta: OpenAIMetaFields = { 'openai/outputTemplate': resourceUri, 'openai/widgetAccessible': true, 'openai/resultCanProduceWidget': true, 'openai/displayMode': 'inline', - 'openai/widgetCSP': { - connect_domains: ['esm.sh', 'cdn.tailwindcss.com'], - resource_domains: ['esm.sh', 'cdn.tailwindcss.com', 'fonts.googleapis.com', 'fonts.gstatic.com'], - }, + 'openai/widgetCSP': OpenAIPreview.DEFAULT_WIDGET_CSP, };Also applies to: 132-135, 152-155
312-315: Fragile string replacement for data injection.The exact string matching (e.g.,
'window.__mcpToolInput = {};') will silently fail if the vendorShell HTML has different formatting (whitespace, quotes). Consider using a more robust placeholder pattern or validating that replacements occurred.🔎 Proposed improvement for robust replacement
+// Define consistent placeholders +private static readonly PLACEHOLDERS = { + INPUT: '/* __MCP_INPUT_PLACEHOLDER__ */', + OUTPUT: '/* __MCP_OUTPUT_PLACEHOLDER__ */', + STRUCTURED: '/* __MCP_STRUCTURED_PLACEHOLDER__ */', +} as const; + private combineHybridForBuilder(/* ... */): string { let html = result.vendorShell; + // Use regex for more flexible matching - html = html - .replace('window.__mcpToolInput = {};', `window.__mcpToolInput = ${JSON.stringify(input)};`) - .replace('window.__mcpToolOutput = {};', `window.__mcpToolOutput = ${JSON.stringify(output)};`) - .replace('window.__mcpStructuredContent = {};', `window.__mcpStructuredContent = ${JSON.stringify(output)};`); + html = html + .replace(/window\.__mcpToolInput\s*=\s*\{\s*\};?/, `window.__mcpToolInput = ${this.safeStringify(input)};`) + .replace(/window\.__mcpToolOutput\s*=\s*\{\s*\};?/, `window.__mcpToolOutput = ${this.safeStringify(output)};`) + .replace(/window\.__mcpStructuredContent\s*=\s*\{\s*\};?/, `window.__mcpStructuredContent = ${this.safeStringify(output)};`);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (9)
libs/uipack/src/build/builders/base-builder.tsis excluded by!**/build/**libs/uipack/src/build/builders/esbuild-config.tsis excluded by!**/build/**libs/uipack/src/build/builders/hybrid-builder.tsis excluded by!**/build/**libs/uipack/src/build/builders/index.tsis excluded by!**/build/**libs/uipack/src/build/builders/inline-builder.tsis excluded by!**/build/**libs/uipack/src/build/builders/static-builder.tsis excluded by!**/build/**libs/uipack/src/build/builders/types.tsis excluded by!**/build/**libs/uipack/src/build/index.tsis excluded by!**/build/**libs/uipack/src/build/widget-manifest.tsis excluded by!**/build/**
📒 Files selected for processing (42)
libs/ui/CLAUDE.mdlibs/ui/package.jsonlibs/ui/project.jsonlibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/ui/src/bridge/index.tslibs/ui/src/bundler/__tests__/cache.test.tslibs/ui/src/bundler/browser-components.tslibs/ui/src/bundler/bundler.tslibs/ui/src/bundler/cache.tslibs/ui/src/bundler/file-cache/component-builder.tslibs/ui/src/bundler/file-cache/hash-calculator.tslibs/ui/src/bundler/file-cache/index.tslibs/ui/src/bundler/file-cache/storage/filesystem.tslibs/ui/src/bundler/file-cache/storage/index.tslibs/ui/src/bundler/file-cache/storage/interface.tslibs/ui/src/bundler/file-cache/storage/redis.tslibs/ui/src/bundler/index.tslibs/ui/src/bundler/sandbox/enclave-adapter.tslibs/ui/src/bundler/sandbox/executor.tslibs/ui/src/bundler/sandbox/policy.tslibs/ui/src/index.tslibs/ui/src/pages/consent.tslibs/ui/src/pages/error.tslibs/ui/src/pages/index.tslibs/ui/src/react/index.tslibs/ui/src/react/utils.tslibs/ui/src/renderers/index.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/widgets/index.tslibs/ui/src/widgets/progress.tslibs/ui/src/widgets/resource.tslibs/uipack/CLAUDE.mdlibs/uipack/src/index.tslibs/uipack/src/preview/claude-preview.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/index.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/preview/types.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/renderers/index.tslibs/uipack/src/renderers/registry.tslibs/uipack/src/styles/variants.ts
💤 Files with no reviewable changes (22)
- libs/ui/src/widgets/index.ts
- libs/ui/package.json
- libs/ui/src/bundler/sandbox/executor.ts
- libs/ui/src/pages/consent.ts
- libs/ui/src/react/utils.ts
- libs/ui/src/bundler/browser-components.ts
- libs/ui/src/bundler/file-cache/storage/interface.ts
- libs/ui/src/bundler/file-cache/component-builder.ts
- libs/ui/src/widgets/resource.ts
- libs/ui/src/bundler/sandbox/policy.ts
- libs/ui/src/bundler/tests/cache.test.ts
- libs/ui/src/bundler/cache.ts
- libs/ui/src/widgets/progress.ts
- libs/ui/src/react/index.ts
- libs/ui/src/pages/index.ts
- libs/ui/src/bundler/sandbox/enclave-adapter.ts
- libs/ui/src/bundler/file-cache/hash-calculator.ts
- libs/ui/src/bundler/file-cache/storage/index.ts
- libs/ui/src/pages/error.ts
- libs/ui/src/bundler/file-cache/storage/redis.ts
- libs/ui/src/bundler/file-cache/index.ts
- libs/ui/src/bundler/file-cache/storage/filesystem.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Use strict TypeScript mode with noanytypes without strong justification - useunknowninstead for generic type defaults
Avoid non-null assertions (!) - use proper error handling and throw specific errors instead
Use type parameters with constraints instead of unconstrained generics
Do not mutate rawInput in flows - use state.set() for managing flow state instead
Files:
libs/uipack/src/registry/render-template.tslibs/uipack/src/preview/generic-preview.tslibs/ui/src/bridge/index.tslibs/uipack/src/preview/claude-preview.tslibs/uipack/src/preview/index.tslibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/styles/variants.tslibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/preview/types.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/uipack/src/renderers/index.ts
libs/uipack/src/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
libs/uipack/src/**/*.ts: Do not add React dependencies to uipack - use @frontmcp/ui package for React components instead
Avoid usinganytype without justification in TypeScript code
Do not expose internal error details in user-facing error messages
Files:
libs/uipack/src/registry/render-template.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/claude-preview.tslibs/uipack/src/preview/index.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/styles/variants.tslibs/uipack/src/index.tslibs/uipack/src/preview/types.tslibs/uipack/src/renderers/registry.tslibs/uipack/src/renderers/index.ts
libs/**
⚙️ CodeRabbit configuration file
libs/**: Contains publishable SDK libraries. Review for API correctness, breaking changes, and consistency with docs. When public APIs change, ensure there is a matching docs/draft/docs/** update (not direct edits under docs/docs/**).
Files:
libs/uipack/src/registry/render-template.tslibs/uipack/src/preview/generic-preview.tslibs/ui/src/bridge/index.tslibs/uipack/src/preview/claude-preview.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/uipack/src/preview/index.tslibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/uipack/src/preview/openai-preview.tslibs/uipack/src/styles/variants.tslibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/preview/types.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/uipack/src/renderers/index.ts
libs/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Do not import React-free utilities from @frontmcp/ui; use @frontmcp/uipack instead
Files:
libs/ui/src/bridge/index.tslibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/src/bundler/index.tslibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.ts
libs/ui/src/bundler/**/*.{ts,tsx}
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Files:
libs/ui/src/bundler/bundler.tslibs/ui/src/bundler/index.ts
libs/uipack/src/{components,web-components,renderers,utils}/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
Always escape user-provided content using escapeHtml() utility to prevent XSS
Files:
libs/uipack/src/renderers/registry.tslibs/uipack/src/renderers/index.ts
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Achieve 95%+ test coverage across all metrics (statements, branches, functions, lines)
Test all code paths including error cases and constructor validation
Include error classinstanceofchecks in tests to validate error handling
Files:
libs/ui/src/bridge/__tests__/iife-generator.test.ts
libs/ui/src/**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
libs/ui/src/**/*.test.{ts,tsx}: Use React Testing Library for component tests with 95%+ coverage across statements, branches, functions, and lines
Include SSR tests to verify server-side rendering output for React components
Files:
libs/ui/src/bridge/__tests__/iife-generator.test.ts
🧠 Learnings (32)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Configure entry points for frontmcp/ui exports: main, react, react/hooks, renderers, render, universal, and bundler
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/bundler/**/*.{ts,tsx} : Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Use React 18/19 with TypeScript for all components in frontmcp/ui
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/universal/**/*.{ts,tsx} : Export FrontMCPProvider and UniversalApp from universal app shell for platform-agnostic React configuration
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Ensure SSR support via react-dom/server for React components
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Include SSR tests to verify server-side rendering output for React components
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,build,layouts,pages}/**/*.ts : Use platform-aware theming via getPlatform(), OPENAI_PLATFORM, and CLAUDE_PLATFORM constants for network capability detection
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Applied to files:
libs/uipack/src/registry/render-template.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/preview/types.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.adapter.ts : Implement client-side hydration for interactive widgets using ReactRendererAdapter
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/CLAUDE.mdlibs/ui/src/renderers/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{theme,build,layouts,pages,base-template}/**/*.ts : Use theme.cdn configuration instead of hard-coding CDN URLs
Applied to files:
libs/uipack/src/registry/render-template.tslibs/uipack/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.test.{ts,tsx} : Include hydration tests to verify client-side hydration behavior
Applied to files:
libs/uipack/src/registry/render-template.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/renderers/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not expose internal error details in user-facing error messages
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/bundler/bundler.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/**/index.ts : Export public API through barrel files - export users' needed items, no legacy exports with different names
Applied to files:
libs/ui/src/bridge/index.tslibs/ui/CLAUDE.mdlibs/uipack/src/preview/index.tslibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/universal/**/*.{ts,tsx} : Export FrontMCPProvider and UniversalApp from universal app shell for platform-agnostic React configuration
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Configure entry points for frontmcp/ui exports: main, react, react/hooks, renderers, render, universal, and bundler
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,base-template,layouts,pages}/**/*.ts : Use buildCdnScriptsFromTheme() with appropriate inline flag for platform network access constraints
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.tslibs/ui/src/bridge/__tests__/iife-generator.test.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/hooks/**/*.{ts,tsx} : Use MCP bridge hooks (useMcpBridge, useCallTool, useToolInput, useToolOutput) for tool communication in components
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/uipack/src/index.tslibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,build,layouts,pages}/**/*.ts : Use platform-aware theming via getPlatform(), OPENAI_PLATFORM, and CLAUDE_PLATFORM constants for network capability detection
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/uipack/src/preview/index.tslibs/ui/src/bundler/bundler.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/index.tslibs/ui/src/index.tslibs/uipack/src/preview/types.tslibs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Use entry points from package.json exports for public API access instead of direct file imports
Applied to files:
libs/ui/src/bridge/index.tslibs/ui/src/bundler/bundler.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/common/records/**/*.ts : Centralize record types in common/records directory and import from there instead of module-specific files
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/src/preview/types.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,components,web-components}/**/*.test.ts : Test component behavior across platform configurations (OpenAI, Claude, etc.)
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/uipack/src/preview/index.tslibs/ui/src/bundler/bundler.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/index.tslibs/uipack/src/preview/types.tslibs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/bundler/**/*.{ts,tsx} : Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Applied to files:
libs/ui/src/bridge/index.tslibs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/bundler/bundler.tslibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/bundler/index.tslibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.{ts,tsx} : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
libs/uipack/CLAUDE.md
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components,renderers}/**/*.test.ts : Test HTML escaping for user-provided content in component tests
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Include SSR tests to verify server-side rendering output for React components
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.tslibs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Use React 18/19 with TypeScript for all components in frontmcp/ui
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/index.tslibs/uipack/src/renderers/registry.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/hooks/**/*.{ts,tsx} : Handle loading and error states in MCP bridge hooks (useMcpBridge, useCallTool, etc.)
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/index.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: FrontMCP is a TypeScript-first schema validation framework - all types should align with MCP protocol definitions
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/uipack/src/preview/types.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Ensure SSR support via react-dom/server for React components
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/renderers/index.tslibs/ui/project.jsonlibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/renderers/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Zero React dependency constraint - this is the React-free core package
Applied to files:
libs/uipack/CLAUDE.mdlibs/ui/CLAUDE.mdlibs/ui/src/index.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/*/package.json : Each library in /libs/* is independent and publishable under frontmcp/* scope
Applied to files:
libs/ui/CLAUDE.md
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Avoid using `any` type without justification in TypeScript code
Applied to files:
libs/uipack/src/preview/types.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Provide TypeScript types for all component props without using 'any' type without justification
Applied to files:
libs/uipack/src/preview/types.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.ts : Validate all component options using validateOptions() helper with the component's Zod schema
Applied to files:
libs/uipack/src/preview/types.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Use React Testing Library for component tests with 95%+ coverage across statements, branches, functions, and lines
Applied to files:
libs/ui/src/bridge/__tests__/iife-generator.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.test.ts : Maintain 95%+ test coverage across statements, branches, functions, and lines
Applied to files:
libs/ui/src/bridge/__tests__/iife-generator.test.ts
🧬 Code graph analysis (2)
libs/uipack/src/registry/render-template.ts (2)
libs/uipack/src/renderers/index.ts (1)
mdxClientRenderer(64-64)libs/uipack/src/renderers/mdx-client.renderer.ts (1)
mdxClientRenderer(288-288)
libs/uipack/src/preview/openai-preview.ts (2)
libs/uipack/src/preview/index.ts (8)
OpenAIPreview(26-26)PreviewHandler(18-18)DiscoveryPreviewOptions(13-13)DiscoveryMeta(16-16)ExecutionPreviewOptions(14-14)ExecutionMeta(17-17)OpenAIMetaFields(19-19)BuilderMockData(15-15)libs/uipack/src/preview/types.ts (7)
PreviewHandler(165-186)DiscoveryPreviewOptions(41-56)DiscoveryMeta(116-131)ExecutionPreviewOptions(61-87)ExecutionMeta(136-156)OpenAIMetaFields(195-206)BuilderMockData(92-107)
🔇 Additional comments (33)
libs/ui/src/bridge/__tests__/iife-generator.test.ts (1)
5-5: LGTM!Import path updated to use the barrel export from
../runtime, aligning with the consolidated re-export strategy. All imported symbols remain unchanged.libs/ui/src/bridge/index.ts (1)
105-112: LGTM!The runtime re-exports are properly consolidated through the local
./runtimebarrel, with a clarifying comment indicating the source of truth. This aligns with the project's barrel export strategy.libs/ui/CLAUDE.md (4)
7-7: LGTM!Documentation accurately updated to reflect the package split, now correctly including "theme" in the list of React-free utilities provided by
@frontmcp/uipack.
20-38: LGTM!Architecture diagram comprehensively updated to reflect the new module organization including bridge, bundler, components, layouts, and web-components directories.
136-143: LGTM!New MDX server rendering documentation section added, providing clear usage examples for
MdxRendererandmdxRenderer.
215-226: LGTM!Entry points table expanded to include all new public paths: bridge, components, layouts, and web-components. This provides clear guidance for consumers on the available import paths.
libs/ui/src/renderers/react.renderer.ts (3)
1-17: LGTM!Documentation clearly updated to reflect the shift from SSR to client-side rendering. The examples and explanations accurately describe the new behavior where React components are rendered in the browser using CDN-loaded React.
51-55: Note: Claude platform users will not have React rendering capability.The
INLINE_REACT_PLACEHOLDERonly logs a warning for blocked-network platforms (Claude). This is acceptable as a known limitation, but ensure this is documented for users building widgets targeting Claude.
218-266: Client-side rendering script implementation looks solid.The implementation correctly:
- Uses
waitForReactpolling with configurable max attempts- Properly decodes HTML-escaped props before parsing
- Falls back to global component registry
- Uses React 18+
createRootAPIMinor observation: The 100 attempts × 50ms = 5 second timeout is reasonable for CDN loading.
libs/uipack/src/renderers/registry.ts (1)
273-278: LGTM!Documentation example correctly updated to reference
mdxClientRendererinstead ofmdxRenderer, aligning with the canonical MDX renderer name used throughout the codebase.libs/uipack/src/registry/render-template.ts (1)
80-84: LGTM!Correctly updated to use
mdxClientRendererfrom the internal renderers module, aligning with the renamed MDX renderer across the codebase.libs/ui/project.json (2)
32-32: LGTM!Entry points for
pages/index.tsandwidgets/index.tsremoved from the CJS build configuration, consistent with the removal of these modules from the public API surface.
68-68: LGTM!ESM build configuration mirrors the CJS changes, maintaining consistency across both build formats.
libs/ui/src/renderers/index.ts (2)
48-48: Breaking change:buildMdxHydrationScriptremoved from exports.Similar to above,
buildMdxHydrationScriptremoval is a breaking change. Ensure this is communicated to consumers who may have been using MDX hydration scripts.
41-41: Public API breaking change:buildHydrationScriptandbuildMdxHydrationScriptremoved from barrel exports.These functions still exist in their implementation files (
react.renderer.tsandmdx.renderer.ts) but are no longer re-exported via the barrelindex.ts. This is a breaking change for consumers previously importing from@frontmcp/ui/renderers. Per the SDK library guidelines, this requires documentation indocs/draft/docs/**describing the breaking change, the migration path (users can import directly from the implementation modules instead), and the rationale behind the shift to client-side rendering.libs/ui/src/bundler/bundler.ts (1)
2130-2130: LGTM! API consolidation aligns with package architecture.The re-export of
SecurityErrorandExecutionErrorfrom@frontmcp/uipack/bundleris consistent with the broader bundler API consolidation visible throughout this file (lines 44-54 already import related utilities from the same source). Export names and types remain unchanged, maintaining backward compatibility.Based on learnings, this aligns with the guideline to use entry points from package.json exports for public API access.
libs/ui/src/index.ts (1)
95-95: LGTM! API surface reduction aligns with refactoring objectives.The narrowed exports from
./renderers(removing pages, widgets, render surface, and hydration utilities) are consistent with the broader PR refactoring that consolidates the UI builder architecture. The retained exports (ReactRenderer,reactRenderer,ReactRendererAdapter,createReactAdapter,loadReactAdapter) preserve the core React rendering capabilities.libs/uipack/src/renderers/index.ts (2)
52-52: LGTM! Cache export refinement.Removing
renderCachefrom the public exports while retainingTranspileCache,transpileCache, andcomponentCacheis a reasonable API surface reduction that maintains the core caching capabilities.
71-72: LGTM! Deprecated alias removal with helpful guidance.Removing the deprecated
MdxRendereralias exports and replacing them with a clear note directing users to@frontmcp/ui/renderersfor server-side MDX rendering is good practice. This aligns with the package separation principle where React-dependent features belong in@frontmcp/ui.Based on learnings, this correctly maintains the zero React dependency constraint for uipack.
libs/uipack/src/preview/generic-preview.ts (1)
51-94: LGTM! Clean interface implementation with proper error handling.The
GenericPreviewclass properly implements thePreviewHandlerinterface with clear delegation to mode-specific handlers. Error handling at lines 71 and 92 correctly throws generic errors without exposing internal details.libs/uipack/src/preview/index.ts (2)
51-62: LGTM! Clean factory pattern with proper error handling.The
createPreviewHandlerfactory provides a clean abstraction for instantiating platform-specific preview handlers. Error handling at line 60 properly throws a generic error without exposing internal details.As per coding guidelines, this follows the pattern of not exposing internal error details in user-facing error messages.
70-86: LGTM! Safe platform detection logic.The
detectPlatformfunction uses safe string matching with proper null handling (line 75) and sensible fallback to'generic'. The logic is straightforward and doesn't introduce security concerns.libs/uipack/CLAUDE.md (1)
1-229: LGTM! Documentation accurately reflects the refactored architecture.The documentation updates comprehensively cover the new UI builder architecture introduced in this PR:
- Updated entry points table (lines 51-69) reflects the new preview, bundler, and runtime modules
- Build API section (lines 71-85) documents the new
buildToolUIfunction- Renderers section (lines 140-175) correctly distinguishes between uipack's client-side renderers and ui's server-side renderers
- New bundler utilities section (lines 162-175) documents the consolidated bundler API
The updates align well with the code changes and maintain the zero React dependency principle for uipack.
libs/ui/src/bundler/index.ts (1)
98-163: LGTM! Clean API consolidation through re-exports.The re-exports of cache, security, execution, and file-based caching utilities from
@frontmcp/uipack/bundlermaintain backward compatibility while consolidating the implementation. The updated documentation headers clearly indicate the source of each export group.This pattern aligns well with the barrel file approach for public API access.
Based on learnings, this correctly uses entry points from package.json exports for public API access.
libs/uipack/src/preview/claude-preview.ts (2)
51-96: LGTM! Clean interface implementation with proper error handling.The
ClaudePreviewclass properly implements thePreviewHandlerinterface with mode-based delegation. Error handling at line 94 correctly throws a generic error without exposing internal details.
185-201: LGTM! Safe CDN URL replacement logic.The
replaceWithCloudfareCdnmethod safely performs regex-based URL replacements to substitute esm.sh URLs with Cloudflare CDN URLs. The replacements are idempotent and don't introduce security concerns.libs/uipack/src/preview/types.ts (4)
61-87: LGTM!The
ExecutionPreviewOptionsinterface correctly usesunknownfor genericinputandoutputfields, following the coding guideline to avoidanywithout justification. The optionalbuilderModewith default documented in JSDoc is a good pattern.
92-107: LGTM!The
BuilderMockDatainterface uses appropriate literal types forthemeanddisplayMode, andRecord<string, unknown>for dynamic tool responses—compliant with the strict TypeScript guidelines.
116-156: LGTM!Both
DiscoveryMetaandExecutionMetainterfaces useRecord<string, unknown>for the flexible_metafield andunknownforstructuredContent, adhering to strict TypeScript practices.
211-231: Potential field overlap inClaudeMetaFieldsandFrontMCPMetaFields.Both interfaces define
'ui/html'and'ui/mimeType'fields. When combined inUIMetaFields, this is fine (intersection), but ensure consumers understand these fields may have different semantics per platform.This is acceptable as documented—just noting for awareness.
libs/uipack/src/index.ts (1)
88-111: LGTM!The new Architecture Builders and esbuild configuration exports follow the established pattern in this barrel file. The type and value exports are properly categorized and documented with section comments.
libs/uipack/src/preview/openai-preview.ts (2)
54-76: LGTM on discriminated union handling.The
forDiscoverymethod correctly handles the discriminated union onbuildResult.modewith exhaustive switch cases and a proper error throw for unknown modes.
318-323: The import path forHybridBuildResultdoes not exist in the codebase.Lines 27 in openai-preview.ts imports from
../build/builders/types, but the directorylibs/uipack/src/build/builders/is not present. TheHybridBuildResulttype definition cannot be located. This code would fail to compile due to unresolved imports. The type definitions and the source ofcomponentChunkneed to be implemented or the import paths corrected before the sanitization concern can be verified.
… code injection attacks
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/uipack/src/registry/render-template.ts (1)
67-72: Update outdated comment.The comment at line 70 states "Uses the MDX renderer from @frontmcp/ui", but the actual import at lines 80-81 is from the local
../renderers/index.jsmodule within uipack. Update the comment to reflect the current implementation.🔎 Proposed fix
/** * Render MDX content to HTML string. * - * Uses the MDX renderer from @frontmcp/ui. + * Uses the MDX client renderer from the local renderers module. * Falls back to plain text if MDX rendering is not available. */
♻️ Duplicate comments (6)
libs/uipack/src/preview/generic-preview.ts (2)
258-295: XSS vulnerability properly addressed with safe JSON serialization.The previous security concern about XSS via
</script>injection has been correctly resolved. All user-provided data is now escaped usingsafeJsonForScriptbefore embedding in script tags (lines 264-268, 287-289).As per coding guidelines, always escape user-provided content to prevent XSS.
303-331: XSS vulnerability properly addressed in hybrid builder mode.The previous security concern has been correctly resolved. Input and output data are now escaped using
safeJsonForScript(lines 312-313) before injection into the HTML shell.As per coding guidelines, always escape user-provided content to prevent XSS.
libs/uipack/src/index.ts (1)
179-203: Re-export pattern is acceptable; explanatory comment helps clarity.The
AIPlatformTypeis exported from adapters (line 45) as the canonical source and re-exported from preview for convenience. The explanatory comment (lines 182-185) clarifies this pattern for developers. While consolidation to a single shared types module might be slightly cleaner, the current approach with clear documentation is acceptable and maintains module cohesion.Based on learnings, export public API through barrel files and re-exports for convenience are acceptable patterns.
libs/uipack/src/preview/openai-preview.ts (3)
250-276: Inline mode limitation now properly documented with warning.The previous concern about returning placeholder HTML has been partially addressed. The implementation now includes a
console.warn(lines 262-265) and an explanatory comment in the placeholder HTML (line 268), which helps developers understand the limitation.The warning provides clear guidance to use static or hybrid modes for production. This is an acceptable interim solution given the synchronous interface constraint.
288-334: XSS vulnerability properly resolved with safe JSON escaping.The script injection vulnerability has been correctly addressed. All data (theme, displayMode, toolResponses, input, output) is now escaped using
safeJsonForScript(lines 294-298) before embedding in the script context, preventing</script>breakout and other HTML injection attacks.As per coding guidelines, always escape user-provided content to prevent XSS.
342-372: XSS vulnerability properly resolved in hybrid data injection.The vulnerability has been correctly addressed. Input and output data are now escaped using
safeJsonForScript(lines 351-352) before injection into the vendor shell, preventing HTML injection attacks while maintaining robust placeholder matching via regex patterns.As per coding guidelines, always escape user-provided content to prevent XSS.
🧹 Nitpick comments (4)
libs/uipack/src/preview/types.ts (1)
162-183: Consider documenting inline mode limitation in the interface.The
PreviewHandlerinterface is synchronous, which creates a known limitation for inline mode that requires async widget generation. While implementations handle this with warnings, the interface-level documentation could help developers understand this constraint upfront.🔎 Suggested documentation enhancement
/** * Interface for platform-specific preview handlers. + * + * Note: Both methods are synchronous. For inline mode, which requires + * async widget generation, implementations return placeholder metadata + * or pre-built widgets. Consider using static or hybrid modes for + * full async widget generation support. */ export interface PreviewHandler {libs/ui/src/renderers/react.renderer.ts (3)
208-213: Consider using standard HTML escaping utilities.The manual HTML entity escaping reimplements functionality that should use a standard utility. According to learnings, the codebase has an
escapeHtml()utility from@frontmcp/uipack.While the current logic appears correct for HTML attribute context, using a standard utility would be more maintainable and less error-prone.
🔎 Verify escapeHtml availability in @frontmcp/uipack
Based on learnings, run this to confirm the utility exists and check its implementation:
#!/bin/bash # Find escapeHtml utility in uipack rg -n "export.*escapeHtml" libs/uipack/src/ -A 5
252-315: Client-side rendering logic is functional but prop encoding is fragile.The generated HTML correctly sets up client-side React rendering with proper error handling. However, the prop encoding/decoding approach (lines 209-213 and 289) is fragile:
- Manual HTML entity encoding and decoding are duplicated
- If encoding changes, decoding must change
- Could theoretically break if JSON naturally contains these sequences
🔎 Consider base64 encoding for props
A more robust approach would use base64 encoding:
- const escapedProps = JSON.stringify(props) - .replace(/&/g, '&') - .replace(/'/g, ''') - .replace(/</g, '<') - .replace(/>/g, '>'); + const escapedProps = Buffer.from(JSON.stringify(props)).toString('base64');And in the client script:
- var props = propsJson ? JSON.parse(propsJson.replace(/&/g, '&').replace(/'/g, "'").replace(/</g, '<').replace(/>/g, '>')) : {}; + var props = propsJson ? JSON.parse(atob(propsJson)) : {};This eliminates the fragile entity encoding/decoding dance.
347-383: Remove unusedbuildHydrationScript()function.This function is legacy code from the old SSR approach and is not used anywhere in the codebase. The new implementation uses client-side rendering via
ReactDOM.createRoot()in therender()method (lines 263-311), which generates its own inline rendering script. The exportedbuildHydrationScript()usesReactDOM.hydrateRoot()(SSR-specific) and contradicts the current client-side rendering architecture. Removing it will reduce maintenance burden and eliminate confusion about which rendering approach is active. Note: Since this is a publishable SDK library, consider deprecation in a minor version before removal to avoid breaking existing consumers.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
libs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.tslibs/uipack/src/preview/claude-preview.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/openai-preview.tslibs/uipack/src/preview/types.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- libs/uipack/src/preview/claude-preview.ts
🧰 Additional context used
📓 Path-based instructions (7)
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Use strict TypeScript mode with noanytypes without strong justification - useunknowninstead for generic type defaults
Avoid non-null assertions (!) - use proper error handling and throw specific errors instead
Use type parameters with constraints instead of unconstrained generics
Do not mutate rawInput in flows - use state.set() for managing flow state instead
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/types.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.tslibs/uipack/src/preview/openai-preview.ts
libs/uipack/src/{components,web-components,renderers,utils}/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
Always escape user-provided content using escapeHtml() utility to prevent XSS
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
libs/uipack/src/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
libs/uipack/src/**/*.ts: Do not add React dependencies to uipack - use @frontmcp/ui package for React components instead
Avoid usinganytype without justification in TypeScript code
Do not expose internal error details in user-facing error messages
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/types.tslibs/uipack/src/index.tslibs/uipack/src/preview/openai-preview.ts
libs/**
⚙️ CodeRabbit configuration file
libs/**: Contains publishable SDK libraries. Review for API correctness, breaking changes, and consistency with docs. When public APIs change, ensure there is a matching docs/draft/docs/** update (not direct edits under docs/docs/**).
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/generic-preview.tslibs/uipack/src/preview/types.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.tslibs/uipack/src/preview/openai-preview.ts
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Achieve 95%+ test coverage across all metrics (statements, branches, functions, lines)
Test all code paths including error cases and constructor validation
Include error classinstanceofchecks in tests to validate error handling
Files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
libs/uipack/src/**/*.test.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
Maintain 95%+ test coverage across statements, branches, functions, and lines
Files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
libs/ui/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (libs/ui/CLAUDE.md)
Do not import React-free utilities from @frontmcp/ui; use @frontmcp/uipack instead
Files:
libs/ui/src/renderers/react.renderer.ts
🧠 Learnings (34)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Configure entry points for frontmcp/ui exports: main, react, react/hooks, renderers, render, universal, and bundler
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/universal/**/*.{ts,tsx} : Export FrontMCPProvider and UniversalApp from universal app shell for platform-agnostic React configuration
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/bundler/**/*.{ts,tsx} : Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Use React 18/19 with TypeScript for all components in frontmcp/ui
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,build,layouts,pages}/**/*.ts : Use platform-aware theming via getPlatform(), OPENAI_PLATFORM, and CLAUDE_PLATFORM constants for network capability detection
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,components,web-components}/**/*.test.ts : Test component behavior across platform configurations (OpenAI, Claude, etc.)
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,base-template,layouts,pages}/**/*.ts : Use buildCdnScriptsFromTheme() with appropriate inline flag for platform network access constraints
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components,renderers,utils}/**/*.ts : Always escape user-provided content using escapeHtml() utility to prevent XSS
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/generic-preview.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/preview/openai-preview.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components,renderers}/**/*.test.ts : Test HTML escaping for user-provided content in component tests
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/generic-preview.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/preview/openai-preview.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/**/index.ts : Export public API through barrel files - export users' needed items, no legacy exports with different names
Applied to files:
libs/uipack/src/utils/index.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not expose internal error details in user-facing error messages
Applied to files:
libs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Applied to files:
libs/uipack/src/utils/index.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/preview/types.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Avoid using `any` type without justification in TypeScript code
Applied to files:
libs/uipack/src/utils/index.tslibs/uipack/src/preview/types.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,base-template,layouts,pages}/**/*.ts : Use buildCdnScriptsFromTheme() with appropriate inline flag for platform network access constraints
Applied to files:
libs/uipack/src/utils/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{theme,build,layouts,pages,base-template}/**/*.ts : Use theme.cdn configuration instead of hard-coding CDN URLs
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.adapter.ts : Implement client-side hydration for interactive widgets using ReactRendererAdapter
Applied to files:
libs/uipack/src/registry/render-template.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.test.{ts,tsx} : Include hydration tests to verify client-side hydration behavior
Applied to files:
libs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,components,web-components}/**/*.test.ts : Test component behavior across platform configurations (OpenAI, Claude, etc.)
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/preview/types.tslibs/uipack/src/index.tslibs/uipack/src/preview/openai-preview.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.test.ts : Maintain 95%+ test coverage across statements, branches, functions, and lines
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.test.ts : Test invalid inputs for every component to validate error handling
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Use React Testing Library for component tests with 95%+ coverage across statements, branches, functions, and lines
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Include SSR tests to verify server-side rendering output for React components
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,build,layouts,pages}/**/*.ts : Use platform-aware theming via getPlatform(), OPENAI_PLATFORM, and CLAUDE_PLATFORM constants for network capability detection
Applied to files:
libs/uipack/src/preview/types.tslibs/uipack/src/index.tslibs/uipack/src/preview/openai-preview.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Provide TypeScript types for all component props without using 'any' type without justification
Applied to files:
libs/uipack/src/preview/types.tslibs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/common/records/**/*.ts : Centralize record types in common/records directory and import from there instead of module-specific files
Applied to files:
libs/uipack/src/preview/types.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.ts : Validate all component options using validateOptions() helper with the component's Zod schema
Applied to files:
libs/uipack/src/preview/types.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: FrontMCP is a TypeScript-first schema validation framework - all types should align with MCP protocol definitions
Applied to files:
libs/uipack/src/preview/types.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Ensure SSR support via react-dom/server for React components
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/bundler/**/*.{ts,tsx} : Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Use React 18/19 with TypeScript for all components in frontmcp/ui
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Configure entry points for frontmcp/ui exports: main, react, react/hooks, renderers, render, universal, and bundler
Applied to files:
libs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/universal/**/*.{ts,tsx} : Export FrontMCPProvider and UniversalApp from universal app shell for platform-agnostic React configuration
Applied to files:
libs/ui/src/renderers/react.renderer.tslibs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.{ts,tsx} : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/**/*.ts : Validate URIs per RFC 3986 at metadata level using proper validation
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Zero React dependency constraint - this is the React-free core package
Applied to files:
libs/ui/src/renderers/react.renderer.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to libs/sdk/src/**/*.ts : MCP response types should use strict MCP protocol types (GetPromptResult, ReadResourceResult) instead of `unknown`
Applied to files:
libs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/hooks/**/*.{ts,tsx} : Use MCP bridge hooks (useMcpBridge, useCallTool, useToolInput, useToolOutput) for tool communication in components
Applied to files:
libs/uipack/src/index.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/hooks/**/*.{ts,tsx} : Handle loading and error states in MCP bridge hooks (useMcpBridge, useCallTool, etc.)
Applied to files:
libs/uipack/src/index.ts
🧬 Code graph analysis (3)
libs/uipack/src/utils/__tests__/escape-html.test.ts (2)
libs/uipack/src/utils/escape-html.ts (2)
escapeScriptClose(105-107)safeJsonForScript(128-130)libs/uipack/src/utils/index.ts (2)
escapeScriptClose(10-10)safeJsonForScript(10-10)
libs/uipack/src/preview/generic-preview.ts (2)
libs/uipack/src/preview/types.ts (6)
DiscoveryPreviewOptions(38-53)DiscoveryMeta(113-128)ExecutionPreviewOptions(58-84)ExecutionMeta(133-153)FrontMCPMetaFields(218-228)BuilderMockData(89-104)libs/uipack/src/utils/escape-html.ts (1)
safeJsonForScript(128-130)
libs/ui/src/renderers/react.renderer.ts (3)
libs/sdk/src/common/metadata/tool-ui.metadata.ts (1)
TemplateContext(16-16)libs/ui/src/renderers/index.ts (2)
RenderOptions(30-30)ToolUIProps(26-26)libs/uipack/src/renderers/index.ts (2)
RenderOptions(41-41)ToolUIProps(37-37)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build Libraries
🔇 Additional comments (9)
libs/uipack/src/registry/render-template.ts (1)
89-89: LGTM: Log prefix correctly updated.The error log prefix has been appropriately changed from
[@frontmcp/ui]to[@frontmcp/uipack]to reflect the correct package location.libs/uipack/src/utils/index.ts (1)
10-10: LGTM! Clean public API expansion.The export of
safeJsonForScriptis consistent with existing escape utilities and appropriately extends the XSS prevention toolkit.libs/uipack/src/utils/__tests__/escape-html.test.ts (1)
126-150: LGTM! Comprehensive test coverage for escapeScriptClose.The tests cover closing tags, multiple tags, any
</sequences, safe strings, and empty strings.libs/ui/src/renderers/react.renderer.ts (6)
19-30: LGTM: Imports follow package separation correctly.The imports properly use
@frontmcp/uipackfor React-free utilities as per coding guidelines.
31-70: Good addition: Component name validation prevents code injection.This addresses the past review comment about validating
componentName. The implementation correctly:
- Validates JavaScript identifier syntax with a proper regex pattern
- Sanitizes invalid names with a safe fallback
- Prevents code injection attacks in generated JavaScript
130-181: LGTM: Template handling logic is correct.The
canHandle()andtranspile()methods correctly distinguish between imported React components and JSX strings, with appropriate handling for each case.
218-250: LGTM: Component code generation is secure.Component name sanitization is consistently applied for both imported functions and JSX strings, preventing code injection. The error messaging for unregistered components is also helpful for debugging.
320-338: Runtime script generation looks correct.The method appropriately handles both blocked-network and network-enabled platforms. The SRI concern for CDN scripts was already noted in the earlier comment.
83-86: Consider version pinning and CSP instead of SRI for esm.sh.Subresource Integrity (SRI) hashes are not applicable to esm.sh because it's a dynamic CDN that generates ES module code on-the-fly, and the esm.sh FAQ explicitly states that browsers don't support SRI for ES6 modules. SRI hashes would be unstable and unreliable.
Better security improvements for this configuration:
- Pin exact package versions: use
https://esm.sh/react@19.0.0instead of@19to prevent unexpected upstream changes- Implement Content Security Policy (CSP) to restrict script sources to allowed origins
- Monitor security advisories for esm.sh and React versions used
- Consider self-hosting critical bundles in production
The
crossoriginattribute already present in the script tags is appropriate.Likely an incorrect or invalid review comment.
… code injection attacks
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/uipack/src/registry/render-template.ts (1)
70-84: UseescapeHtml()utility for HTML escaping at line 94 instead of manual replace chain.The
mdxClientRendererimport path and API signature are correct. However, line 94 should use theescapeHtml()utility from../utilsfor consistency and complete escaping coverage (includes quotes and unicode line terminators):import { escapeHtml } from '../utils'; // Then at line 94, replace: const escaped = mdxContent.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); // With: const escaped = escapeHtml(mdxContent);This approach is used throughout the codebase and ensures all special characters are properly escaped.
🧹 Nitpick comments (1)
libs/uipack/src/registry/render-template.ts (1)
94-94: Prefer theescapeHtml()utility for consistency.The manual HTML escaping implementation is correct, but the codebase has an
escapeHtml()utility (evident fromlibs/uipack/src/utils/__tests__/escape-html.test.ts) that should be used for consistency and maintainability.🔎 Proposed refactor to use the escapeHtml utility
First, add the import at the top of the file:
+import { escapeHtml } from '../utils/escape-html.js';Then replace the manual escaping:
- const escaped = mdxContent.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); + const escaped = escapeHtml(mdxContent); return `<pre class="mdx-fallback">${escaped}</pre>`;Based on learnings: Always escape user-provided content using the
escapeHtml()utility to prevent XSS and maintain consistency.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
libs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.tslibs/uipack/src/utils/escape-html.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Use strict TypeScript mode with noanytypes without strong justification - useunknowninstead for generic type defaults
Avoid non-null assertions (!) - use proper error handling and throw specific errors instead
Use type parameters with constraints instead of unconstrained generics
Do not mutate rawInput in flows - use state.set() for managing flow state instead
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
libs/uipack/src/{components,web-components,renderers,utils}/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
Always escape user-provided content using escapeHtml() utility to prevent XSS
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
libs/uipack/src/**/*.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
libs/uipack/src/**/*.ts: Do not add React dependencies to uipack - use @frontmcp/ui package for React components instead
Avoid usinganytype without justification in TypeScript code
Do not expose internal error details in user-facing error messages
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
libs/**
⚙️ CodeRabbit configuration file
libs/**: Contains publishable SDK libraries. Review for API correctness, breaking changes, and consistency with docs. When public APIs change, ensure there is a matching docs/draft/docs/** update (not direct edits under docs/docs/**).
Files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Achieve 95%+ test coverage across all metrics (statements, branches, functions, lines)
Test all code paths including error cases and constructor validation
Include error classinstanceofchecks in tests to validate error handling
Files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
libs/uipack/src/**/*.test.ts
📄 CodeRabbit inference engine (libs/uipack/CLAUDE.md)
Maintain 95%+ test coverage across statements, branches, functions, and lines
Files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
🧠 Learnings (18)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Configure entry points for frontmcp/ui exports: main, react, react/hooks, renderers, render, universal, and bundler
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/universal/**/*.{ts,tsx} : Export FrontMCPProvider and UniversalApp from universal app shell for platform-agnostic React configuration
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/bundler/**/*.{ts,tsx} : Use SSR component bundler (createBundler, InMemoryBundler) for bundling React components
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/react/**/*.{ts,tsx} : Use React 18/19 with TypeScript for all components in frontmcp/ui
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,build,layouts,pages}/**/*.ts : Use platform-aware theming via getPlatform(), OPENAI_PLATFORM, and CLAUDE_PLATFORM constants for network capability detection
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,base-template,layouts,pages}/**/*.ts : Use buildCdnScriptsFromTheme() with appropriate inline flag for platform network access constraints
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,components,web-components}/**/*.test.ts : Test component behavior across platform configurations (OpenAI, Claude, etc.)
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components,renderers,utils}/**/*.ts : Always escape user-provided content using escapeHtml() utility to prevent XSS
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components,renderers}/**/*.test.ts : Test HTML escaping for user-provided content in component tests
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to **/*.ts : Avoid non-null assertions (`!`) - use proper error handling and throw specific errors instead
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not expose internal error details in user-facing error messages
Applied to files:
libs/uipack/src/utils/escape-html.tslibs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{handlebars,build,layouts,pages}/**/*.ts : Use Handlebars template engine for dynamic template rendering with variable substitution
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.ts : Do not add React dependencies to uipack - use frontmcp/ui package for React components instead
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.{ts,tsx} : Do not import React-free utilities from frontmcp/ui; use frontmcp/uipack instead
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.adapter.ts : Implement client-side hydration for interactive widgets using ReactRendererAdapter
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{theme,build,layouts,pages,base-template}/**/*.ts : Use theme.cdn configuration instead of hard-coding CDN URLs
Applied to files:
libs/uipack/src/registry/render-template.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{adapters,components,web-components}/**/*.test.ts : Test component behavior across platform configurations (OpenAI, Claude, etc.)
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/**/*.test.ts : Maintain 95%+ test coverage across statements, branches, functions, and lines
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:16.929Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/uipack/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:16.929Z
Learning: Applies to libs/uipack/src/{components,web-components}/**/*.test.ts : Test invalid inputs for every component to validate error handling
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/renderers/**/*.test.{ts,tsx} : Include hydration tests to verify client-side hydration behavior
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to **/*.test.{ts,tsx} : Test all code paths including error cases and constructor validation
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to **/*.test.{ts,tsx} : Include error class `instanceof` checks in tests to validate error handling
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-19T02:04:46.464Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-19T02:04:46.464Z
Learning: Applies to **/*.test.{ts,tsx} : Achieve 95%+ test coverage across all metrics (statements, branches, functions, lines)
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
📚 Learning: 2025-12-22T13:01:03.646Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-12-22T13:01:03.646Z
Learning: Applies to libs/ui/src/**/*.test.{ts,tsx} : Use React Testing Library for component tests with 95%+ coverage across statements, branches, functions, and lines
Applied to files:
libs/uipack/src/utils/__tests__/escape-html.test.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build Libraries
🔇 Additional comments (4)
libs/uipack/src/utils/escape-html.ts (1)
134-159: Excellent implementation addressing all previous concerns!The function now properly handles all edge cases that were flagged in the previous review:
- Explicit handling of
undefined(lines 136-138)- Try-catch for error handling (lines 140-158)
- BigInt conversion via replacer function (lines 142-146)
- Graceful handling of circular references (lines 155-158)
- Type-safe handling of
JSON.stringifyreturningundefined(lines 149-152)The implementation follows coding guidelines by using
unknowntype, avoidingany, and providing user-friendly error messages without exposing internal details.libs/uipack/src/utils/__tests__/escape-html.test.ts (2)
126-150: Comprehensive test coverage for escapeScriptClose.The test suite thoroughly validates the escaping behavior across various scenarios including closing script tags, multiple tags, any
</sequences, unchanged strings, and edge cases like empty strings.
152-242: Excellent test coverage addressing all previous gaps!The test suite now includes all previously missing test cases:
- Circular references with error handling validation (lines 192-197)
- BigInt conversion to string (lines 199-202)
- Functions omission in objects and standalone (lines 204-210, 220-223)
- Symbols omission in objects and standalone (lines 212-218, 225-228)
- Explicit undefined assertion (lines 182-184)
The comprehensive coverage includes basic serialization, XSS prevention, nested structures, primitives, and all edge cases. This should easily meet the 95%+ coverage requirement specified in the coding guidelines.
libs/uipack/src/registry/render-template.ts (1)
89-89: LGTM: Correct error prefix for the package scope.The error message prefix update from
[@frontmcp/ui]to[@frontmcp/uipack]correctly reflects that this file is part of theuipackpackage, improving error traceability.
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores
✏️ Tip: You can customize this high-level summary in your review settings.