docs(ai-vue): add docs for ai-vue #126
Conversation
docs/api/ai-vue.md
Outdated
| <div v-for="part in message.parts" :key="part.id"> | ||
| <span v-if="part.type === 'text'">{{ part.content }}</span> | ||
| <div v-else-if="part.type === 'thinking'"> | ||
| <div class="text-sm text-gray-500 italic">💭 Thinking: {{ part.content }}</div> |
There was a problem hiding this comment.
This could potentially be merged with wrapper div
| const handleSubmit = (e: Event) => { | ||
| const val = input.value.trim() | ||
| if (((val ?? '') !== '') && !isLoading) { | ||
| sendMessage(input.value); |
There was a problem hiding this comment.
I guess we would need e.target.reset() as well to clear the form on submit.
| const notification = ref<string | null>(null); | ||
|
|
||
| // Create client tool implementations, | ||
| const updateUI = updateUIDef.client((input) => { |
There was a problem hiding this comment.
Not sure what is the purpose of this tool. Maybe it makes sense in React to set state causing a re-render, but in Vue it would do nothing as notification ref is not used anywhere.
@AlemTuzlak Was original React intention just to cause a re-render?
| createChatClientOptions, | ||
| type InferChatMessages | ||
| } from "@tanstack/ai-client"; | ||
| import { updateUIDef } from "@/tools/definitions"; |
There was a problem hiding this comment.
This tool def seems to be buried in one of the other pages, maybe in-lining it would be wise?
Or at least a link to this tool definition?
@AlemTuzlak
docs/api/ai-vue.md
Outdated
|
|
||
| ```typescript | ||
| interface UseChatReturn { | ||
| messages: UIMessage[]; |
There was a problem hiding this comment.
This is actually a DeepReadonly<ShallowRef<Array<UIMessage>>>
docs/api/ai-vue.md
Outdated
| }) => Promise<void>; | ||
| reload: () => Promise<void>; | ||
| stop: () => void; | ||
| isLoading: boolean; |
There was a problem hiding this comment.
isLoading: DeepReadonly<ShallowRef<boolean>>
docs/api/ai-vue.md
Outdated
| reload: () => Promise<void>; | ||
| stop: () => void; | ||
| isLoading: boolean; | ||
| error: Error | undefined; |
There was a problem hiding this comment.
error: DeepReadonly<ShallowRef<Error | undefined>>
| } from "@tanstack/ai-client"; | ||
| import { updateUIDef, saveToStorageDef } from "@/tools/definitions"; | ||
|
|
||
| const notification = ref<{message: string; type: 'success' | 'error'}>(null); |
There was a problem hiding this comment.
Not sure what for notification is used in this example
📝 WalkthroughWalkthroughA new API documentation file for TanStack AI Vue is added, detailing the useChat composable, connection adapters, usage examples, and type exports. The documentation configuration is updated to reference this new API documentation entry. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested reviewers
Poem
Pre-merge checks✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
Fix all issues with AI Agents 🤖
In @docs/api/ai-vue.md:
- Line 198: The type for the reactive "notification" ref doesn't allow null
despite being initialized to null; update the declaration of notification so its
generic includes null (i.e., make the ref type `{ message: string; type:
'success' | 'error' } | null`) so the initial null value is type-safe while
preserving the original object shape.
- Around line 127-132: handleSubmit uses a Ref incorrectly and has redundant
parentheses; compute val as a trimmed string (e.g., const val =
input.value?.trim() ?? ''), check if val !== '' && !isLoading.value, and call
sendMessage(val) (not sendMessage(input.value)) before clearing input.value = ''
so you pass the trimmed text and properly access the ShallowRef isLoading via
.value.
- Line 151: Replace the incorrect opening "<div>" tag at the end of the block
with the proper closing "</div>" tag; locate the stray "<div>" (the unmatched
tag) and change it to "</div>" so the HTML structure is properly closed.
♻️ Duplicate comments (2)
docs/api/ai-vue.md (2)
198-209: Consider removing or utilizing the unused notification ref.The
notificationref is created and updated by the client tools but is never rendered in the template, making this part of the example incomplete. Consider either:
- Adding template code to display the notification
- Removing the notification ref if it's not needed for this example
28-36: Clarify or inline the tool definition to avoid confusion.The import from
"@/tools/definitions"references a non-existent path in the documentation. While the comment on line 27 links to the client-tools guide, consider either:
- Inlining the tool definition directly in the example
- Adding a clear note that this is a placeholder path users should replace
Additionally, the
notificationref created on line 30 is never used in the template (lines 52-54), making the client tool example incomplete.Suggested improvement to inline the tool definition
-// see more in https://tanstack.com/ai/latest/docs/guides/client-tools#defining-client-tools -import { updateUIDef } from "@/tools/definitions"; +import { toolDefinition } from "@tanstack/ai"; + +// Define the tool inline for clarity +const updateUIDef = toolDefinition({ + name: 'updateUI', + description: 'Updates the UI with a notification', + parameters: z.object({ + message: z.string(), + }), +});
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/api/ai-vue.mddocs/config.json
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Implement framework integrations using the headless `tanstack/ai-client` for state management with framework-specific hooks (useChat) on top
Applied to files:
docs/api/ai-vue.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to **/*.{ts,tsx} : Implement isomorphic tool system using `toolDefinition()` with `.server()` and `.client()` implementations for dual-environment execution
Applied to files:
docs/api/ai-vue.md
📚 Learning: 2025-12-13T17:09:09.794Z
Learnt from: CR
Repo: TanStack/ai PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-13T17:09:09.794Z
Learning: Applies to packages/typescript/*/src/index.ts : Export tree-shakeable adapters with clear subpath exports in package.json (e.g., `tanstack/ai/adapters`, `tanstack/ai-openai/adapters`) to minimize bundle size
Applied to files:
docs/config.json
🔇 Additional comments (1)
docs/config.json (1)
125-129: LGTM!The new API entry for
@tanstack/ai-vuefollows the correct structure and is properly integrated into the configuration.
| const handleSubmit = (e: Event) => { | ||
| const val = input.value.trim() | ||
| if (((val ?? '') !== '') && !isLoading) { | ||
| sendMessage(input.value); | ||
| input.value = ''; | ||
| } |
There was a problem hiding this comment.
Fix ref access and simplify condition.
The condition on line 129 should use !isLoading.value since isLoading is a ShallowRef<boolean> and requires explicit .value access in the script section (Vue only auto-unwraps refs in templates).
Additionally, the condition on line 128 has unnecessary nested parentheses.
🔎 Proposed fix
const handleSubmit = (e: Event) => {
const val = input.value.trim()
- if (((val ?? '') !== '') && !isLoading) {
+ if (val !== '' && !isLoading.value) {
sendMessage(input.value);
input.value = '';
}
};🤖 Prompt for AI Agents
In @docs/api/ai-vue.md around lines 127-132, handleSubmit uses a Ref incorrectly
and has redundant parentheses; compute val as a trimmed string (e.g., const val
= input.value?.trim() ?? ''), check if val !== '' && !isLoading.value, and call
sendMessage(val) (not sendMessage(input.value)) before clearing input.value = ''
so you pass the trimmed text and properly access the ShallowRef isLoading via
.value.
| Send | ||
| </button> | ||
| </form> | ||
| <div> |
There was a problem hiding this comment.
Fix closing tag syntax error.
Line 151 has a syntax error - it should be a closing </div> tag, not an opening <div> tag.
🔎 Proposed fix
</form>
- <div>
+ </div>
</template>📝 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.
| <div> | |
| </form> | |
| </div> | |
| </template> |
🤖 Prompt for AI Agents
In @docs/api/ai-vue.md around line 151, Replace the incorrect opening "<div>"
tag at the end of the block with the proper closing "</div>" tag; locate the
stray "<div>" (the unmatched tag) and change it to "</div>" so the HTML
structure is properly closed.
| } from "@tanstack/ai-client"; | ||
| import { updateUIDef, saveToStorageDef } from "@/tools/definitions"; | ||
|
|
||
| const notification = ref<{message: string; type: 'success' | 'error'}>(null); |
There was a problem hiding this comment.
Fix type definition to include null.
The ref is initialized with null but the type definition doesn't include null in the union, which is a type error.
🔎 Proposed fix
-const notification = ref<{message: string; type: 'success' | 'error'}>(null);
+const notification = ref<{message: string; type: 'success' | 'error'} | null>(null);📝 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.
| const notification = ref<{message: string; type: 'success' | 'error'}>(null); | |
| const notification = ref<{message: string; type: 'success' | 'error'} | null>(null); |
🤖 Prompt for AI Agents
In @docs/api/ai-vue.md around line 198, The type for the reactive "notification"
ref doesn't allow null despite being initialized to null; update the declaration
of notification so its generic includes null (i.e., make the ref type `{
message: string; type: 'success' | 'error' } | null`) so the initial null value
is type-safe while preserving the original object shape.
3 participants
🎯 Changes
✅ Checklist
pnpm run test:pr.🚀 Release Impact
add docs for
@tanstack/ai-vueSummary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.