Thanks to visit codestin.com
Credit goes to github.com

Skip to content

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

Open
wants to merge 39 commits into
base: main
Choose a base branch
from
Open

New tool calling DX for Vercel AI SDK #1840

wants to merge 39 commits into from

Conversation

heyglassy
Copy link
Collaborator

@heyglassy heyglassy commented Apr 14, 2025

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.

  • New Tool Integration:
    • Adds MyRuntimeProvider.tsx to define GetLocationFromUser and Weather tools using assistantUIToolBox.
    • Implements useVercelUseChatRuntime and useChat for chat functionality.
  • API Enhancements:
    • Updates route.ts to import exampleTools and handle tool parameters with jsonSchema.
  • Tool Definitions:
    • Defines weather and getLocationFromUser tools in tools.tsx with zod for parameter validation.
  • Core Enhancements:
    • Extends ThreadRuntimeCore.tsx with assistantUIToolBox and _internal_makeAssistantTool for tool UI definition.
  • Type Definitions:
    • Adds vercel.ts to define Vercel_AI_SDK_Tool and related types for tool execution.

This description was created by Ellipsis for 241b890. It will automatically update as commits are pushed.

@Copilot Copilot AI review requested due to automatic review settings April 14, 2025 21:55
Copy link

changeset-bot bot commented Apr 14, 2025

⚠️ No Changeset found

Latest commit: 241b890

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

vercel bot commented Apr 14, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
assistant-ui ❌ Failed (Inspect) Apr 15, 2025 7:24am

Copy link
Contributor

@Copilot Copilot AI left a 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.",
Copy link
Preview

Copilot AI Apr 14, 2025

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.

Suggested change
"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.

Copy link
Contributor

Review Summary

Skipped posting 3 drafted comments based on your review threshold. Feel free to update them here.

Draft Comments
examples/with-ai-sdk/lib/tools.tsx:7-7
The `description` for the `weather` tool has a typo: "Fetched" should be "Fetches" since it's describing what the tool does in present tense.

Scores:

  • Production Impact: 1
  • Fix Specificity: 5
  • Urgency Impact: 1
  • Total Score: 7

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
The `description` for the `getLocationFromUser` tool has a logical error: it says "if the user does provide one" when it should be "if the user does not provide one" based on the tool's purpose.

Scores:

  • Production Impact: 3
  • Fix Specificity: 5
  • Urgency Impact: 4
  • Total Score: 12

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
The import path for `Vercel_AI_SDK_Tool` uses a package name `@assistant-ui/react/types/vercel` which appears to be incorrect. It should likely be a relative import from the local project.

Scores:

  • Production Impact: 4
  • Fix Specificity: 5
  • Urgency Impact: 4
  • Total Score: 13

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.

Copy link
Contributor

LGTM 👍

Copy link
Contributor

@greptile-apps greptile-apps bot left a 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 new assistantUIToolBox 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

Comment on lines 20 to +21
tools &&
exampleTools &&
Copy link
Contributor

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.",
Copy link
Contributor

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'

Suggested change
description: "Fetched the current weather in the given location.",
description: "Fetches the current weather in the given location.",

Comment on lines +23 to +24
description:
"Asks the user for their location if the user does provide one.",
Copy link
Contributor

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

Suggested change
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": "*",
Copy link
Contributor

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(),
Copy link
Contributor

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.

Copy link

