Skip to content

fix(robot): add examples of Perfecting AI Agents #3476

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.

Sign up for GitHub

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

Merged
merged 2 commits into from
Jun 4, 2025
Merged

fix(robot): add examples of Perfecting AI Agents #3476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27512db
fix(robot): 完善AI 智能体的例子
shenjunjian Jun 4, 2025
e0771bb
fix(robot): fix
shenjunjian Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 87 additions & 106 deletions examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,119 +1,100 @@
<template>
<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:tiny_mcp_config="{
server,
business: {
id: 'company-information',
description: '公司人员信息表'
}
}"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
<div>
<label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
<tiny-select
v-model="queryCity"
:options="options"
style="width: 200px; margin-bottom: 20px"
placeholder="选择城市"
:tiny_mcp_config="{
server,
business: {
id: 'city-dropdown',
description: '城市下拉框'
}
}"
></tiny-select>
Comment on lines +4 to +16
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Implement city filtering functionality.

Similar to the other file, the city dropdown lacks filtering functionality, making it purely cosmetic.

Add filtering logic as shown in the other file review. The implementation should be identical since both files use the same data structure.

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
between lines 4 and 16, the city dropdown component lacks filtering
functionality, making it non-interactive. To fix this, add a filtering method or
computed property that filters the options based on the user's input in the
dropdown. Bind this filtered list to the tiny-select component's options prop,
replicating the filtering logic used in the other reviewed file with the same
data structure.

<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
height="420px"
:tiny_mcp_config="{
server,
business: {
id: 'company-information',
description: '公司人员信息表'
}
}"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
<script>
import { TinyGrid, TinyGridColumn, TinySelect } from '@opentiny/vue'
import { createTransportPair, createSseProxy } from '@opentiny/next'
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { Client } from '@modelcontextprotocol/sdk/client/index.js'

