feat: add support for propsSchema #174
Conversation
WalkthroughThe changes introduce a new Changes
Sequence Diagram(s)sequenceDiagram
participant C as Component Registration
participant R as TamboRegistryProvider
participant H as JSON Schema Converter
C->>R: Call registerComponent with component options
alt propsSchema provided
R->>H: Convert propsSchema to JSON Schema
H-->>R: Return JSON Schema (or error if conversion fails)
else propsDefinition provided
R->>R: Use provided propsDefinition directly
end
R-->>C: Register component (or throw error)
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
react-sdk/src/model/component-metadata.ts (1)
72-79: Good enhancement of the TamboComponent interface with prop schema supportAdding support for Zod schemas is a great improvement for type safety. The clear documentation about using either
propsSchemaORpropsDefinition(but not both) helps prevent misuse.However, the
propsDefinitiontype is stillany, which reduces type safety. Consider defining a more specific type.- propsDefinition?: any; + propsDefinition?: Record<string, string | object>;react-sdk/src/providers/tambo-registry-provider.tsx (1)
92-114: Robust validation for props schema and definitionThe validation logic ensures that:
- Either
propsSchemaorpropsDefinitionmust be provided- Both cannot be provided simultaneously
- Error messages clearly explain the requirements
The try-catch block for schema conversion is good practice, but consider adding a more specific type annotation for the
propsvariable to avoid implicitany.- let props = propsDefinition; + let props: Record<string, any> = propsDefinition;react-sdk/src/util/registry.ts (1)
49-53: Consider adding a more robust type check for Zod schemasThe current check for Zod schema uses presence of
_defandparsefunction, which might not be foolproof as these properties could exist on non-Zod objects.A more robust check could be:
- // Check if props is a Zod schema (we can't directly check the type, so we check for _def) - if (component.props._def && typeof component.props.parse === 'function') { + // Check if props is a Zod schema + if (component.props?._def && typeof component.props.parse === 'function' && + typeof component.props.safeParse === 'function') {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.prettierrc(1 hunks)react-sdk/README.md(4 hunks)react-sdk/src/model/component-metadata.ts(3 hunks)react-sdk/src/providers/tambo-registry-provider.tsx(5 hunks)react-sdk/src/util/registry.ts(5 hunks)
🧰 Additional context used
🧬 Code Definitions (2)
react-sdk/src/providers/tambo-registry-provider.tsx (2)
react-sdk/src/providers/index.ts (3) (3)
TamboRegistryProvider(9-9)TamboTool(1-1)TamboRegistryContext(11-11)react-sdk/src/model/component-metadata.ts (2) (2)
ComponentRegistry(28-28)TamboTool(32-40)
react-sdk/src/util/registry.ts (1)
react-sdk/src/model/component-metadata.ts (7) (7)
ComponentRegistry(28-28)TamboToolRegistry(30-30)TamboToolAssociations(42-42)RegisteredComponent(23-26)TamboTool(32-40)ComponentContextToolMetadata(14-16)ParameterSpec(6-8)
🔇 Additional comments (21)
.prettierrc (1)
1-11: Excellent standardization of code formatting with PrettierAdding a Prettier configuration helps maintain consistent code style across the project. The chosen settings align well with modern JavaScript/TypeScript style guidelines:
- 100 character line length is a good balance between readability and screen space
- Using single quotes matches the formatting changes in the other files
- The arrowParens setting creates cleaner arrow functions
- LF line endings ensure consistency across platforms
react-sdk/src/model/component-metadata.ts (1)
1-4: Import formatting improvements look goodThe import statements have been updated to use single quotes, which matches the new Prettier configuration.
react-sdk/src/providers/tambo-registry-provider.tsx (5)
9-11: Import cleanup and new zodToJsonSchema importAdding the import for
zodToJsonSchemais necessary for the new schema conversion functionality.
38-41: Improved function definition formattingThe reformatting of the
TamboRegistryProviderfunction definition makes the code more readable.
48-58: Cleaner callback implementationThe
registerToolfunction has been reformatted for better readability while maintaining the same functionality.
116-131: Props assignment in component registrationThe component registration logic now correctly uses the converted props from either the schema or definition.
160-160: Simplified JSX return statementThe return statement has been simplified to a single line, which is more readable.
react-sdk/README.md (6)
39-39: Updated import statement to use single quotesThe import statement now uses single quotes, consistent with the new Prettier configuration.
49-49: Updated MessageThread import to use single quotesThe MessageThread import now uses single quotes, consistent with the Prettier configuration.
77-93: Great example of component registration with Zod schemasThe example clearly demonstrates how to use Zod for type-safe props definition in component registration. This aligns well with the new
propsSchemaproperty added to theTamboComponentinterface.
95-111: Helpful example of using z.describe() for additional contextThis example shows how to provide additional context to the AI using
z.describe(), which is a powerful feature for guiding AI-generated components.
113-115: Clear explanation of mutually exclusive prop definition optionsThe comment clearly explains that developers should use either
propsSchemaORpropsDefinition, not both, which aligns with the validation in the provider.
117-126: Updated JSON object example with improved formattingThe example for using JSON object for props definition has been updated with improved formatting and clearer types.
react-sdk/src/util/registry.ts (8)
1-3: Consistent import formatting with single quotesThe imports have been updated to use single quotes instead of double quotes, which improves consistency with the codebase style.
25-25: Improved arrow function syntaxThe arrow function has been simplified by removing unnecessary parentheses around the single parameter, which follows modern JavaScript best practices.
43-56: Well-implemented helper function for props schema conversionThe new
convertPropsToJsonSchemafunction properly handles the conversion of component props from Zod schema to JSON Schema. The implementation includes appropriate null checks and type verification before performing the conversion.I particularly like the robust type safety approach with the comment explaining the two-step type assertion. This is careful implementation.
65-65: Improved error message formattingThe error message has been streamlined by removing unnecessary line breaks, making it more concise while maintaining clarity.
73-74: Enhanced string formatting for default contextThe string formatting has been improved using template literals, which is more readable and maintainable than string concatenation.
82-82: Added return type for better type safetyAdding explicit return type annotation to the
mapTamboToolToContextToolfunction improves type safety and code readability.
92-92: Added return type for better type safetyThe explicit return type annotation on
getParametersFromZodFunctionimproves type safety and documentation.
114-131: Well-structured type mapping for Zod typesThe switch statement is well-organized with consistent formatting, mapping Zod types to their corresponding simple type names. The fallback case properly logs a warning when encountering unknown types.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
react-sdk/src/providers/tambo-registry-provider.tsx (1)
114-126: The try-catch for schema conversion is prudent.
You might consider how to handle the exception for a failing schema conversion more explicitly (e.g., rethrowing or reverting to a known-safe fallback) in case the Zod schema is malformed. Otherwise, this block effectively guards against unexpected runtime errors.react-sdk/README.md (3)
77-93: Enhanced Component Registration with ZodThis new example clearly demonstrates how to use Zod to provide a type-safe
propsSchemaduring component registration. The snippet is well structured and directly aligns with the PR objective to supportpropsSchema. Ensure that the actual implementation ofregisterComponentsupports and properly validates this new parameter.
97-111: Clarify Schema Declaration in the ExamplesThe schema definition using
z.describe()is useful for adding prompting details. For clarity and to help users directly copy-paste the code, consider using an explicit declaration keyword (e.g.,const) beforeschema. For example:- schema = z.object({ + const schema = z.object({This small refinement improves clarity, especially for newcomers.
116-126: Clear Alternative Example Using JSON DefinitionThe alternative example using
propsDefinitionis clear and provides a good fallback for users who prefer JSON-style definitions over Zod schemas. The accompanying note—"Use either propsSchema OR propsDefinition, not both"—is an important clarification. Ensure this guidance is sufficiently emphasized in the surrounding text so that users do not inadvertently mix the two approaches.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
.prettierrc(1 hunks)react-sdk/README.md(1 hunks)react-sdk/src/model/component-metadata.ts(1 hunks)react-sdk/src/providers/tambo-registry-provider.tsx(3 hunks)react-sdk/src/util/registry.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- react-sdk/src/model/component-metadata.ts
🧰 Additional context used
🧬 Code Definitions (1)
react-sdk/src/util/registry.ts (2)
react-sdk/src/model/component-metadata.ts (1) (1)
RegisteredComponent(24-27)react-sdk/src/index.ts (1) (1)
RegisteredComponent(32-32)
🔇 Additional comments (7)
.prettierrc (1)
1-11: Looks good.
These configuration settings provide a clear and consistent formatting style.react-sdk/src/util/registry.ts (1)
43-58: Consider a more robust check for Zod schemas.
Currently, checkingcomponent.props._defandparseis sufficient for most cases; however, because_defis internal, future changes to Zod may break it. Consider using a more direct Zod type-guard (e.g.,instanceof z.ZodType) if supported. Otherwise, this is a straightforward and effective approach for converting component props to JSON Schema.react-sdk/src/providers/tambo-registry-provider.tsx (5)
10-10: New import correctly references zod-to-json-schema.
This import is essential for converting Zod schemas into JSON Schema.
94-95: Destructuring propsSchema and propsDefinition adds clarity.
Having both fields in the parameter list is clearer for integration 953A with the new schema validation logic.
100-105: Ensuring at least one props definition prevents incomplete registrations.
Throwing an error here is a good safeguard that helps avoid unregistered or invalid props scenarios.
107-112: Rejecting multiple props definitions is consistent with a single-source-of-truth approach.
This constraint prevents conflicts arising from two different schema definitions.
138-138: Storing props ensures consistent usage in the component registry.
By assigning either the converted schema or the definition, you unify the final props reference under one field.
Summary by CodeRabbit
Documentation
New Features
Refactor