@mrge-io mrge-io bot left a 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": "*",
Copy link

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 &&
Copy link

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<
Copy link

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");
Copy link

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 = <
Copy link

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 = () => {
Copy link

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>, {
Copy link

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") {
Copy link

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.

Copy link
Contributor

promptless bot commented Apr 14, 2025

📝 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.",
Copy link
Contributor

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"?

Suggested change
"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.",

Copy link
Contributor

coderabbitai bot commented Apr 14, 2025

Walkthrough

The 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 zod schema validation library. A new tools.tsx module defines two sample tools—weather and getLocationFromUser—with parameter schemas and execution logic. Supporting type definitions for AI SDK tools, including parameter inference and execution options, are added in a new types file. The React runtime is extended with a factory function, assistantUIToolBox, which generates a toolbox proxy for registering and rendering assistant tools with optional custom UIs. A provider component, MyRuntimeProvider, is introduced to set up the assistant runtime and integrate the defined tools into the React context, including interactive UI elements for tool invocation. Package dependencies for @ai-sdk/react and zod are added. Minor adjustments are made to the chat API route to conditionally include tools and handle errors. No breaking changes to existing exports are present.


🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 585643d and a355ce5.

⛔ 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 documentation

The 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 clarity

Importing as exampleTools clearly distinguishes these from the incoming request tools. This helps prevent confusion when both are used together.


14-16: Add error handling for the stream text function

Adding 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 AND exampleTools to be truthy. Verify this is intentional, as exampleTools 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 that tools is properly defined), it appears that since exampleTools 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 set exampleTools to a falsy value, the extra truthiness check for exampleTools 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 of z.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 no execute usage
This tool lacks an execute 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 returns null 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.

Comment on lines +30 to +33
*/
export type Vercel_AI_SDK_Tool<
PARAMETERS extends Vercel_AI_SDK_ToolParameters = any,
RESULT = any,
Copy link
Contributor

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.

Comment on lines +32 to +34
PARAMETERS extends Vercel_AI_SDK_ToolParameters = any,
RESULT = any,
> = {
Copy link
Contributor

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[];
Copy link
Contributor

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.

Suggested change
messages: any[];
messages: Array<{ role: string; content: string | object; }>;

Comment on lines +3 to +8
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;
Copy link
Contributor

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.

Suggested change
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;

@@ -4,6 +4,7 @@
"target": "ES6",
"module": "ESNext",
"incremental": true,
"exactOptionalPropertyTypes": false,
Copy link
Contributor

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.

Suggested change
"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"
}
}
}
Copy link
Contributor

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.

Suggested change
}
}

@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@ai-sdk/react": "*",
Copy link
Contributor

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.

Comment on lines +14 to +18
<button
onClick={() => {
a.addResult("Mumbai");
}}
>
Copy link
Contributor

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.

Suggested change
<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)

Comment on lines +130 to +131
// TODO: Add langchain / langgraph support.
// type LangChainToolShim = {}
Copy link
Contributor

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.

Comment on lines +167 to +169
// execute?: T[K]["execute"] extends undefined
// ? (a: Vercel_AI_SDK_inferParameters<T[K]["parameters"]>) => A
// : never;
Copy link
Contributor

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.

Copy link

trag-bot bot commented Apr 15, 2025

Pull request summary

  • Introduced a new MyRuntimeProvider component to manage chat runtime and UI tools.
  • Added GetLocationFromUser and Weather tools to the UI toolbox, allowing users to interactively provide location and receive weather updates.
  • Implemented a weather tool that generates a random temperature for a given location, enhancing the user experience with dynamic data.
  • Updated the API route to handle errors more effectively by logging them to the console.
  • Enhanced the tools module to define new tools using Zod for input validation, ensuring that user inputs are correctly structured.
  • Updated package dependencies to include new versions of @ai-sdk/react, zod, and others, ensuring compatibility with the latest features and fixes.
  • Refactored the ThreadRuntimeCore to support new tool definitions and improve the overall structure of the runtime.
  • Added type definitions for new tools, improving type safety and developer experience.
  • Ensured that all new components and tools are properly exported for use in other parts of the application.
  • Updated the lock file to reflect changes in dependencies and ensure consistent installations across environments.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 {} as ToolBox<T> might hide potential type mismatches.


188-190: Proxy does not validate the tool name
This was previously noted. The code only checks if prop 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

📥 Commits

Reviewing files that changed from the base of the PR and between ee93b90 and 241b890.

📒 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 with CustomReturnType looks fine.

Comment on lines +25 to +50
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>
);
},
});
Copy link
Contributor

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.

Comment on lines +129 to +132

// TODO: Add langchain / langgraph support.
// type LangChainToolShim = {}

Copy link
Contributor

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.

Comment on lines +133 to +139
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;
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant