Split @frontmcp/ui for two packages in order to use bundler without react dependency in server side #144
Conversation
WalkthroughSplit the UI into two packages: Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 5 (Critical) | ⏱️ ~120+ minutes Focus areas:
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
|
| Status | Scanner |  Critical |
 High |
 Medium |
 Low |
Total (0) |
|---|---|---|---|---|---|---|
| Open Source Security | 0 | 0 | 0 | 0 | See details | |
| ✅ | Code Security | 0 | 0 | 0 | 0 | 0 issues |
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
libs/sdk/src/tool/ui/ui-resource.handler.ts (1)
66-66: Update outdated comment reference.The comment still references
@frontmcp/uibut the function is now imported from@frontmcp/uipack.🔎 Proposed fix
- * Delegates to @frontmcp/ui's createDefaultBaseTemplate which provides: + * Delegates to @frontmcp/uipack's createDefaultBaseTemplate which provides:docs/draft/docs/servers/tools.mdx (1)
820-820: Update inconsistent package reference.Line 820 still references
@frontmcp/uiin the card title, but based on the context of this PR and the changes on lines 768-773, it should reference@frontmcp/uipack.🔎 Proposed fix
- Pre-built components from @frontmcp/ui + Pre-built components from @frontmcp/uipackdocs/draft/docs/ui/advanced/platforms.mdx (1)
332-342: Fix inconsistent mock path in testing example.The import on line 332 uses
@frontmcp/uipack/components, but thejest.mockon line 335 references@frontmcp/ui. These should be consistent to accurately reflect the new package structure.🔎 Suggested fix
// Mock platform for testing import { getPlatform } from '@frontmcp/uipack/components'; // Override for testing -jest.mock('@frontmcp/ui', () => ({ - ...jest.requireActual('@frontmcp/ui'), +jest.mock('@frontmcp/uipack/components', () => ({ + ...jest.requireActual('@frontmcp/uipack/components'), getPlatform: jest.fn().mockReturnValue({ id: 'claude', network: 'blocked', scripts: 'inline', }), }));libs/ui/package.json (1)
56-66: Update @swc/core to a recent version for React 19 compatibility.
esbuildat^0.27.1is current as of December 2025 and compatible with React 19@swc/coreat^1.5.0is significantly outdated (latest is 1.15.7); upgrade to a recent version for React 19 supportzodat^4.0.0correctly uses the new unified error API introduced in Zod 4@frontmcp/uipackat exact0.6.0ensures coordinated releasedocs/draft/docs/ui/api-reference/runtime.mdx (1)
1-6: Update frontmatter description to match new package structure.The description on line 5 still references
@frontmcp/ui runtime system, but all code examples now import from@frontmcp/uipack/components. Update the description for consistency with the package split.🔎 Proposed fix
--- title: Runtime API Reference sidebarTitle: Runtime icon: gear -description: Complete API reference for the @frontmcp/ui runtime system, including template context, helper functions, MCP Bridge, and wrapper utilities. +description: Complete API reference for the @frontmcp/uipack runtime system, including template context, helper functions, MCP Bridge, and wrapper utilities. ---
🟡 Minor comments (14)
libs/uipack/src/theme/presets/index.d.ts-1-10 (1)
1-10: Fix inconsistent module path in JSDoc.The
@moduletag references@frontmcp/ui/theme/presetsbut this file is located in the@frontmcp/uipackpackage. The module path should match the actual package location.🔎 Proposed fix
* Provides pre-configured theme presets for different design aesthetics. - * The GitHub/OpenAI theme is the default for all @frontmcp/ui components. + * The GitHub/OpenAI theme is the default for all @frontmcp/uipack components. * - * @module @frontmcp/ui/theme/presets + * @module @frontmcp/uipack/theme/presets */libs/uipack/src/theme/presets/github-openai.d.ts-1-23 (1)
1-23: Fix package references in JSDoc to match actual location.This file is located in
libs/uipackbut the JSDoc documentation references@frontmcp/ui:
- Line 11: Example imports from
'@frontmcp/ui'- Line 22: Module path is
@frontmcp/ui/theme/presets/github-openaiBoth should reference
@frontmcp/uipackto match the file's actual package location and the PR's package split architecture.🔎 Suggested fix
* @example * ```typescript - * import { GITHUB_OPENAI_THEME, createTheme } from '@frontmcp/ui'; + * import { GITHUB_OPENAI_THEME, createTheme } from '@frontmcp/uipack'; * * // Use directly * baseLayout(content, { theme: GITHUB_OPENAI_THEME }); * * // Or extend * const myTheme = createTheme({ * colors: { semantic: { primary: '#0969da' } }, * }); * ``` * - * @module @frontmcp/ui/theme/presets/github-openai + * @module @frontmcp/uipack/theme/presets/github-openai */libs/sdk/jest.config.ts-19-25 (1)
19-25: Add build requirement note to Jest configuration.The moduleNameMapper patterns are correctly configured for the package exports structure (
./*maps todist/*/index.js). However, tests will fail if the dist directories are not built first. Add a comment documenting this dependency:coverageDirectory: 'test-output/jest/coverage', + // Map @frontmcp/uipack and @frontmcp/ui imports to the built dist for tests. + // Ensure packages are built: nx build uipack && nx build ui // Map @frontmcp/uipack imports to the built dist for tests moduleNameMapper: { '^@frontmcp/uipack$': '<rootDir>/../uipack/dist/index.js', '^@frontmcp/uipack/(.*)$': '<rootDir>/../uipack/dist/$1/index.js', '^@frontmcp/ui$': '<rootDir>/../ui/dist/index.js', '^@frontmcp/ui/(.*)$': '<rootDir>/../ui/dist/$1/index.js', },libs/uipack/src/bundler/file-cache/hash-calculator.ts-97-98 (1)
97-98: Unusedexternalsparameter.The
externalsparameter is defined inComponentHashOptionsand destructured at line 183, but it's never used in the function body. The docstring mentions "External packages (excluded from hash)" but no exclusion logic exists.Either implement the exclusion logic or remove the parameter to avoid confusion.
🔎 Option 1: Implement externals filtering in collectLocalDependencies
-async function collectLocalDependencies( +async function collectLocalDependencies( filePath: string, baseDir: string, collected: Set<string>, maxDepth: number, currentDepth: number, + externals: string[] = [], ): Promise<void> { // ... existing code ... for (const importPath of imports) { // Skip external packages - if (!importPath.startsWith('.') && !importPath.startsWith('/')) { + if (!importPath.startsWith('.') && !importPath.startsWith('/') || externals.includes(importPath)) { continue; }🔎 Option 2: Remove unused parameter
export interface ComponentHashOptions { // ... - /** - * External packages (excluded from hash). - */ - externals?: string[]; // ... }Also applies to: 179-187
libs/uipack/src/theme/theme.d.ts-14-36 (1)
14-36: Update import path in documentation example.The example imports from
@frontmcp/uibut this file is now part of@frontmcp/uipackper the PR objective to split packages. The import path should be updated to reflect the new package structure.🔎 Suggested fix
* @example * ```typescript -* import { createTheme, DEFAULT_THEME } from '@frontmcp/ui'; +* import { createTheme, DEFAULT_THEME } from '@frontmcp/uipack'; * * // Use the default GitHub/OpenAI themelibs/uipack/src/renderers/index.ts-1-28 (1)
1-28: Documentation references incorrect package name.Same issue as the
.d.tsfile - the@moduletag and import examples reference@frontmcp/uiinstead of@frontmcp/uipack. The comment on line 62 correctly notes the package split, but the header documentation is inconsistent.🔎 Proposed fix
/** * Renderer Module * * Multi-framework rendering system for Tool UI templates. * Supports HTML, React, and MDX templates with auto-detection. * - * @module @frontmcp/ui + * @module @frontmcp/uipack/renderers * * @example Basic usage with auto-detection * ```typescript - * import { rendererRegistry } from '@frontmcp/ui'; + * import { rendererRegistry } from '@frontmcp/uipack/renderers'; * * // HTML template * const htmlTemplate = (ctx) => `<div>${ctx.output.name}</div>`; * const result = await rendererRegistry.render(htmlTemplate, context); * ``` * * @example Register React renderer * ```typescript - * import { rendererRegistry, reactRenderer } from '@frontmcp/ui'; + * import { rendererRegistry } from '@frontmcp/uipack/renderers'; + * import { reactRenderer } from '@frontmcp/ui/renderers'; * * rendererRegistry.register(reactRenderer);libs/uipack/src/renderers/index.d.ts-7-27 (1)
7-27: Documentation references incorrect package name.The
@moduletag and import examples reference@frontmcp/ui, but this file is in@frontmcp/uipack. This will confuse users trying to use the examples.🔎 Proposed fix
- * @module @frontmcp/ui + * @module @frontmcp/uipack/renderers * * @example Basic usage with auto-detection * ```typescript - * import { rendererRegistry } from '@frontmcp/ui'; + * import { rendererRegistry } from '@frontmcp/uipack/renderers'; * * // HTML template * const htmlTemplate = (ctx) => `<div>${ctx.output.name}</div>`; * const result = await rendererRegistry.render(htmlTemplate, context); * ``` * * @example Register React renderer * ```typescript - * import { rendererRegistry, reactRenderer } from '@frontmcp/ui'; + * import { rendererRegistry } from '@frontmcp/uipack/renderers'; + * import { reactRenderer } from '@frontmcp/ui/renderers'; * * rendererRegistry.register(reactRenderer);libs/uipack/src/renderers/cache.d.ts-127-144 (1)
127-144:ComponentCacheis not exported from the barrel file.The
ComponentCacheclass andcomponentCacheinstance are defined incache.d.tsandcache.tsbut are not re-exported fromlibs/uipack/src/renderers/index.ts. If this is intentional (internal-only), add a comment to clarify. If it should be public, add it to the barrel exports.libs/uipack/src/theme/cdn.d.ts-16-25 (1)
16-25: Update import path in the example.The example shows importing from
@frontmcp/ui, but these CDN functions are exported only from@frontmcp/uipack. Update the import to:import { buildCdnScriptsFromTheme, DEFAULT_THEME } from '@frontmcp/uipack';libs/uipack/src/renderers/registry.d.ts-130-145 (1)
130-145: Documentation example shows incorrect import path.The example imports from
@frontmcp/ui, but this file is part of@frontmcp/uipack. Since this PR splits the packages, the documentation should reflect the correct import path for the package whererendererRegistryis defined.Suggested fix
* ```typescript - * import { rendererRegistry } from '@frontmcp/ui'; - * import { reactRenderer } from '@frontmcp/ui'; - * import { mdxRenderer } from '@frontmcp/ui'; + * import { rendererRegistry } from '@frontmcp/uipack'; + * import { reactRenderer } from '@frontmcp/ui'; + * import { mdxRenderer } from '@frontmcp/ui'; * * rendererRegistry.register(reactRenderer); * rendererRegistry.register(mdxRenderer); * ```Note:
reactRendererandmdxRenderermay still come from@frontmcp/uiif they contain React dependencies.libs/uipack/src/bridge-runtime/iife-generator.ts-333-347 (1)
333-347: Security: Origin trust-on-first-message pattern has inherent risks.When
trustedOriginsis empty, the code trusts the first message's origin unconditionally (lines 339-343). While documented, this trust-on-first-message pattern can be vulnerable in scenarios where an attacker's iframe loads before the legitimate parent sends a message.Consider documenting this limitation more prominently or requiring explicit
trustedOriginsconfiguration for production use.libs/uipack/src/bridge-runtime/iife-generator.ts-937-945 (1)
937-945: Regex-based minification may break code in edge cases and should not be used for production.Naive minification tools can break code by interfering with string literals and regular expressions. This function's regex patterns are particularly risky:
/\s+/gcollapses all whitespace, including inside string literals like"hello world"→"helloworld"/\s*([{};,:()[\]])\s*/gremoves spaces around punctuation indiscriminately, breaking strings like"a" + " " + "b"- Template literals with intentional whitespace are corrupted
For production, consider AST-based tools like terser or esbuild. If this function must be used, document that it only handles generated code with predictable content, not arbitrary JavaScript.
libs/uipack/src/runtime/index.d.ts-1-8 (1)
1-8: Inconsistent@moduletag with package location.The
@moduleJSDoc tag references@frontmcp/ui/runtime, but this file is located inlibs/uipack. For the package split, this should likely be@frontmcp/uipack/runtimeto match the actual package structure.🔎 Proposed fix
/** * MCP Bridge Runtime Module * * Provides the infrastructure for rendering tool UI templates * that work across multiple host environments (OpenAI, Claude, ext-apps). * - * @module @frontmcp/ui/runtime + * @module @frontmcp/uipack/runtime */libs/uipack/src/runtime/wrapper.d.ts-308-320 (1)
308-320: Aligncspproperty across shell widget options interfaces.
WrapLeanWidgetShellOptionslackscspin itsuiConfig, while bothWrapHybridWidgetShellOptionsandWrapStaticWidgetOptionsinclude it. However, neitherwrapHybridWidgetShellnorwrapStaticWidgetUniversalimplementations actually use thecspproperty—the implementations only extractwidgetAccessible. This suggests thecspdeclaration in the hybrid and static options is either dead code or an incomplete implementation. Either addcsptoWrapLeanWidgetShellOptionsfor consistency with the hybrid shell, or remove it from hybrid and static if it's not needed.
🧹 Nitpick comments (26)
libs/uipack/project.json (1)
22-40: Consider extracting shared entry points to reduce duplication.The
additionalEntryPointsarray is duplicated betweenbuild-cjsandbuild-esmtargets. While JSON doesn't support variables, you could consider migrating to aproject.tsconfiguration or accepting this duplication for transparency. If staying with JSON, just be mindful to update both arrays when adding new entry points.Also applies to: 61-79
libs/ui/src/renderers/react.renderer.ts (2)
206-216: UseescapeHtml()utility instead of manual HTML escaping.The manual HTML attribute escaping should be replaced with the
escapeHtml()utility function to ensure consistent XSS prevention across the codebase.Based on coding guidelines: libs/ui/src/**/*.ts should always use
escapeHtml()utility for all user-provided content.🔎 Proposed refactor using escapeHtml utility
First, import the utility at the top of the file:
import { isReactComponent, containsJsx, hashString, transpileJsx, executeTranspiledCode, transpileCache, + escapeHtml, } from '@frontmcp/uipack/renderers';Then replace the manual escaping:
// If hydration is enabled, wrap with hydration markers if (options?.hydrate) { const componentName = (Component as { name?: string }).name || 'Component'; - // Full HTML attribute escaping to prevent XSS - const escapedProps = JSON.stringify(props) - .replace(/&/g, '&') - .replace(/'/g, ''') - .replace(/</g, '<') - .replace(/>/g, '>'); + const escapedProps = escapeHtml(JSON.stringify(props)); return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`; }
208-215: Consider escaping the componentName in HTML attribute.While
componentNameis derived from the function'snameproperty rather than direct user input, it's being used in an HTML attribute (data-hydrate) without escaping. For defense-in-depth, consider escaping it as well.🔎 Proposed enhancement
// If hydration is enabled, wrap with hydration markers if (options?.hydrate) { const componentName = (Component as { name?: string }).name || 'Component'; const escapedProps = escapeHtml(JSON.stringify(props)); - return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`; + return `<div data-hydrate="${escapeHtml(componentName)}" data-props='${escapedProps}'>${html}</div>`; }libs/uipack/src/runtime/renderer-runtime.d.ts (1)
49-123: Consider clarifying lifecycle and error handling in documentation.The class API is well-structured with a clear lifecycle pattern. However, consider enhancing the JSDoc to clarify:
- Can
init()be called multiple times? Is it idempotent?- What happens if
render()is called beforeinit()?- What errors might be thrown by each method?
- Can
render()be called multiple times with different targets?These clarifications would help consumers use the API correctly and handle errors appropriately.
libs/uipack/src/adapters/response-builder.ts (1)
15-15: Barrel import refactor improves module organization.The import has been refactored from a direct file path (
../utils/safe-stringify) to a barrel export (../utils). This is good practice for maintaining a cleaner public API surface within the package.As per coding guidelines: Export public API through barrel files.
Quick verification of the barrel export:
#!/bin/bash # Verify ../utils barrel exports safeStringify echo "=== Checking libs/uipack/src/utils/index.ts ===" if [ -f "libs/uipack/src/utils/index.ts" ]; then rg -n "export.*safeStringify" libs/uipack/src/utils/index.ts else echo "No index.ts found, checking for index.d.ts" fd -t f "index\.(ts|d\.ts)" libs/uipack/src/utils/ filibs/uipack/src/dependency/import-parser.d.ts (1)
1-14: Consider AST-based parsing for more reliable import detection.The documented limitations of regex-based parsing (lines 8-11) pose risks for production use:
- False negatives could miss critical dependencies
- False positives could bloat bundles unnecessarily
- Comments and strings can cause incorrect matches
Modern AST parsers like
@babel/parser, TypeScript's compiler API, oracornwould provide accurate, reliable import detection without these limitations.Rationale for AST-based approach
AST-based parsing:
- Correctly handles imports in comments/strings
- Supports multi-line and complex import formats
- Handles template literal imports
- Provides precise location information
- Is the industry standard for production tooling
While regex parsing may be faster, the reliability trade-off for a bundler/dependency resolution system is significant.
libs/uipack/src/bundler/cache.ts (1)
292-302: Consider stronger hash for production use.FNV-1a is fast and adequate for small-to-medium cache sizes, but has higher collision rates compared to modern algorithms like xxHash or Node's built-in crypto hashes. For a production bundler cache with potentially thousands of entries, collisions could lead to incorrect cache hits.
Alternative: Use Node.js built-in crypto
For better collision resistance with minimal performance impact:
import { createHash } from 'crypto'; export function hashContent(content: string): string { return createHash('sha256') .update(content) .digest('hex') .slice(0, 16); // Use first 16 chars for reasonable key length }This provides cryptographic-strength hashing at acceptable speed for cache key generation.
libs/uipack/src/bundler/types.ts (1)
543-627: Consider security implications ofSharedArrayBufferin allowed globals.
SharedArrayBufferat line 623 can be used for timing attacks (Spectre) in browser contexts. While this may be intentional for legitimate use cases, consider documenting why it's included or making it opt-in depending on your threat model.libs/uipack/src/bundler/sandbox/enclave-adapter.ts (1)
371-380: Verify intentional exposure of__filenameand__dirnamein wrapped code.Lines 376-377 define
__filenameand__dirnameas local constants inside the wrapped code, but these identifiers are listed inDANGEROUS_GLOBAL_KEYS. While they're safe here (hardcoded dummy values, not user-controlled), this could be confusing if the security model is later audited. Consider adding a comment explaining this is intentional for CommonJS compatibility.libs/ui/src/bridge/types.d.ts (1)
356-393: Consider API surface consistency betweenFrontMcpBridgeInterfaceandPlatformAdapter.
FrontMcpBridgeInterfaceexposes a subset ofPlatformAdaptermethods. Notably missing:getUserAgent,getLocale,getSafeArea,getViewport,getHostContext,getStructuredContent,getWidgetState,requestClose. If intentional (minimal public API), this is fine; otherwise, consider exposing commonly-needed methods likegetHostContext()for full context access.libs/uipack/src/bundler/__tests__/cache.test.ts (1)
35-45: Suggest adding constructor validation tests.The test suite is comprehensive, but consider adding tests for constructor validation to ensure robust error handling:
- Invalid options validation (negative maxSize, negative TTL)
- Boundary conditions (maxSize=0, ttl=0)
- Type safety for options (non-numeric values)
🔎 Proposed additional test cases
describe('Constructor Validation', () => { it('should handle maxSize=0', () => { const cache = new BundlerCache({ maxSize: 0, ttl: 5000 }); cache.set('key1', createMockResult()); // Should either reject or handle gracefully expect(cache.size).toBeLessThanOrEqual(0); }); it('should handle ttl=0', () => { const cache = new BundlerCache({ maxSize: 10, ttl: 0 }); cache.set('key1', createMockResult()); // Entries should expire immediately expect(cache.get('key1')).toBeUndefined(); }); it('should handle negative maxSize gracefully', () => { // Verify behavior or throw appropriate error expect(() => new BundlerCache({ maxSize: -1, ttl: 5000 })).toThrow(); }); it('should handle negative ttl gracefully', () => { // Verify behavior or throw appropriate error expect(() => new BundlerCache({ maxSize: 10, ttl: -1 })).toThrow(); }); });libs/uipack/src/bundler/file-cache/storage/redis.ts (1)
299-312: Consider batching or sampling for large caches.The size recalculation iterates all keys sequentially, which could be slow for large caches. Consider adding a threshold to skip full recalculation or using SCAN with a pipeline for batch fetching if performance becomes an issue in production.
libs/uipack/src/renderers/html.renderer.d.ts (1)
17-21: Consider exportingHtmlTemplatetype for external consumers.The
HtmlTemplatetype is used in the publicrendermethod signature (line 100-104) but is not exported. Consumers may need this type to properly type their templates when usingHtmlRenderer. Similarly,TemplateBuilderFncould be useful for consumers building template functions.🔎 Suggested export
-type TemplateBuilderFn<In, Out> = (ctx: TemplateContext<In, Out>) => string; +export type TemplateBuilderFn<In, Out> = (ctx: TemplateContext<In, Out>) => string; /** * Types this renderer can handle. */ -type HtmlTemplate<In = unknown, Out = unknown> = string | TemplateBuilderFn<In, Out>; +export type HtmlTemplate<In = unknown, Out = unknown> = string | TemplateBuilderFn<In, Out>;libs/uipack/src/bundler/file-cache/hash-calculator.ts (1)
330-349: Consider using async file existence checks for better I/O performance.
resolveImportPathuses multiple synchronousexistsSynccalls in a loop. In a function called from an async context (collectLocalDependencies), consider usingfs/promisesfor non-blocking I/O, especially when resolving many imports.🔎 Suggested async alternative
+import { access } from 'fs/promises'; +import { constants } from 'fs'; + +async function fileExists(path: string): Promise<boolean> { + try { + await access(path, constants.F_OK); + return true; + } catch { + return false; + } +} + /** * Resolve an import path to an absolute file path. */ -function resolveImportPath(importPath: string, fromDir: string): string | undefined { +async function resolveImportPath(importPath: string, fromDir: string): Promise<string | undefined> { const extensions = ['', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs']; for (const ext of extensions) { const fullPath = join(fromDir, importPath + ext); - if (existsSync(fullPath)) { + if (await fileExists(fullPath)) { return fullPath; } } // ... similar for index fileslibs/uipack/src/bundler/file-cache/storage/interface.ts (1)
181-189: Consider logging when size calculation fails.The fallback to
0for circular references or BigInt values is reasonable, but silently returning0could mask issues or lead to incorrect size tracking for cache eviction. Consider adding a console warning in development mode.🔎 Suggested improvement
export function calculateManifestSize(manifest: ComponentBuildManifest): number { // Approximate size by serializing to JSON try { return Buffer.byteLength(JSON.stringify(manifest), 'utf8'); } catch { // Fallback for circular references or BigInt values + if (process.env.NODE_ENV !== 'production') { + console.warn('[file-cache] Could not calculate manifest size, falling back to 0'); + } return 0; } }libs/uipack/src/runtime/types.d.ts (3)
72-72: Consider more specific typing for React components.The
(props: any) => anytype for React components is very permissive. While React component typing can be complex, consider a more specific type to improve type safety.Potential alternative
- export type ToolUITemplate<In = unknown, Out = unknown> = TemplateBuilderFn<In, Out> | string | ((props: any) => any); + export type ToolUITemplate<In = unknown, Out = unknown> = TemplateBuilderFn<In, Out> | string | ((props: Record<string, unknown>) => unknown);Note: If this needs to accept actual React components, you may need to import React types or use a more permissive type. The current approach may be acceptable given the React/MDX integration requirements.
146-146:Record<string, any>for MDX components.Similar to the
ToolUITemplatetype, this usesanyfor MDX component values. This is a pragmatic choice given MDX's dynamic nature, but worth noting for future type safety improvements if the React/MDX integration stabilizes.
162-162: Redundant type alias.
UICSPTypeis an alias forUIContentSecurityPolicybut is only used once (line 281). Consider usingUIContentSecurityPolicydirectly for clarity.Suggested simplification
- type UICSPType = UIContentSecurityPolicy;And on line 281:
- csp?: UICSPType; + csp?: UIContentSecurityPolicy;libs/uipack/src/bundler/file-cache/storage/filesystem.ts (2)
187-191: Consider logging cache read failures in debug mode.The empty catch block silently swallows all errors. While returning
undefinedon cache miss is correct behavior, logging the error in debug mode (similar to line 179-181) would help diagnose issues.🔎 Suggested improvement
- } catch { + } catch (err) { + if (process.env['DEBUG']) { + console.debug(`[FilesystemStorage] Failed to read cache entry ${key}: ${err}`); + } this.stats.misses++; this.updateHitRate(); return undefined; }
456-465: Minor stats inconsistency when removing corrupted files.When a corrupted file is removed,
stats.entriesis decremented butstats.totalSizeremains unchanged since the file's size is unknown. This can causetotalSizeto gradually overestimate actual usage.This is acceptable for an edge case, but you might consider resetting stats via
loadStats()after removing corrupted files if accuracy becomes important.libs/uipack/src/bridge-runtime/iife-generator.ts (1)
348-367: Verify timeout behavior for long-running tool calls.The 10-second timeout (line 361) may be too short for complex server-side tool operations. Consider making this configurable through
IIFEGeneratorOptions.🔎 Proposed enhancement
Add timeout configuration to options:
export interface IIFEGeneratorOptions { /** Include specific adapters (all if not specified) */ adapters?: ('openai' | 'ext-apps' | 'claude' | 'gemini' | 'generic')[]; /** Enable debug logging */ debug?: boolean; /** Trusted origins for ext-apps adapter */ trustedOrigins?: string[]; /** Minify the output */ minify?: boolean; + /** Request timeout in milliseconds for ext-apps adapter */ + requestTimeout?: number; }libs/uipack/src/bundler/file-cache/component-builder.ts (1)
231-235: Silent warning on dependency resolution failure may hide issues.When external dependency resolution fails, the code logs a warning but continues. This could lead to runtime errors if the bundled code expects the external to be available. Consider making this behavior configurable.
🔎 Proposed enhancement
export interface ComponentBuildOptions { // ... existing options + /** + * How to handle external resolution failures. + * - 'warn': Log warning and bundle the dependency (default) + * - 'error': Throw an error + * @default 'warn' + */ + onExternalResolutionFailure?: 'warn' | 'error'; }libs/uipack/src/renderers/types.d.ts (1)
319-321: Consider usingunknowninstead ofanyfor MDX component props.Per coding guidelines,
anytypes require strong justification. While theReactComponentTypehas documented justification (avoiding React types),mdxComponentsusesanywithout similar reasoning. Consider usingunknownfor stricter typing.🔎 Proposed refinement
* } * ``` */ - mdxComponents?: Record<string, (props: any) => any>; + mdxComponents?: Record<string, (props: unknown) => unknown>;Note: If
anyis intentional here for React/JSX compatibility similar toReactComponentType, adding a brief comment explaining this would satisfy the coding guidelines requirement for justification.libs/uipack/src/dependency/types.d.ts (1)
659-708: Consider usingunknowninstead of importingZodTypeAnyfor schema fields.The
outputSchemaandinputSchemafields useZodTypeAnywhich is a Zod-specific type. While this is technically correct, it creates a tight coupling to Zod's internal types. Per coding guidelines, consider whetherunknownwould be more appropriate for the public API surface, or document explicitly that Zod schemas are required.libs/uipack/src/index.ts (2)
35-39: Consider explicit named exports instead ofexport *for better API control.Using
export * from './types're-exports everything from the types module, which could inadvertently expose internal types. Per learnings, barrel files should "export users' needed items, no legacy exports with different names." Consider explicit named exports for tighter API control.Example of more controlled exports
// Instead of: export * from './types'; // Consider explicit exports: export type { UITemplateConfig, TemplateContext, // ... other public types } from './types';
146-156: Consider explicit named exports for tool-template, base-template, and renderers modules.Using
export *for these modules may expose internal implementation details. Based on learnings about barrel file best practices, explicit named exports provide better API surface control.Recommendation
Review the exports from
./tool-template,./base-template, and./renderersto determine which are public API vs internal implementation, then use explicit named exports for public items only.
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (3)
libs/uipack/src/bridge-runtime/iife-generator.ts (1)
333-347: Security concern: Trust-on-first-use pattern tracked.This trust-on-first-use pattern for ext-apps origin validation was previously flagged in past reviews. While the code includes a security warning comment (lines 337-339), the underlying security concern remains: a malicious iframe could establish trust by sending the first message.
This is a duplicate of the existing security concern from past reviews.
docs/draft/docs/ui/api-reference/runtime.mdx (1)
159-159: Invalid import path@frontmcp/uipack/componentsused throughout the file.This issue was already flagged in a previous review. All 15 import statements in this file use the non-existent
@frontmcp/uipack/componentssubpath. Per the prior verification, these should be changed to@frontmcp/uipack/runtime.Also applies to: 288-288, 299-299, 311-311, 329-329, 363-363, 392-392, 405-405, 418-418, 429-429, 444-444, 467-467, 477-477, 495-495, 511-511
libs/uipack/src/bundler/file-cache/component-builder.ts (1)
460-465: Security:new Function()code execution risk (already flagged).This security concern was identified in a previous review. The default use of
new Function()at line 463 is equivalent toeval()and can execute arbitrary code. While the comment at lines 456-459 warns about this, the insecure default remains.The previous review suggested either requiring
executeCodeor using a safe sandbox (Node.jsvmmodule). This issue should be addressed before merging.
🧹 Nitpick comments (6)
libs/uipack/src/bridge-runtime/iife-generator.ts (2)
938-946: Consider using a proper JavaScript minifier.The current
minifyJSfunction is very basic—it only removes comments and collapses whitespace using regex. This approach can be error-prone and doesn't provide the optimization benefits of proper minification (dead code elimination, identifier shortening, etc.).Consider using a production-grade minifier like
terseroresbuildfor theminify: trueoption:🔎 Recommended refactor using terser
+import { minify as terserMinify } from 'terser'; + function minifyJS(code: string): string { + // For production, use a proper minifier + if (process.env.NODE_ENV === 'production') { + const result = await terserMinify(code, { + compress: true, + mangle: true, + }); + return result.code || code; + } + + // Fallback to basic minification for development return code .replace(/\/\*[\s\S]*?\*\//g, '') .replace(/\/\/.*$/gm, '') .replace(/\s+/g, ' ') .replace(/\s*([{};,:()[\]])\s*/g, '$1') .replace(/;\}/g, '}') .trim(); }
863-868: Improve error recovery in button reset.The button state reset logic in the data-tool-call handler could fail if the button element is removed from the DOM during the async operation, leaving the UI in an inconsistent state.
🔎 Proposed enhancement for error recovery
// Helper to reset button state function resetButton() { + // Check if element is still in DOM before resetting + if (!document.body.contains(target)) { + return; + } target.innerHTML = originalContent; target.disabled = originalDisabled; target.classList.remove('opacity-50', 'cursor-not-allowed'); }libs/uipack/src/bundler/file-cache/storage/filesystem.ts (2)
432-478: Consider optimizing LRU eviction to avoid O(n) file reads.The current implementation reads every cache file to find the least recently used entry. With many cached builds, this becomes a performance bottleneck.
Consider maintaining an in-memory index of
{ key, lastAccessedAt, size, filePath }that is:
- Loaded during
initialize()by scanning the directory once- Updated on each
get(),set(), anddelete()operation- Persisted periodically or on
close()This reduces eviction from O(n) file I/O to O(n) memory scan, and with a min-heap or sorted structure, can be O(log n).
Alternatively, if keeping the simple approach, document the performance characteristics in the class-level JSDoc.
111-487: Document concurrency limitations for multi-process environments.The filesystem storage lacks file locking, so concurrent processes can create race conditions:
- Two processes may simultaneously evict different entries, leading to incorrect stats
- Concurrent writes to the same key may result in partial writes or corruption
- Stats tracking can drift when multiple processes modify the cache
For production use with multiple processes, consider:
- Using Redis storage (
RedisStorage) which has atomic operations- Implementing file locking (e.g., using
lockfileorproper-lockfilepackages)- Restricting filesystem cache to single-process development environments (document this limitation)
- Using process-level cache coordination (e.g., through a primary process that manages cache)
Add a note in the class JSDoc about the single-process limitation.
libs/uipack/src/bundler/file-cache/component-builder.ts (2)
274-277: Document caching behavior when SSR fails.If SSR is requested (
ssr: true) but fails (line 479-481 returnsundefined), the manifest at line 302 is still cached withssrHtml: undefined. This means:
- Subsequent cache hits will serve a manifest without SSR output
- Users expecting SSR won't get it without clearing the cache
Consider either:
- Not caching when SSR fails (check
ssrHtmlbefore caching)- Including SSR status in the cache key/hash
- Documenting this behavior clearly
🔎 Proposed enhancement to handle SSR failures
// Optionally perform SSR let ssrHtml: string | undefined; if (ssr) { ssrHtml = await this.renderSSR(bundleResult.code, ssrContext, resolvedDeps, executeCode); + + // If SSR was requested but failed, consider it a build failure + if (!ssrHtml) { + console.warn(`SSR requested for ${toolName} but failed - not caching this build`); + // Return the manifest without caching + return { + manifest: { + version: '1.0', + buildId: randomUUID(), + toolName, + entryPath: absoluteEntryPath, + contentHash: hashResult.hash, + dependencies: resolvedDeps, + outputs: { code: bundleResult.code, sourceMap: bundleResult.map, ssrHtml }, + importMap, + metadata: { + createdAt: new Date().toISOString(), + buildTimeMs: performance.now() - startTime, + totalSize: Buffer.byteLength(bundleResult.code, 'utf8'), + bundlerVersion: bundleResult.bundlerVersion, + }, + }, + cached: false, + buildTimeMs: performance.now() - startTime, + }; + } }Alternatively, document the current behavior in the
ComponentBuildOptions.ssrJSDoc.Also applies to: 302-302
15-22: Consider using package imports instead of relative paths for consistency.The imports use relative paths (
../../dependency/types) rather than the@frontmcp/uipack/dependencynamespace mentioned in the AI summary. While relative imports work, using package imports would be more consistent with the stated goal of splitting packages.If the package structure is already set up with exports, consider:
-import type { - ComponentBuildManifest, - FileBundleOptions, - CDNDependency, - CDNPlatformType, - ResolvedDependency, - ImportMap, -} from '../../dependency/types'; +import type { + ComponentBuildManifest, + FileBundleOptions, + CDNDependency, + CDNPlatformType, + ResolvedDependency, + ImportMap, +} from '@frontmcp/uipack/dependency';This aligns with the package split objective and makes imports more stable if internal structure changes.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
docs/draft/docs/guides/ui-library.mdxdocs/draft/docs/servers/tools.mdxdocs/draft/docs/ui/advanced/platforms.mdxdocs/draft/docs/ui/api-reference/runtime.mdxlibs/sdk/src/tool/ui/ui-resource.handler.tslibs/uipack/src/bridge-runtime/iife-generator.tslibs/uipack/src/bundler/cache.tslibs/uipack/src/bundler/file-cache/component-builder.tslibs/uipack/src/bundler/file-cache/storage/filesystem.tslibs/uipack/src/dependency/import-map.tslibs/uipack/src/renderers/index.d.tslibs/uipack/src/renderers/index.tslibs/uipack/src/renderers/registry.d.tslibs/uipack/src/renderers/registry.test.tslibs/uipack/src/renderers/registry.tslibs/uipack/src/runtime/index.d.tslibs/uipack/src/runtime/index.tslibs/uipack/src/runtime/mcp-bridge.d.tslibs/uipack/src/runtime/mcp-bridge.tslibs/uipack/src/theme/cdn.tslibs/uipack/src/theme/presets/github-openai.tslibs/uipack/src/theme/presets/index.tslibs/uipack/src/theme/theme.ts
✅ Files skipped from review due to trivial changes (2)
- libs/uipack/src/theme/presets/index.ts
- libs/uipack/src/theme/presets/github-openai.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- libs/sdk/src/tool/ui/ui-resource.handler.ts
- docs/draft/docs/guides/ui-library.mdx
- libs/uipack/src/renderers/index.ts
- libs/uipack/src/runtime/mcp-bridge.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.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/theme/theme.tslibs/uipack/src/theme/cdn.tslibs/uipack/src/runtime/index.tslibs/uipack/src/bundler/cache.tslibs/uipack/src/dependency/import-map.tslibs/uipack/src/bridge-runtime/iife-generator.tslibs/uipack/src/renderers/registry.tslibs/uipack/src/renderers/registry.d.tslibs/uipack/src/renderers/registry.test.tslibs/uipack/src/bundler/file-cache/component-builder.tslibs/uipack/src/runtime/mcp-bridge.d.tslibs/uipack/src/runtime/index.d.tslibs/uipack/src/bundler/file-cache/storage/filesystem.tslibs/uipack/src/renderers/index.d.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/theme/theme.tslibs/uipack/src/theme/cdn.tslibs/uipack/src/runtime/index.tslibs/uipack/src/bundler/cache.tslibs/uipack/src/dependency/import-map.tslibs/uipack/src/bridge-runtime/iife-generator.tslibs/uipack/src/renderers/registry.tslibs/uipack/src/renderers/registry.d.tslibs/uipack/src/renderers/registry.test.tslibs/uipack/src/bundler/file-cache/component-builder.tslibs/uipack/src/runtime/mcp-bridge.d.tslibs/uipack/src/runtime/index.d.tslibs/uipack/src/bundler/file-cache/storage/filesystem.tslibs/uipack/src/renderers/index.d.ts
docs/draft/docs/**
⚙️ CodeRabbit configuration file
docs/draft/docs/**: This folder holds the draft/source docs that humans are expected to edit. When authors want to add or change documentation, they should do it here. The Codex workflow uses these drafts, together with the code diff, to generate the latest docs under docs/docs/. As a reviewer: - Encourage contributors to add/update content here instead of docs/docs/. - It is fine to do structural/content feedback here (clarity, examples, etc).
Files:
docs/draft/docs/ui/advanced/platforms.mdxdocs/draft/docs/servers/tools.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
docs/**
⚙️ CodeRabbit configuration file
docs/**: Repository documentation for the SDK, using MDX and hosted by Mintlify. See more specific rules for: - docs/docs/** (latest rendered docs, automation-only) - docs/v/** (archived versions, read-only) - docs/draft/docs/** (human-editable drafts) - docs/blogs/** (blogs, human edited) - docs/docs.json (Mintlify navigation)
Files:
docs/draft/docs/ui/advanced/platforms.mdxdocs/draft/docs/servers/tools.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
**/*.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/renderers/registry.test.ts
🧠 Learnings (19)
📓 Common learnings
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
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
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Hard-code CDN URLs only in theme presets; always reference theme.cdn configuration in component code
Applied to files:
libs/uipack/src/theme/theme.tslibs/uipack/src/theme/cdn.tsdocs/draft/docs/ui/advanced/platforms.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/theme/presets/**/*.ts : Implement GitHub/OpenAI gray-black monochromatic palette as the default theme
Applied to files:
libs/uipack/src/theme/theme.tsdocs/draft/docs/ui/advanced/platforms.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Add JSDoc examples with example tags showing basic usage and options patterns for all components
Applied to files:
libs/uipack/src/theme/cdn.tsdocs/draft/docs/servers/tools.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
📚 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/runtime/index.tslibs/uipack/src/bundler/cache.tslibs/uipack/src/bridge-runtime/iife-generator.tslibs/uipack/src/bundler/file-cache/component-builder.tslibs/uipack/src/runtime/index.d.tsdocs/draft/docs/ui/api-reference/runtime.mdxlibs/uipack/src/renderers/index.d.ts
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.test.ts : Test behavior across platform configurations (OpenAI, Claude, Gemini, ngrok) where applicable
Applied to files:
docs/draft/docs/ui/advanced/platforms.mdxlibs/uipack/src/bridge-runtime/iife-generator.tslibs/uipack/src/renderers/registry.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: FrontMCP is a TypeScript-first schema validation framework - all types should align with MCP protocol definitions
Applied to files:
docs/draft/docs/ui/advanced/platforms.mdxdocs/draft/docs/servers/tools.mdxlibs/uipack/src/runtime/mcp-bridge.d.tslibs/uipack/src/runtime/index.d.tsdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Support platform-aware rendering by detecting network capabilities (open vs blocked) and script loading strategies (external vs inline)
Applied to files:
docs/draft/docs/ui/advanced/platforms.mdx
📚 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 : Use `getCapabilities()` method for dynamic capability exposure instead of hardcoding capabilities
Applied to files:
docs/draft/docs/ui/advanced/platforms.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.test.ts : Write validation tests covering invalid variant/options, unknown properties, and valid option acceptance
Applied to files:
docs/draft/docs/ui/advanced/platforms.mdxlibs/uipack/src/renderers/registry.test.tsdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Always use `escapeHtml()` utility for all user-provided content to prevent XSS vulnerabilities
Applied to files:
libs/uipack/src/dependency/import-map.tslibs/uipack/src/bundler/file-cache/component-builder.tsdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.test.ts : Test HTML escaping for user-provided content to prevent XSS attacks
Applied to files:
libs/uipack/src/dependency/import-map.tsdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
Applied to files:
libs/uipack/src/bundler/file-cache/component-builder.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/runtime/mcp-bridge.d.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 : Use specific error classes with MCP error codes instead of generic errors
Applied to files:
libs/uipack/src/runtime/mcp-bridge.d.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/runtime/index.d.ts
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
Applied to files:
docs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Validate component options using `validateOptions()` helper and return error box on validation failure
Applied to files:
docs/draft/docs/ui/api-reference/runtime.mdx
📚 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:
docs/draft/docs/ui/api-reference/runtime.mdx
🧬 Code graph analysis (2)
libs/uipack/src/renderers/registry.test.ts (2)
libs/uipack/src/runtime/index.d.ts (1)
TemplateContext(21-21)libs/uipack/src/runtime/index.ts (1)
TemplateContext(24-24)
libs/uipack/src/runtime/mcp-bridge.d.ts (3)
libs/uipack/src/runtime/index.d.ts (5)
MCP_BRIDGE_RUNTIME(28-28)getMCPBridgeScript(28-28)isMCPBridgeSupported(28-28)FRONTMCP_BRIDGE_RUNTIME(30-30)PLATFORM_BRIDGE_SCRIPTS(31-31)libs/uipack/src/runtime/index.ts (5)
MCP_BRIDGE_RUNTIME(33-33)getMCPBridgeScript(33-33)isMCPBridgeSupported(33-33)FRONTMCP_BRIDGE_RUNTIME(37-37)PLATFORM_BRIDGE_SCRIPTS(38-38)libs/uipack/src/runtime/mcp-bridge.ts (5)
MCP_BRIDGE_RUNTIME(46-508)getMCPBridgeScript(514-518)isMCPBridgeSupported(523-534)FRONTMCP_BRIDGE_RUNTIME(550-550)PLATFORM_BRIDGE_SCRIPTS(568-568)
⏰ 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). (2)
- GitHub Check: Build Libraries
- GitHub Check: Lint & Format Checks
🔇 Additional comments (21)
libs/uipack/src/bundler/cache.ts (8)
1-27: LGTM!The module documentation and
CacheOptionsinterface are well-defined with clear JSDoc comments documenting the default values.
29-62: LGTM!The
CacheStatsinterface is comprehensive with clear documentation for each property.
90-104: LGTM!The class initialization is clean with sensible defaults using nullish coalescing.
112-138: LGTM!The
getmethod correctly implements LRU behavior by re-inserting entries to move them to the MRU position, and properly handles TTL expiration.
146-161: LGTM!The
setmethod correctly enforces capacity limits before insertion. Using awhileloop is defensive and handles edge cases wheremaxSizemight be reduced after cache population.
234-246: Verify safety of deleting from Map during iteration.The code deletes entries from the Map while iterating over it. While this is technically safe in JavaScript (Map iterators handle concurrent deletion), it's worth noting this relies on that behavior.
284-302: LGTM!Correct FNV-1a hash implementation with proper 32-bit handling using
Math.imuland unsigned conversion.
313-335: Fix applied correctly.The array mutation issue from the previous review has been addressed. Line 329 now uses
.slice().sort()to create a copy before sorting, preventing mutation of the caller's array.libs/uipack/src/renderers/registry.test.ts (1)
217-217: LGTM: Good type safety improvement.The change from
{}toobjectas default type parameters is a TypeScript best practice—objectcorrectly represents non-primitive types, whereas{}can misleadingly accept primitives.Also applies to: 257-257
docs/draft/docs/ui/advanced/platforms.mdx (1)
26-26: LGTM! Import path migration is consistent.All platform-related imports have been correctly updated from
@frontmcp/uito@frontmcp/uipack/components, which aligns with the PR objective to separate React-free utilities into the@frontmcp/uipackpackage.Also applies to: 57-57, 169-169, 192-192, 213-213, 244-244, 271-271, 290-290
docs/draft/docs/servers/tools.mdx (1)
768-820: LGTM! Documentation correctly updated for package split.The documentation changes accurately reflect the migration from
@frontmcp/uito@frontmcp/uipackfor HTML components. The import path@frontmcp/uipack/componentsis correct for the new package structure.libs/uipack/src/runtime/mcp-bridge.d.ts (1)
1-102: Type declarations are well-structured.The TypeScript declarations provide a comprehensive API surface for the MCP Bridge runtime. Note that a security concern regarding trust-on-first-use origin validation was previously flagged in the implementation (see past review comments on lines 42-43 of the runtime implementation). This declaration file itself is sound.
libs/uipack/src/theme/cdn.ts (1)
1-456: LGTM! Documentation paths updated correctly.The documentation comments have been updated to reflect the new
@frontmcp/uipackpackage path. No functional changes to the CDN configuration logic.libs/uipack/src/runtime/index.ts (1)
1-117: LGTM! Package split correctly implemented.The removal of React-specific exports (
ReactRendererAdapter,createReactAdapter) from this barrel file correctly establishes the package boundary between@frontmcp/uipack(HTML/MDX components and build tools) and@frontmcp/ui(React components). The helpful comment on line 103 documents this split for future maintainers.libs/uipack/src/renderers/index.d.ts (1)
1-65: LGTM! Well-structured renderer API surface.This barrel file provides a clean, consolidated API surface for the renderer system with comprehensive documentation. The examples clearly show how to register the React renderer from the separate
@frontmcp/uipackage (lines 19-28), which aligns with the package split strategy.libs/uipack/src/renderers/registry.d.ts (1)
1-145: LGTM! Solid registry API design.The
RendererRegistryclass provides a well-designed API for managing multiple renderer types with priority-based auto-detection. Key strengths:
- Clear separation of concerns (register, detect, render)
- Type-safe render methods with generic parameters
- Comprehensive statistics via
getStats()- Good documentation with usage examples (lines 136-142)
libs/uipack/src/runtime/index.d.ts (1)
1-100: LGTM! Comprehensive runtime API barrel.This declaration file provides a well-organized, single entry point for the entire
@frontmcp/uipack/runtimeAPI. The logical grouping of exports (types, bridge runtime, CSP, wrappers, sanitization, renderer runtime, adapters) makes it easy to understand the module's capabilities. The intentional omission of React adapters correctly maintains the package boundary.docs/draft/docs/ui/api-reference/runtime.mdx (1)
5-5: LGTM!The description update correctly reflects the package split to
@frontmcp/uipack.libs/uipack/src/renderers/registry.ts (1)
274-274: No actionable issues found. The documentation example at line 274 correctly reflects the updated import paths after the package split. Both mdxRenderer and the imports are properly exported through the configured package.json exports field, and the subpath pattern supports accessing @frontmcp/uipack/renderers as documented.libs/uipack/src/dependency/import-map.ts (1)
155-156: LGTM: XSS mitigation for import map JSON.The escaping of
</sequences prevents script tag injection attacks. While import map data typically originates from internal dependency resolution rather than direct user input, this defense-in-depth approach is a sound security practice.Based on learnings, this follows the project's security guidelines for content escaping.
Also applies to: 167-169
libs/uipack/src/bundler/file-cache/component-builder.ts (1)
409-410: jsxImportSource default is already configurable and appropriate for React-focused bundler.The
jsxImportSourceparameter is optional inFileBundleOptionsand can be configured by users. If a different JSX runtime is needed, callers can specifybundleOptions.jsxImportSource: 'preact'(or another runtime). The default of'react'is appropriate for this bundler, which is documented as React-specific and requires React for SSR functionality.Likely an incorrect or invalid review comment.
…om @frontmcp/uipack to @frontmcp/ui
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
docs/draft/docs/guides/ui-library.mdxdocs/draft/docs/servers/tools.mdxdocs/draft/docs/ui/advanced/custom-renderers.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/advanced/mcp-bridge.mdxdocs/draft/docs/ui/advanced/platforms.mdxdocs/draft/docs/ui/api-reference/components.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/ui/components/alert.mdxdocs/draft/docs/ui/components/avatar.mdxdocs/draft/docs/ui/components/badge.mdxdocs/draft/docs/ui/components/button.mdxdocs/draft/docs/ui/components/card.mdxdocs/draft/docs/ui/components/form.mdxdocs/draft/docs/ui/components/list.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/ui/components/overview.mdxdocs/draft/docs/ui/components/resource-widgets.mdxdocs/draft/docs/ui/components/table.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/integration/tools.mdxdocs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/layouts/overview.mdxdocs/draft/docs/ui/layouts/templates.mdxdocs/draft/docs/ui/overview.mdxdocs/draft/docs/ui/templates/custom.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/templates/mdx.mdxdocs/draft/docs/ui/templates/react.mdxdocs/draft/docs/ui/theming/customization.mdxdocs/draft/docs/ui/theming/dark-mode.mdxdocs/draft/docs/ui/theming/overview.mdxlibs/uipack/README.md
✅ Files skipped from review due to trivial changes (2)
- libs/uipack/README.md
- docs/draft/docs/ui/advanced/mcp-bridge.mdx
🚧 Files skipped from review as they are similar to previous changes (19)
- docs/draft/docs/ui/components/overview.mdx
- docs/draft/docs/ui/components/button.mdx
- docs/draft/docs/servers/tools.mdx
- docs/draft/docs/ui/components/badge.mdx
- docs/draft/docs/ui/components/alert.mdx
- docs/draft/docs/ui/components/list.mdx
- docs/draft/docs/ui/advanced/custom-renderers.mdx
- docs/draft/docs/ui/advanced/platforms.mdx
- docs/draft/docs/ui/theming/dark-mode.mdx
- docs/draft/docs/ui/integration/tools.mdx
- docs/draft/docs/ui/layouts/overview.mdx
- docs/draft/docs/ui/theming/customization.mdx
- docs/draft/docs/ui/layouts/templates.mdx
- docs/draft/docs/ui/overview.mdx
- docs/draft/docs/ui/api-reference/components.mdx
- docs/draft/docs/ui/components/card.mdx
- docs/draft/docs/ui/components/table.mdx
- docs/draft/docs/ui/templates/mdx.mdx
- docs/draft/docs/ui/components/resource-widgets.mdx
🧰 Additional context used
📓 Path-based instructions (2)
docs/draft/docs/**
⚙️ CodeRabbit configuration file
docs/draft/docs/**: This folder holds the draft/source docs that humans are expected to edit. When authors want to add or change documentation, they should do it here. The Codex workflow uses these drafts, together with the code diff, to generate the latest docs under docs/docs/. As a reviewer: - Encourage contributors to add/update content here instead of docs/docs/. - It is fine to do structural/content feedback here (clarity, examples, etc).
Files:
docs/draft/docs/ui/components/avatar.mdxdocs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/ui/templates/custom.mdxdocs/draft/docs/ui/components/form.mdxdocs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/ui/theming/overview.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/templates/react.mdx
docs/**
⚙️ CodeRabbit configuration file
docs/**: Repository documentation for the SDK, using MDX and hosted by Mintlify. See more specific rules for: - docs/docs/** (latest rendered docs, automation-only) - docs/v/** (archived versions, read-only) - docs/draft/docs/** (human-editable drafts) - docs/blogs/** (blogs, human edited) - docs/docs.json (Mintlify navigation)
Files:
docs/draft/docs/ui/components/avatar.mdxdocs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/ui/templates/custom.mdxdocs/draft/docs/ui/components/form.mdxdocs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/ui/theming/overview.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/templates/react.mdx
🧠 Learnings (22)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
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
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
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Add JSDoc examples with example tags showing basic usage and options patterns for all components
Applied to files:
docs/draft/docs/ui/components/avatar.mdxdocs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/templates/react.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.test.ts : Write validation tests covering invalid variant/options, unknown properties, and valid option acceptance
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/templates/react.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Validate component options using `validateOptions()` helper and return error box on validation failure
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/ui/components/form.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/templates/react.mdx
📚 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:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/components/modal.mdxdocs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/templates/react.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/templates/react.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Use Zod schema validation for all component inputs as a core validation strategy
Applied to files:
docs/draft/docs/ui/integration/validation.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Use HTMX schema with strict mode including get, post, put, delete, target, swap, and trigger properties
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/templates/html.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/templates/react.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Always use `escapeHtml()` utility for all user-provided content to prevent XSS vulnerabilities
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.test.ts : Test HTML escaping for user-provided content to prevent XSS attacks
Applied to files:
docs/draft/docs/ui/integration/validation.mdxdocs/draft/docs/ui/api-reference/runtime.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Hard-code CDN URLs only in theme presets; always reference theme.cdn configuration in component code
Applied to files:
docs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/ui/theming/overview.mdxdocs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/theme/presets/**/*.ts : Implement GitHub/OpenAI gray-black monochromatic palette as the default theme
Applied to files:
docs/draft/docs/ui/api-reference/theme.mdxdocs/draft/docs/ui/theming/overview.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.test.ts : Test behavior across platform configurations (OpenAI, Claude, Gemini, ngrok) where applicable
Applied to files:
docs/draft/docs/ui/api-reference/theme.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Support platform-aware rendering by detecting network capabilities (open vs blocked) and script loading strategies (external vs inline)
Applied to files:
docs/draft/docs/ui/api-reference/theme.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Use consistent enum naming for variants ('primary', 'secondary', 'outline', 'ghost', 'danger', 'success') and sizes ('xs', 'sm', 'md', 'lg', 'xl')
Applied to files:
docs/draft/docs/ui/theming/overview.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
Applied to files:
docs/draft/docs/guides/ui-library.mdxdocs/draft/docs/ui/api-reference/runtime.mdxdocs/draft/docs/ui/getting-started.mdxdocs/draft/docs/ui/advanced/hydration.mdxdocs/draft/docs/ui/templates/react.mdx
📚 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:
docs/draft/docs/guides/ui-library.mdx
📚 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:
docs/draft/docs/ui/api-reference/runtime.mdx
📚 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:
docs/draft/docs/ui/api-reference/runtime.mdx
📚 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 : Use type parameters with constraints instead of unconstrained generics
Applied to files:
docs/draft/docs/ui/templates/react.mdx
📚 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 : Use strict TypeScript mode with no `any` types without strong justification - use `unknown` instead for generic type defaults
Applied to files:
docs/draft/docs/ui/templates/react.mdx
⏰ 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). (2)
- GitHub Check: Lint & Format Checks
- GitHub Check: Build Libraries
🔇 Additional comments (13)
docs/draft/docs/ui/components/form.mdx (1)
19-19: Documentation import paths updated for package restructuring.All import paths have been correctly updated from
@frontmcp/uito@frontmcp/ui/componentsacross the form.mdx examples (lines 19, 230, 252, 267, 300). The changes are consistent and align with the PR's objective of splitting the UI package structure. This is the appropriate location for documentation updates per the coding guidelines for human-editable draft files.Verify that all imported components (input, select, textarea, checkbox, radio, formGroup, formField, button, card) are correctly exported from
@frontmcp/ui/componentsin the package exports configuration.docs/draft/docs/ui/components/modal.mdx (1)
11-11: The import paths are correct. The@frontmcp/ui/componentssubpath properly exports these HTML component functions, includingmodal,drawer,dialog,button,input,select, and others. The@frontmcp/uipackpackage is specifically for build tools, bundling, and platform adapters—not for UI components themselves. The documentation indocs/draft/docs/ui/components/modal.mdxuses the correct import paths consistent with the package structure.Likely an incorrect or invalid review comment.
docs/draft/docs/ui/components/avatar.mdx (1)
11-11: LGTM! Import paths correctly updated.The import paths have been correctly updated to
@frontmcp/ui/componentsto reflect the new package structure where HTML component functions are now imported from a dedicated subpath.Also applies to: 189-189, 224-224
docs/draft/docs/ui/templates/custom.mdx (1)
282-282: LGTM! Type import correctly migrated.The type-only import of
TemplateContexthas been correctly updated to reference@frontmcp/uipack/types, aligning with the package split where type definitions are now provided by the uipack package.docs/draft/docs/ui/api-reference/theme.mdx (1)
5-5: LGTM! Theme API references correctly migrated.All theme-related imports and the package description have been consistently updated to reference
@frontmcp/uipack/theme. This correctly reflects that the theme system is part of the uipack package, which has no React dependency.Also applies to: 15-15, 40-40, 68-68, 87-87, 556-556, 567-567, 577-577, 601-601, 616-616, 627-627, 639-639, 656-656, 697-697, 728-728
docs/draft/docs/ui/integration/validation.mdx (1)
109-109: LGTM! Component utilities import correctly updated.The import path for validation and HTML escaping utilities has been correctly updated to
@frontmcp/ui/components, reflecting the new package structure.docs/draft/docs/ui/templates/html.mdx (1)
129-129: LGTM! Component imports in HTML templates correctly updated.The component imports in the HTML template examples have been correctly updated to
@frontmcp/ui/components, demonstrating proper usage of the component library within HTML template functions.Also applies to: 270-270
docs/draft/docs/ui/advanced/hydration.mdx (1)
69-69: LGTM! Hydration example imports correctly migrated.All imports have been correctly updated to reflect the package split:
- Template types moved to
@frontmcp/uipack/types- Runtime types moved to
@frontmcp/uipack/runtime- Component functions moved to
@frontmcp/ui/componentsType-only imports are properly marked with
import type.Also applies to: 176-176, 282-282
docs/draft/docs/ui/theming/overview.mdx (1)
19-19: LGTM! Theme and layout imports correctly separated.The imports have been correctly updated to reflect the package split:
- Theme configuration and utilities moved to
@frontmcp/uipack/theme- Layout functions moved to
@frontmcp/ui/layoutsThis separation aligns with the architecture where pure theme config lives in uipack while layout rendering lives in the ui package.
Also applies to: 200-201, 212-212
docs/draft/docs/ui/getting-started.mdx (2)
15-45: LGTM! Package split clearly explained.The installation section now clearly explains the two-package architecture with a helpful table distinguishing between:
@frontmcp/uipackfor HTML components without React@frontmcp/uifor React componentsThe separate installation instructions for each use case make it easy for developers to choose the right package for their needs.
132-136: LGTM! Component imports and narrative correctly updated.The documentation narrative now correctly references
@frontmcp/uipackfor HTML components, and all code examples have been updated to import from@frontmcp/ui/components. The changes are consistent and clear.Also applies to: 191-191
docs/draft/docs/ui/templates/react.mdx (1)
37-37: LGTM! Import paths are consistent with the package split architecture.All
TemplateContexttype imports correctly useimport typefrom@frontmcp/uipack/types, while UI component imports consistently reference@frontmcp/ui/components. This aligns with the two-package architecture where types/runtime live in uipack and components live in ui.Also applies to: 78-78, 127-128, 158-159, 232-232, 302-302
docs/draft/docs/ui/api-reference/runtime.mdx (1)
5-5: LGTM! All runtime API imports are consistent and correct.All import examples throughout this API reference consistently use
@frontmcp/uipack/runtime, which correctly reflects the package split where runtime utilities live in the uipack package. The previous review concern about invalid@frontmcp/uipack/componentspaths has been properly addressed.Also applies to: 159-159, 288-288, 299-299, 311-311, 329-329, 363-363, 392-392, 405-405, 418-418, 429-429, 444-444, 467-467, 477-477, 495-495, 511-511
…ide @frontmcp/uipack
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
docs/draft/docs/guides/ui-library.mdx (2)
14-20: Update section heading to reflect both packages.The heading "Why @frontmcp/uipack" is followed by bullet points describing features from both packages—components from
@frontmcp/ui(HTML output, HTMX, validation) and utilities from@frontmcp/uipack(platform detection, theme system).🔎 Suggested fix
-## Why @frontmcp/uipack +## Why @frontmcp/ui and @frontmcp/uipackAlternatively, split this into two subsections if you want to distinguish the offerings:
- "## Why @frontmcp/ui" → Pure HTML output, HTMX, Zod validation
- "## Why @frontmcp/uipack" → Platform detection, theme system, page templates
188-188: Specify the package for the widgets module.Line 188 mentions "The
widgetsmodule" but doesn't specify which package exports it. Based on the two-package architecture, clarify whether widgets come from@frontmcp/ui/widgetsor@frontmcp/uipack/widgetsso users know where to import them.🔎 Suggested addition
-The `widgets` module exposes OpenAI App SDK components (resource pickers, action lists) plus status badges, progress indicators, and table helpers. +The `@frontmcp/ui/widgets` module exposes OpenAI App SDK components (resource pickers, action lists) plus status badges, progress indicators, and table helpers.(Adjust the package path based on the actual implementation.)
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/draft/docs/guides/ui-library.mdx
🧰 Additional context used
📓 Path-based instructions (2)
docs/draft/docs/**
⚙️ CodeRabbit configuration file
docs/draft/docs/**: This folder holds the draft/source docs that humans are expected to edit. When authors want to add or change documentation, they should do it here. The Codex workflow uses these drafts, together with the code diff, to generate the latest docs under docs/docs/. As a reviewer: - Encourage contributors to add/update content here instead of docs/docs/. - It is fine to do structural/content feedback here (clarity, examples, etc).
Files:
docs/draft/docs/guides/ui-library.mdx
docs/**
⚙️ CodeRabbit configuration file
docs/**: Repository documentation for the SDK, using MDX and hosted by Mintlify. See more specific rules for: - docs/docs/** (latest rendered docs, automation-only) - docs/v/** (archived versions, read-only) - docs/draft/docs/** (human-editable drafts) - docs/blogs/** (blogs, human edited) - docs/docs.json (Mintlify navigation)
Files:
docs/draft/docs/guides/ui-library.mdx
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
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
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
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Add JSDoc examples with example tags showing basic usage and options patterns for all components
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 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:
docs/draft/docs/guides/ui-library.mdx
📚 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:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Use HTMX schema with strict mode including get, post, put, delete, target, swap, and trigger properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Hard-code CDN URLs only in theme presets; always reference theme.cdn configuration in component code
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Validate component options using `validateOptions()` helper and return error box on validation failure
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.test.ts : Write validation tests covering invalid variant/options, unknown properties, and valid option acceptance
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
⏰ 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). (2)
- GitHub Check: Build Libraries
- GitHub Check: Lint & Format Checks
…express to version 5.0.0
…tmcp/uipack; adjust express peer dependency version
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/draft/docs/guides/ui-library.mdx (1)
190-190: Consider adding an earlier mention or example of the widgets module.The
@frontmcp/ui/widgetsmodule is introduced for the first time in the "next steps" section without prior context or examples. While appropriate for an advanced features callout, users might benefit from:
- A brief mention in the package responsibilities Note (lines 11-14), or
- A small code example showing a widget in action earlier in the guide
This would improve discoverability and help users understand the full scope of
@frontmcp/uicapabilities.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/draft/docs/guides/ui-library.mdxlibs/sdk/package.json
🚧 Files skipped from review as they are similar to previous changes (1)
- libs/sdk/package.json
🧰 Additional context used
📓 Path-based instructions (2)
docs/draft/docs/**
⚙️ CodeRabbit configuration file
docs/draft/docs/**: This folder holds the draft/source docs that humans are expected to edit. When authors want to add or change documentation, they should do it here. The Codex workflow uses these drafts, together with the code diff, to generate the latest docs under docs/docs/. As a reviewer: - Encourage contributors to add/update content here instead of docs/docs/. - It is fine to do structural/content feedback here (clarity, examples, etc).
Files:
docs/draft/docs/guides/ui-library.mdx
docs/**
⚙️ CodeRabbit configuration file
docs/**: Repository documentation for the SDK, using MDX and hosted by Mintlify. See more specific rules for: - docs/docs/** (latest rendered docs, automation-only) - docs/v/** (archived versions, read-only) - docs/draft/docs/** (human-editable drafts) - docs/blogs/** (blogs, human edited) - docs/docs.json (Mintlify navigation)
Files:
docs/draft/docs/guides/ui-library.mdx
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
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
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
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
📚 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:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 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:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Use HTMX schema with strict mode including get, post, put, delete, target, swap, and trigger properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Hard-code CDN URLs only in theme presets; always reference theme.cdn configuration in component code
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Validate component options using `validateOptions()` helper and return error box on validation failure
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.test.ts : Write validation tests covering invalid variant/options, unknown properties, and valid option acceptance
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
⏰ 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). (2)
- GitHub Check: Lint & Format Checks
- GitHub Check: Build Libraries
🔇 Additional comments (3)
docs/draft/docs/guides/ui-library.mdx (3)
5-14: Excellent clarification of package responsibilities.The updated introduction now clearly distinguishes between the two packages. The Note box on lines 11-14 directly addresses previous concerns by explicitly listing what each package provides, making it easy for users to understand which package they need for specific functionality.
26-38: Installation instructions are now complete.All package managers correctly install both
@frontmcp/uiand@frontmcp/uipack, ensuring users have access to components, layouts, theming, and page templates needed for the examples throughout the guide.
45-48: Import paths are consistent throughout the guide.All code examples use the correct module paths aligned with the two-package architecture:
- Components, layouts, and widgets from
@frontmcp/ui- Theming and page templates from
@frontmcp/uipackThis consistency helps users understand the package structure while following the examples.
Also applies to: 75-76, 102-109, 149-149, 175-176
… responsibilities and add Snyk badge to README
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/draft/docs/guides/ui-library.mdx (1)
8-14: Consider clarifying the guide's focus on HTML components.The introduction describes the packages as requiring "no React runtime" (line 8), and all code examples use HTML components from
@frontmcp/ui/componentsand/layouts. However, line 12 mentions that@frontmcp/uialso provides React components under/react. This dual nature isn't explained, which might confuse readers who see React mentioned but never used.Since this guide exclusively demonstrates HTML string generation, consider adding a brief note after line 14 clarifying that this guide focuses on the HTML component approach, and that React components are available separately for SSR/hydration scenarios.
Suggested clarification
After line 14, add:
- `@frontmcp/uipack` provides theming (`/theme`), page templates (`/pages`), and build utilities </Note> +This guide focuses on the HTML component approach (components that return strings). For React-based server-side rendering and hydration, see the [React Integration guide](/docs/ui/react). + ## Why use the UI packages
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.mddocs/draft/docs/guides/ui-library.mdx
🧰 Additional context used
📓 Path-based instructions (2)
docs/draft/docs/**
⚙️ CodeRabbit configuration file
docs/draft/docs/**: This folder holds the draft/source docs that humans are expected to edit. When authors want to add or change documentation, they should do it here. The Codex workflow uses these drafts, together with the code diff, to generate the latest docs under docs/docs/. As a reviewer: - Encourage contributors to add/update content here instead of docs/docs/. - It is fine to do structural/content feedback here (clarity, examples, etc).
Files:
docs/draft/docs/guides/ui-library.mdx
docs/**
⚙️ CodeRabbit configuration file
docs/**: Repository documentation for the SDK, using MDX and hosted by Mintlify. See more specific rules for: - docs/docs/** (latest rendered docs, automation-only) - docs/v/** (archived versions, read-only) - docs/draft/docs/** (human-editable drafts) - docs/blogs/** (blogs, human edited) - docs/docs.json (Mintlify navigation)
Files:
docs/draft/docs/guides/ui-library.mdx
🧠 Learnings (9)
📓 Common learnings
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/** : Organize components into schema.ts (definitions) and implementation .ts files with matching names
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
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
📚 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:
README.mddocs/draft/docs/guides/ui-library.mdx
📚 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:
README.mddocs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Use pure HTML string generation without React/Vue/JSX - components return HTML strings only
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Use HTMX schema with strict mode including get, post, put, delete, target, swap, and trigger properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/**/*.ts : Hard-code CDN URLs only in theme presets; always reference theme.cdn configuration in component code
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.ts : Validate component options using `validateOptions()` helper and return error box on validation failure
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.test.ts : Write validation tests covering invalid variant/options, unknown properties, and valid option acceptance
Applied to files:
docs/draft/docs/guides/ui-library.mdx
📚 Learning: 2025-11-26T15:23:04.965Z
Learnt from: CR
Repo: agentfront/frontmcp PR: 0
File: libs/ui/CLAUDE.md:0-0
Timestamp: 2025-11-26T15:23:04.965Z
Learning: Applies to libs/ui/src/components/**/*.schema.ts : Every component must have a Zod schema with `.strict()` mode to reject unknown properties
Applied to files:
docs/draft/docs/guides/ui-library.mdx
⏰ 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). (2)
- GitHub Check: Build Libraries
- GitHub Check: Lint & Format Checks
🔇 Additional comments (3)
README.md (1)
17-17: LGTM!The Snyk security badge is appropriately positioned alongside other project badges and adds transparency around security scanning. The badge URL follows standard conventions.
docs/draft/docs/guides/ui-library.mdx (2)
28-37: Installation instructions now complete.The installation commands now correctly include both
@frontmcp/uiand@frontmcp/uipack, addressing the previous issue where users would encounter import errors. All subsequent code examples will work as written.
46-48: Import paths are consistent with package split.All import statements throughout the guide correctly reflect the two-package architecture:
- HTML components and layouts from
@frontmcp/ui- Theme system and page templates from
@frontmcp/uipackThe documentation is internally consistent and users can follow the examples without confusion.
Also applies to: 76-76, 109-109, 149-149, 176-176, 190-190
Summary by CodeRabbit
New Features
Documentation
Build / Tooling
Tests
✏️ Tip: You can customize this high-level summary in your review settings.