feat(grid): optimize mcp configuration usage and sample code

[zzcr]

feat(grid): 优化mcp配置用法和示例代码

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
  o

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• New Features

  • Integrated session management for client sessions, enabling reactive updates to the global conversation state.
  • Updated to support the latest version of Tiny Vue (3.24).

• Bug Fixes

  • Improved session ID handling for chat streaming, ensuring correct session tracking.

• Refactor

  • Simplified grid demo components by removing city selection and dynamic server communication, focusing on static data display.
  • Migrated grid demo to Composition API for improved maintainability.

• Chores

  • Updated and cleaned up dependencies, removing unused packages and adding new required ones.
  • Enhanced prompt descriptions and suggestions for company personnel table interactions.

[coderabbitai]

Walkthrough

The changes refactor a grid demo from Vue Options API to Composition API, simplify the grid to static data, and remove city filtering and complex client-server logic. Dependencies are updated to use @opentiny/next-vue, and session management is centralized via a global conversation object. Related prompts, tests, and documentation are updated accordingly.

Changes

File(s)	Change Summary
.../grid/base/basic-usage-composition-api.vue, .../grid/base/basic-usage.vue	Refactored from Options API to Composition API, removed city filter and client-server logic, simplified to static grid display.
.../grid/base/basic-usage.spec.js	Updated test to assert cell visibility instead of row, focusing on static data.
.../package.json	Removed @modelcontextprotocol/sdk, added @opentiny/next-vue, updated @opentiny/tiny-vue-mcp version.
.../playground/App.vue	Updated version constants and array to reflect new version 3.24.
.../src/App.vue	Integrated session management using useNextClient, synchronized sessionId with global conversation object.
.../components-doc/composition/DifyModelProvider.ts	Changed sessionId source from window.$sessionId to globalConversation.sessionId.
.../components-doc/composition/useTinyRobot.ts	Updated prompt descriptions and removed city dropdown from suggestion pills.
.../components-doc/composition/utils.ts	Added sessionId property to globalConversation object.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant GridComponent
    participant useNextServer
    participant Server

    User->>GridComponent: Mounts component
    GridComponent->>useNextServer: Initialize with server info
    useNextServer-->>GridComponent: Returns server instance
    GridComponent->>Server: Uses server for grid config (if needed)
    User->>GridComponent: Views static grid data

Loading

sequenceDiagram
    participant AppVue
    participant useNextClient
    participant globalConversation

    AppVue->>useNextClient: Initialize client with info
    useNextClient-->>AppVue: Provides sessionId (reactive)
    AppVue->>globalConversation: Watch sessionId and update globalConversation.sessionId

Loading

Poem

A bunny hops through lines anew,
Composition API in view!
City filters now are gone,
Static grids to gaze upon.
Sessions tracked with gentle care,
New versions floating in the air—
Code refreshed, the future bright,
Rabbit winks with pure delight! 🐇✨

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

examples/sites/src/views/components-doc/composition/DifyModelProvider.ts

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/demos/pc/app/grid/base/basic-usage.spec.js

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

• 5 others

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 875c685 and 2b7fa01.

📒 Files selected for processing (9)

• examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue (1 hunks)
• examples/sites/demos/pc/app/grid/base/basic-usage.spec.js (1 hunks)
• examples/sites/demos/pc/app/grid/base/basic-usage.vue (2 hunks)
• examples/sites/package.json (1 hunks)
• examples/sites/playground/App.vue (2 hunks)
• examples/sites/src/App.vue (2 hunks)
• examples/sites/src/views/components-doc/composition/DifyModelProvider.ts (1 hunks)
• examples/sites/src/views/components-doc/composition/useTinyRobot.ts (1 hunks)
• examples/sites/src/views/components-doc/composition/utils.ts (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

examples/sites/src/views/components-doc/composition/DifyModelProvider.ts (1)

examples/sites/src/views/components-doc/composition/utils.ts (1)

• globalConversation (10-13)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: PR E2E Test (pnpm test:e2e3)

🔇 Additional comments (14)

examples/sites/src/views/components-doc/composition/utils.ts (1)

10-13: LGTM! Session management centralization looks good.

The addition of sessionId property to globalConversation is consistent with the existing pattern and supports the new centralized session management approach. The initialization as an empty string follows the same convention as the id property.

examples/sites/package.json (2)

35-35: LGTM! MCP version upgrade is appropriate.

The upgrade of @opentiny/tiny-vue-mcp from 0.0.1-alpha.1 to 0.0.1-alpha.2 aligns with the overall refactoring and likely includes fixes or improvements needed for the new architecture.

---

31-31:

❓ Verification inconclusive

Verify stability of alpha version dependency.

The addition of @opentiny/next-vue version 0.0.1-alpha.1 introduces an alpha-stage dependency. Ensure this package is stable enough for the intended use case and consider pinning to a specific commit or using a more stable version if available.

---

🏁 Script executed:

#!/bin/bash
# Check if @opentiny/next-vue has newer versions available
npm view @opentiny/next-vue versions --json

Length of output: 86

---

Confirm pre-release dependency stability

@opentiny/next-vue is only available as an alpha release (0.0.1-alpha.1 is the latest; no stable versions exist). Please verify that this pre-release meets your requirements. If stability is critical, consider:

• Pinning to the exact alpha version or a specific commit
• Evaluating a stable alternative (or delaying upgrade until a non-alpha release is published)

Location:

• examples/sites/package.json: line 31

examples/sites/demos/pc/app/grid/base/basic-usage.spec.js (1)

7-7: LGTM! Active assertion is more valuable than commented code.

The change from a commented assertion to an active one that checks for cell content is good. The test now verifies that the grid displays the expected company name "GFD 有限责任公司", which aligns with the grid simplification mentioned in the summary.

examples/sites/src/views/components-doc/composition/DifyModelProvider.ts (1)

50-50: LGTM! Centralized session management implementation is consistent.

The change from window.$sessionId to globalConversation.sessionId is excellent. This eliminates global window pollution and provides better type safety and maintainability. The implementation aligns perfectly with the new sessionId property added to globalConversation in utils.ts.

examples/sites/playground/App.vue (2)

14-14: LGTM! Version constant update is appropriate.

The version bump from 'tiny-vue-version-3.23' to 'tiny-vue-version-3.24' aligns with the project's version upgrade and the broader changes in this PR.

---

26-26: LGTM! Versions array correctly updated.

Adding '3.24' as the first element in the versions array ensures it's treated as the latest version. The implementation maintains the existing pattern of keeping the most recent versions available.

examples/sites/src/App.vue (2)

14-14: Good integration of session management dependencies.

The addition of necessary imports (watch, useNextClient, globalConversation) properly supports the new session management functionality.

Also applies to: 19-20

---

34-46: Well-implemented session management integration.

The session management setup is clean and follows Vue 3 reactive patterns correctly:

• useNextClient is properly initialized with client configuration
• The watcher ensures globalConversation.sessionId stays in sync with the reactive session ID
• This centralizes session management as intended by the MCP optimization

examples/sites/src/views/components-doc/composition/useTinyRobot.ts (1)

30-30: Prompt descriptions updated to align with simplified grid demo.

The updated prompts now focus specifically on company employee statistics rather than generic table operations, which aligns well with the simplified grid demo that removed city filtering functionality.

Also applies to: 35-35

examples/sites/demos/pc/app/grid/base/basic-usage.vue (1)

15-15: Imports properly simplified.

Good cleanup removing unused imports (TinyBaseSelect) while keeping only the necessary grid components.

Also applies to: 20-20

examples/sites/demos/pc/app/grid/base/basic-usage-composition-api.vue (3)

25-28: Excellent refactor to Composition API with script setup.

The migration from Options API to Composition API using <script setup> is clean and follows Vue 3 best practices. The imports are well-organized and the new useNextServer composable integration is properly implemented.

---

50-50: Well-implemented reactive data and server configuration.

Good use of ref() for reactive table data and clean integration of the useNextServer composable. The server configuration with name: 'company-information' and version: '1.0.0' is appropriate for this use case.

Also applies to: 52-54

---

7-13: Proper MCP configuration integration.

The tiny_mcp_config properly integrates the server instance with relevant business context. The configuration clearly identifies this as a company information table, which will help with AI assistant interactions.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
  • Explain this complex logic.
  • 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 explain this code block.
  • @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 explain its main purpose.
  • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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 generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this 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.