// 定义响应式数据
const tableData = ref([
{
id: '1',
company: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false
export default {
components: {
TinyGrid,
TinyGridColumn,
TinySelect
},
{
id: '2',
company: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true
data() {
const _table = [
{ company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
{ company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
{ company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
{ company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
{ company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
{ company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
{ company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
{ company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
{ company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
{ company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
{ company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
{ company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
{ company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
{ company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
{ company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
{ company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
]
return {
server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
sessionID: '',
tableData: _table,
queryCity: '',
options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
label: city,
value: city
}))
}
},
{
id: '3',
company: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false
},
{
id: '4',
company: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true
},
{
id: '5',
company: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true
},
{
id: '6',
company: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11',
boole: true
},
{
id: '7',
company: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00',
boole: false
},
{
id: '8',
company: '深圳市福德宝网络技术 YX 公司',
boole: true,
city: '厦门',
createdDate: '2016-06-03 13:53:25',
employees: 540
}
])

const server = ref(new McpServer({ name: 'base-config', version: '1.0.0' }, {}))
const sessionID = ref('')
async mounted() {
// 1、
const [transport, clientTransport] = createTransportPair()

// 生命周期钩子
onMounted(async () => {
// 1、创建传输对
const [transport, clientTransport] = createTransportPair()
// 2、
const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
await client.connect(clientTransport)
const { sessionId } = await createSseProxy({
client,
url: 'http://39.108.160.245/sse'
})

// 2、创建并连接客户端
const client = new Client({ name: 'ai-agent', version: '1.0.0' }, {})
await client.connect(clientTransport)
const { sessionId } = await createSseProxy({
client,
url: 'https://39.108.160.245/sse'
})
this.sessionID = sessionId
window.$sessionId = this.sessionID

sessionID.value = sessionId
window.$sessionId = sessionID.value

// 3、连接服务器
await server.value.connect(transport)
})
// 3、
await this.server.connect(transport)
}
}
</script>
150 changes: 62 additions & 88 deletions examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,107 +1,81 @@
<template>
<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
:tiny_mcp_config="{
server,
business: {
id: 'company-information',
description: '公司人员信息表'
}
}"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
<div>
<label style="font-size: 1.5em; margin-right: 8px">选择城市:</label>
<tiny-select
v-model="queryCity"
:options="options"
style="width: 200px; margin-bottom: 20px"
placeholder="选择城市"
:tiny_mcp_config="{
server,
business: {
id: 'city-dropdown',
description: '城市下拉框'
}
}"
></tiny-select>
Comment on lines +4 to +16
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Implement city filtering functionality.

The city dropdown is currently non-functional - it's bound to queryCity but doesn't filter the grid data. This creates a misleading user interface.

Add a computed property to filter the table data:

  data() {
    // ... existing code
  },
+ computed: {
+   filteredTableData() {
+     if (!this.queryCity) {
+       return this.tableData
+     }
+     return this.tableData.filter(item => item.city === this.queryCity)
+   }
+ },

Then update the grid to use the filtered data:

-      :data="tableData"
+      :data="filteredTableData"
📝 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
<tiny-select
v-model="queryCity"
:options="options"
style="width: 200px; margin-bottom: 20px"
placeholder="选择城市"
:tiny_mcp_config="{
server,
business: {
id: 'city-dropdown',
description: '城市下拉框'
}
}"
></tiny-select>
<script>
export default {
data() {
return {
// ... existing data
queryCity: '',
options: [], // 城市选项列表
tableData: [] // 原始表格数据
}
},
computed: {
filteredTableData() {
if (!this.queryCity) {
return this.tableData
}
return this.tableData.filter(item => item.city === this.queryCity)
}
},
// ... 其他组件选项
}
</script>
<template>
<tiny-select
v-model="queryCity"
:options="options"
style="width: 200px; margin-bottom: 20px"
placeholder="选择城市"
:tiny_mcp_config="{
server,
business: {
id: 'city-dropdown',
description: '城市下拉框'
}
}"
></tiny-select>
<tiny-grid
:columns="columns"
:data="filteredTableData"
row-key="id"
<!-- 其他属性 -->
></tiny-grid>
</template>
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue around lines 4 to
16, the city dropdown is bound to queryCity but does not filter the grid data,
causing a misleading UI. To fix this, add a computed property that filters the
grid data based on the selected queryCity value, and update the grid component
to use this filtered data instead of the full dataset.

<tiny-grid
:data="tableData"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
height="420px"
:tiny_mcp_config="{
server,
business: {
id: 'company-information',
description: '公司人员信息表'
}
}"
>
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="60"></tiny-grid-column>
<tiny-grid-column field="company" title="公司名称"></tiny-grid-column>
<tiny-grid-column field="employees" title="员工数"></tiny-grid-column>
<tiny-grid-column field="createdDate" title="创建日期"></tiny-grid-column>
<tiny-grid-column field="city" title="城市"></tiny-grid-column>
</tiny-grid>
</div>
</template>

<script>
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
import { TinyGrid, TinyGridColumn, TinyBaseSelect } from '@opentiny/vue'
import { createTransportPair, createSseProxy } from '@opentiny/next'
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { Client } from '@modelcontextprotocol/sdk/client/index.js'

export default {
components: {
TinyGrid,
TinyGridColumn
TinyGridColumn,
TinySelect: TinyBaseSelect
},
data() {
const tableData = [
{
id: '1',
company: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false
},
{
id: '2',
company: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true
},
{
id: '3',
company: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false
},
{
id: '4',
company: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true
},
{
id: '5',
company: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true
},
{
id: '6',
company: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11',
boole: true
},
{
id: '7',
company: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00',
boole: false
},
{
id: '8',
company: '深圳市福德宝网络技术 YX 公司',
boole: true,
city: '厦门',
createdDate: '2016-06-03 13:53:25',
employees: 540
}
const _table = [
{ company: 'GFD 科技 YX 公司', city: '广州', employees: 800, createdDate: '2014-04-30 00:56:00' },
{ company: 'QWE 科技 YX 公司', city: '深圳', employees: 500, createdDate: '2015-05-01 01:01:01' },
{ company: 'ASD 科技 YX 公司', city: '中山', employees: 200, createdDate: '2013-03-03 03:03:03' },
{ company: 'ZXC 科技 YX 公司', city: '广州', employees: 1000, createdDate: '2012-02-02 02:02:02' },
{ company: 'VBN 科技 YX 公司', city: '深圳', employees: 600, createdDate: '2011-01-01 01:01:01' },
{ company: 'QWE 科技 YX 公司', city: '中山', employees: 700, createdDate: '2016-08-08 08:08:08' },
{ company: 'RTY 科技 YX 公司', city: '广州', employees: 900, createdDate: '2015-09-09 09:09:09' },
{ company: 'UIO 科技 YX 公司', city: '深圳', employees: 1100, createdDate: '2014-10-10 10:10:10' },
{ company: 'HJK 科技 YX 公司', city: '中山', employees: 1200, createdDate: '2013-11-11 11:11:11' },
{ company: 'WWW 科技 YX 公司', city: '深圳', employees: 300, createdDate: '2016-07-08 12:36:22' },
{ company: 'RFV 有限责任公司', city: '中山', employees: 1300, createdDate: '2014-02-14 14:14:14' },
{ company: 'TGB 科技 YX 公司', city: '广州', employees: 360, createdDate: '2013-01-13 13:13:13' },
{ company: 'YHN 科技 YX 公司', city: '深圳', employees: 810, createdDate: '2012-12-12 12:12:12' },
{ company: 'WSX 科技 YX 公司', city: '中山', employees: 800, createdDate: '2011-11-11 11:11:11' },
{ company: 'KBG 物业 YX 公司', city: '深圳', employees: 400, createdDate: '2014-04-30 23:56:00' },
{ company: 'SZB 有限责任公司', city: '深圳', employees: 1400, createdDate: '2016-06-03 13:53:25' }
]

return {
server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
sessionID: '',
tableData
tableData: _table,
queryCity: '',
options: Array.from(new Set(_table.map((item) => item.city))).map((city) => ({
label: city,
value: city
}))
}
},
async mounted() {
Expand All @@ -113,7 +87,7 @@ export default {
await client.connect(clientTransport)
const { sessionId } = await createSseProxy({
client,
url: 'https://39.108.160.245/sse'
url: 'http://39.108.160.245/sse'
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Security concern: HTTP endpoint in production code.

The SSE proxy URL was changed from HTTPS to HTTP, which could expose data transmission to security risks in production environments.

Consider using environment-based configuration or at minimum document why HTTP is required:

+    // TODO: Use HTTPS in production environment
     const { sessionId } = await createSseProxy({
       client,
-      url: 'http://39.108.160.245/sse'
+      url: process.env.NODE_ENV === 'production' ? 'https://39.108.160.245/sse' : 'http://39.108.160.245/sse'
     })
📝 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
url: 'http://39.108.160.245/sse'
const { sessionId } = await createSseProxy({
client,
// TODO: Use HTTPS in production environment
url: process.env.NODE_ENV === 'production'
? 'https://39.108.160.245/sse'
: 'http://39.108.160.245/sse'
})
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage.vue at line 90, the SSE
proxy URL uses an HTTP endpoint, which poses a security risk in production.
Update the code to use an HTTPS URL for secure data transmission. Alternatively,
implement environment-based configuration to switch between HTTP and HTTPS
depending on the deployment environment, and document the reason if HTTP must be
used.

})

this.sessionID = sessionId
Expand Down
Loading
Loading