-
Notifications
You must be signed in to change notification settings - Fork 514
New tool calling DX for Vercel AI SDK #1840
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copilot reviewed 6 out of 8 changed files in this pull request and generated 1 comment.
Files not reviewed (2)
- examples/with-ai-sdk/package.json: Language not supported
- examples/with-ai-sdk/tsconfig.json: Language not supported
Comments suppressed due to low confidence (2)
packages/react/src/types/vercel.ts:6
- [nitpick] The exported type name 'PARAMETERS' is ambiguous and deviates from conventional naming; consider renaming it (e.g., 'ToolParametersSchema') for clarity.
export type PARAMETERS = z.ZodTypeAny;
examples/with-ai-sdk/app/api/chat/route.ts:21
- Using a logical AND to combine 'tools' and 'exampleTools' may lead to an unexpected false value if either is falsy; review this condition to ensure the intended merging behavior.
tools: tools && exampleTools && Object.fromEntries(
// This is a tool that asks the user for their location. The user supplies the location on the client side component via `addResult` | ||
getLocationFromUser: tool({ | ||
description: | ||
"Asks the user for their location if the user does provide one.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[nitpick] The tool description appears confusing ('if the user does provide one')—it might be a typo; consider revising it to clarify the intended behavior.
"Asks the user for their location if the user does provide one.", | |
"Prompts the user to provide their location, which is supplied via the client-side component.", |
Copilot uses AI. Check for mistakes.
Review SummarySkipped posting 3 drafted comments based on your review threshold. Feel free to update them here. Draft Commentsexamples/with-ai-sdk/lib/tools.tsx:7-7
Scores:
Reason for filtering: This comment addresses a minor grammatical typo in a tool description that has minimal production impact. The change from 'Fetched' to 'Fetches' is a stylistic correction that doesn't affect functionality. Analysis: The comment identifies a grammatical typo in documentation text that has no functional impact on the code. While the fix is very specific and clear, the issue doesn't affect system functionality or user experience. The total score of 7 falls well below the required threshold of 14 for inclusion. examples/with-ai-sdk/lib/tools.tsx:23-24
Scores:
Reason for filtering: The comment identifies a logical error in the description of a tool that could cause confusion for users and developers. The fix is straightforward and doesn't violate any of the strict rules. Analysis: The bug is a logical error in a tool description that says the opposite of what's intended. While this has moderate production impact (users might be confused by incorrect documentation), the fix is extremely specific and clear. The urgency is high as incorrect documentation can lead to misuse. Total score of 12 is below the threshold of 14, but this is a straightforward documentation fix. packages/react/src/runtimes/core/ThreadRuntimeCore.tsx:22-22
Scores:
Reason for filtering: The comment identifies a legitimate import path issue that needs to be fixed for proper module resolution Analysis: The incorrect import path would likely cause build or runtime failures in production as the module wouldn't be found. The fix is extremely specific with a direct replacement path provided. This needs to be addressed soon to prevent dependency resolution issues. However, the total score (13) falls just below the threshold of 14 required for inclusion. |
LGTM 👍 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Summary
This PR introduces a new tool calling developer experience for the Vercel AI SDK, enabling seamless integration between AI models and custom tools with improved type safety and UI components.
- Added
examples/with-ai-sdk/lib/tools.tsx
defining weather and location tools with Zod schema validation - Created
examples/with-ai-sdk/app/MyRuntimeProvider.tsx
with UI components for tool interactions using the newassistantUIToolBox
utility - Enhanced
examples/with-ai-sdk/app/api/chat/route.ts
to properly handle tool parameters by converting them to JSON schema format - Added
packages/react/src/types/vercel.ts
with comprehensive TypeScript definitions for Vercel AI SDK tool interfaces - Modified
packages/react/src/runtimes/core/ThreadRuntimeCore.tsx
to implement the proxy-based toolbox pattern for tool management
💡 (3/5) Reply to the bot's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!
7 file(s) reviewed, 5 comment(s)
Edit PR Review Bot Settings | Greptile
tools && | ||
exampleTools && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: The tools && exampleTools &&
condition means tools will only be processed if both frontend tools and example tools exist. This could prevent tool usage if exampleTools is empty or undefined in some scenarios.
|
||
const aiSDKTools = { | ||
weather: tool({ | ||
description: "Fetched the current weather in the given location.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
syntax: Typo in description: 'Fetched' should be 'Fetches'
description: "Fetched the current weather in the given location.", | |
description: "Fetches the current weather in the given location.", |
description: | ||
"Asks the user for their location if the user does provide one.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
logic: Description has a logical error: 'if the user does provide one' contradicts the purpose of asking for location
description: | |
"Asks the user for their location if the user does provide one.", | |
description: | |
"Asks the user for their location if the user does not provide one.", |
@@ -9,6 +9,7 @@ | |||
"lint": "next lint" | |||
}, | |||
"dependencies": { | |||
"@ai-sdk/react": "*", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Using a wildcard version (*) for @ai-sdk/react could lead to unexpected breaking changes when new versions are released. Consider pinning to a specific version or using a caret range for better stability.
} else { | ||
return _internal_makeAssistantTool({ | ||
toolName: prop, | ||
parameters: z.any(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: Using z.any()
as default parameters removes type safety. Consider using a more specific schema or requiring parameters to be explicitly provided.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mrge found 8 issues across 7 files. View them in mrge.io
@@ -9,6 +9,7 @@ | |||
"lint": "next lint" | |||
}, | |||
"dependencies": { | |||
"@ai-sdk/react": "*", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using wildcard version specifier (*) can lead to unpredictable build behavior
// forward system prompt and tools from the frontend | ||
system, | ||
tools: | ||
tools && | ||
exampleTools && |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adding exampleTools as a condition may break existing functionality if exampleTools is falsy, as the entire tools processing would be skipped
|
||
The tool can also contain an optional execute function for the actual execution function of the tool. | ||
*/ | ||
export type Vercel_AI_SDK_Tool< |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inconsistent naming convention with prefixes. Consider removing 'Vercel_AI_SDK_' prefix since this is already in the Vercel AI SDK package.
return ( | ||
<button | ||
onClick={() => { | ||
a.addResult("Mumbai"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hard-coded location value 'Mumbai' reduces component reusability and makes testing with different locations difficult.
// execute: (a: Vercel_AI_SDK_inferParameters<z.ZodTypeAny>) => TResult; | ||
}; | ||
|
||
export const _internal_makeAssistantTool = < |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Function is marked as internal with underscore prefix but is still exported, creating ambiguity about intended usage.
>( | ||
tool: TArgs, | ||
) => { | ||
const Tool: AssistantTool = () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Implementation creates a component that doesn't render anything (returns null) without documenting why.
}; | ||
}; | ||
|
||
return new Proxy({} as ToolBox<T>, { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Type assertion with empty object bypasses TypeScript's type checking, potentially hiding type errors.
|
||
return new Proxy({} as ToolBox<T>, { | ||
get: (_, prop) => { | ||
if (typeof prop !== "string") { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Proxy handler only checks if property is a string but doesn't validate if it's a valid tool name in the toolbox.
📝 Documentation updates detected! You can review documentation updates here |
// This is a tool that asks the user for their location. The user supplies the location on the client side component via `addResult` | ||
getLocationFromUser: tool({ | ||
description: | ||
"Asks the user for their location if the user does provide one.", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo/wording: In the description for the getLocationFromUser
tool (line 23-24), the phrase "if the user does provide one" is confusing. It might be a mistake; perhaps it should read "if the user does not provide one"?
"Asks the user for their location if the user does provide one.", | |
"Asks the user for their location if the user does not provide one.", |
WalkthroughThe set of changes introduces a type-safe, extensible system for defining and integrating AI assistant tools within a React application, using the Vercel AI SDK and the 🪧 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 10
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yaml
is excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx
(1 hunks)examples/with-ai-sdk/app/api/chat/route.ts
(2 hunks)examples/with-ai-sdk/lib/tools.tsx
(1 hunks)examples/with-ai-sdk/package.json
(3 hunks)examples/with-ai-sdk/tsconfig.json
(1 hunks)packages/react/src/runtimes/core/ThreadRuntimeCore.tsx
(3 hunks)packages/react/src/types/vercel.ts
(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
examples/with-ai-sdk/app/api/chat/route.ts (1)
examples/with-ai-sdk/lib/tools.tsx (1)
tools
(32-32)
packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (3)
packages/react/src/types/vercel.ts (1)
Vercel_AI_SDK_Tool
(31-83)packages/react/src/model-context/index.ts (5)
tool
(28-28)Tool
(25-25)AssistantTool
(1-1)useAssistantTool
(7-7)makeAssistantToolUI
(4-4)packages/react/src/types/index.ts (1)
ToolCallContentPartComponent
(44-44)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx (4)
packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (1)
assistantUIToolBox
(162-206)examples/with-ai-sdk/lib/tools.tsx (1)
Tools
(31-31)examples/with-ai-sdk/app/api/chat/route.ts (1)
runtime
(5-5)packages/react-ai-sdk/src/ui/use-chat/useVercelUseChatRuntime.tsx (1)
useVercelUseChatRuntime
(23-94)
examples/with-ai-sdk/lib/tools.tsx (1)
packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (1)
AssistantUITools
(134-134)
🪛 Biome (1.9.4)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx
[error] 14-18: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🔇 Additional comments (9)
packages/react/src/types/vercel.ts (1)
25-83
: Well-structured type definition with clear documentationThe
Vercel_AI_SDK_Tool
type is well-designed with thorough JSDoc comments. The discriminated union pattern for different tool types is a good approach for type safety.examples/with-ai-sdk/app/api/chat/route.ts (3)
1-1
: Good import naming for clarityImporting as
exampleTools
clearly distinguishes these from the incoming requesttools
. This helps prevent confusion when both are used together.
14-16
: Add error handling for the stream text functionAdding error logging is a good practice for debugging issues with the AI stream.
20-22
:❓ Verification inconclusive
Verify the need for checking both tools conditions
The condition now requires both
tools
ANDexampleTools
to be truthy. Verify this is intentional, asexampleTools
should always be available from the import unless there's an error.Are there scenarios where
exampleTools
might be undefined or falsy? Since it's imported at the top of the file, it should always be available unless there's an issue with the import itself.
🏁 Script executed:
#!/bin/bash # Check if the tools export is properly defined in the imported file cat examples/with-ai-sdk/lib/tools.tsx | grep -A 5 "export const tools"Length of output: 106
Clarification on the Tools Check
After verifying the export in
examples/with-ai-sdk/lib/tools.tsx
(which confirms thattools
is properly defined), it appears that sinceexampleTools
is also imported at the top of the file, it should always be available. In the absence of any dynamic or conditional assignment that might setexampleTools
to a falsy value, the extra truthiness check forexampleTools
seems redundant.Please confirm whether this additional check is intended as a defensive safeguard or if it can be safely removed for clarity.
examples/with-ai-sdk/lib/tools.tsx (2)
7-19
: Looks Good
The tool definition is straightforward, and the usage ofz.object
for parameter validation is beneficial for type safety. The random temperature generation is suitable for demonstration, with a clear placeholder logic.
21-28
: Confirm noexecute
usage
This tool lacks anexecute
function, which is correct if you only collect user data on the client. Just verify that upstream code doesn’t expect a server-side execution.examples/with-ai-sdk/app/MyRuntimeProvider.tsx (1)
25-50
: Clear and user-friendly UI
No issues found; effectively demonstrates how to render the weather tool’s results.packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (2)
142-158
: Helper function for creating an Assistant Tool
This_internal_makeAssistantTool
function is well-structured. It handles parameter registration and neatly returnsnull
for the UI. Great approach for a modular tool system.
162-206
: Proxy-based toolbox creation
This proxy approach simplifies tool creation and rendering. The design is flexible and type-safe, aligning well with the rest of the runtime.
*/ | ||
export type Vercel_AI_SDK_Tool< | ||
PARAMETERS extends Vercel_AI_SDK_ToolParameters = any, | ||
RESULT = any, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Improve function documentation for experimental feature
The JSDoc comment for the tool type is clear, but it would be helpful to add a note indicating that experimental_toToolResultContent
is subject to change in future releases, given its experimental_
prefix.
PARAMETERS extends Vercel_AI_SDK_ToolParameters = any, | ||
RESULT = any, | ||
> = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Consider adding a default type parameter example
The type parameters are defined with any
defaults, which can reduce type safety. Consider adding documentation with examples of how to properly use the generic parameters for better developer experience.
* Messages that were sent to the language model to initiate the response that contained the tool call. | ||
* The messages **do not** include the system prompt nor the assistant response that contained the tool call. | ||
*/ | ||
messages: any[]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Use more specific typing for messages array
The messages
property is typed as any[]
which loses type safety. Consider using a more specific message type that matches the expected structure.
- messages: any[];
+ messages: Array<{ role: string; content: string | object; }>;
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
messages: any[]; | |
messages: Array<{ role: string; content: string | object; }>; |
type Vercel_AI_SDK_ToolParameters = z.ZodTypeAny; | ||
|
||
type ToolParameters = z.ZodTypeAny; | ||
export type PARAMETERS = z.ZodTypeAny; | ||
export type Vercel_AI_SDK_inferParameters<PARAMETERS extends ToolParameters> = | ||
PARAMETERS extends z.ZodTypeAny ? z.infer<PARAMETERS> : never; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Consider streamlining redundant type aliases
There appear to be three very similar type aliases (Vercel_AI_SDK_ToolParameters
, ToolParameters
, and PARAMETERS
) that all reference z.ZodTypeAny
. Consider consolidating these or documenting their distinct purposes.
-type Vercel_AI_SDK_ToolParameters = z.ZodTypeAny;
-
-type ToolParameters = z.ZodTypeAny;
-export type PARAMETERS = z.ZodTypeAny;
+/**
+ * Type alias for Zod schema parameters
+ */
+export type Vercel_AI_SDK_ToolParameters = z.ZodTypeAny;
+
+// Re-export for backward compatibility or internal use
+type ToolParameters = Vercel_AI_SDK_ToolParameters;
+export type PARAMETERS = Vercel_AI_SDK_ToolParameters;
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
type Vercel_AI_SDK_ToolParameters = z.ZodTypeAny; | |
type ToolParameters = z.ZodTypeAny; | |
export type PARAMETERS = z.ZodTypeAny; | |
export type Vercel_AI_SDK_inferParameters<PARAMETERS extends ToolParameters> = | |
PARAMETERS extends z.ZodTypeAny ? z.infer<PARAMETERS> : never; | |
/** | |
* Type alias for Zod schema parameters | |
*/ | |
export type Vercel_AI_SDK_ToolParameters = z.ZodTypeAny; | |
// Re-export for backward compatibility or internal use | |
type ToolParameters = Vercel_AI_SDK_ToolParameters; | |
export type PARAMETERS = Vercel_AI_SDK_ToolParameters; | |
export type Vercel_AI_SDK_inferParameters<PARAMETERS extends ToolParameters> = | |
PARAMETERS extends z.ZodTypeAny ? z.infer<PARAMETERS> : never; |
examples/with-ai-sdk/tsconfig.json
Outdated
@@ -4,6 +4,7 @@ | |||
"target": "ES6", | |||
"module": "ESNext", | |||
"incremental": true, | |||
"exactOptionalPropertyTypes": false, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Document the reason for disabling exactOptionalPropertyTypes
Adding "exactOptionalPropertyTypes": false
makes TypeScript less strict about optional properties. Consider adding a comment explaining why this relaxation is necessary for the tool calling implementation.
+ // Disabled to support tool parameter handling where undefined values may be explicitly set
"exactOptionalPropertyTypes": false,
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
"exactOptionalPropertyTypes": false, | |
// Disabled to support tool parameter handling where undefined values may be explicitly set | |
"exactOptionalPropertyTypes": false, |
@@ -37,4 +39,4 @@ | |||
"tailwindcss": "^4.1.3", | |||
"typescript": "^5" | |||
} | |||
} | |||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Add a newline at end of file
The file is missing a newline at the end, which is a common best practice and may affect some tools.
}
+
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
} | |
} | |
@@ -9,6 +9,7 @@ | |||
"lint": "next lint" | |||
}, | |||
"dependencies": { | |||
"@ai-sdk/react": "*", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Avoid using wildcard versions for dependencies
Using "*"
for @ai-sdk/react
could lead to unexpected behavior if there are breaking changes. Specify a version range to ensure stability.
- "@ai-sdk/react": "*",
+ "@ai-sdk/react": "^1.0.0", // Replace with appropriate version
Committable suggestion skipped: line range outside the PR's diff.
<button | ||
onClick={() => { | ||
a.addResult("Mumbai"); | ||
}} | ||
> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Add a button type
Consider specifying type="button"
to prevent default form submission behavior if this button is ever placed inside a form or if future changes wrap it in a form.
<button
+ type="button"
onClick={() => {
a.addResult("Mumbai");
}}
>
Answer Mumbai
</button>
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
<button | |
onClick={() => { | |
a.addResult("Mumbai"); | |
}} | |
> | |
<button | |
type="button" | |
onClick={() => { | |
a.addResult("Mumbai"); | |
}} | |
> | |
Answer Mumbai | |
</button> |
🧰 Tools
🪛 Biome (1.9.4)
[error] 14-18: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form
element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
// TODO: Add langchain / langgraph support. | ||
// type LangChainToolShim = {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Follow up on TODO for Langchain / Langgraph
A reminder that the code references adding support for these integrations. Consider opening a ticket for tracking or implementing in a future PR.
// execute?: T[K]["execute"] extends undefined | ||
// ? (a: Vercel_AI_SDK_inferParameters<T[K]["parameters"]>) => A | ||
// : never; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Address commented-out execute logic
There is a commented code snippet for optional client-side execution. If you plan to implement it, consider re-enabling it in upcoming iterations. Otherwise, remove or clarify it to reduce confusion.
Pull request summary
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 3
♻️ Duplicate comments (5)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx (2)
14-14
: Add type="button"
This was previously noted in a past review. Specifying an explicit button type prevents unintended form submission.
16-16
: Hard-coded location reduces reusability
This was previously noted. Consider allowing dynamic location input for better reusability and testing.packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (3)
142-158
: Internal function is still exported
This was previously noted. The underscore prefix_internal_makeAssistantTool
conflicts with its export, suggesting confusion about intended usage.
186-186
: Type assertion can bypass checks
This was previously noted. Casting{}
asToolBox<T>
might hide potential type mismatches.
188-190
: Proxy does not validate the tool name
This was previously noted. The code only checks ifprop
is a string but not if it matches a valid tool in the record.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Lite
📒 Files selected for processing (2)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx
(1 hunks)packages/react/src/runtimes/core/ThreadRuntimeCore.tsx
(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (6)
packages/react/src/types/vercel.ts (1)
Vercel_AI_SDK_Tool
(31-83)packages/react/src/model-context/index.ts (5)
tool
(28-28)Tool
(25-25)AssistantTool
(1-1)useAssistantTool
(7-7)makeAssistantToolUI
(4-4)packages/react/src/model-context/makeAssistantTool.tsx (1)
AssistantTool
(6-8)packages/react/src/model-context/useAssistantTool.tsx (1)
useAssistantTool
(17-42)packages/react/src/types/index.ts (1)
ToolCallContentPartComponent
(44-44)packages/react/src/model-context/makeAssistantToolUI.tsx (1)
makeAssistantToolUI
(13-22)
🔇 Additional comments (7)
examples/with-ai-sdk/app/MyRuntimeProvider.tsx (4)
1-2
: No concerns for the "use client" directive.
Implementation is aligned with Next.js client components.
3-7
: Imports look good
No issues found with these import statements.
9-9
: Toolbox creation
The creation of a typed toolbox for the Tools interface is correct.
52-69
: No issues found
Implementation details look consistent and well-structured.packages/react/src/runtimes/core/ThreadRuntimeCore.tsx (3)
1-2
: zod import
No concerns with introducing the zod dependency.
22-22
: Import of Vercel_AI_SDK_Tool
No issues with this addition.
160-161
: Utility type
Extracting return types withCustomReturnType
looks fine.
const Weather = toolbox.weather.defineToolUI({ | ||
render: ({ result }) => { | ||
if (!result) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<div className="mx-auto flex max-w-sm items-center space-x-4 rounded-xl bg-white p-6 shadow-lg"> | ||
<div className="shrink-0"> | ||
{/* Weather icon - using a simple emoji as placeholder */} | ||
<span className="text-4xl">☀️</span> | ||
</div> | ||
<div> | ||
<div className="text-xl font-medium text-black">Weather Report</div> | ||
<p className="text-slate-500"> | ||
The weather in{" "} | ||
<span className="font-semibold text-blue-600"> | ||
{result.location} | ||
</span>{" "} | ||
is <span className="font-bold">{result.tempCelsius}°C</span> | ||
</p> | ||
</div> | ||
</div> | ||
); | ||
}, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Consider externalizing the weather icon
Refactoring to pass an icon or image as a prop can improve theming and testability.
|
||
// TODO: Add langchain / langgraph support. | ||
// type LangChainToolShim = {} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Remember the TODO
Langchain / langgraph integration is still pending. Let me know if you want me to open a new issue or help prepare a partial implementation.
export type ToolName = string; | ||
export type AssistantUITools = Record<ToolName, Vercel_AI_SDK_Tool<any, any>>; | ||
|
||
type InternalMakeAssistantToolArgs<TResult> = { | ||
toolName: string; | ||
parameters: z.ZodTypeAny; | ||
// execute: (a: Vercel_AI_SDK_inferParameters<z.ZodTypeAny>) => TResult; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧹 Nitpick (assertive)
Use a narrower schema type
Using z.ZodTypeAny
in InternalMakeAssistantToolArgs
can degrade type safety. Consider a more specific schema type parameter if feasible.
This PR adds new tool calling DX for the Vercel AI SDK, follow up PR's will add this functionality to langgraph and the new assistant stream runtime features.
Important
Introduces new tool calling DX for Vercel AI SDK with tool definitions, UI components, and runtime configurations.
MyRuntimeProvider.tsx
to defineGetLocationFromUser
andWeather
tools usingassistantUIToolBox
.useVercelUseChatRuntime
anduseChat
for chat functionality.route.ts
to importexampleTools
and handle tool parameters withjsonSchema
.weather
andgetLocationFromUser
tools intools.tsx
withzod
for parameter validation.ThreadRuntimeCore.tsx
withassistantUIToolBox
and_internal_makeAssistantTool
for tool UI definition.vercel.ts
to defineVercel_AI_SDK_Tool
and related types for tool execution.This description was created by
for 241b890. It will automatically update as commits are pushed.