Skip to content

fix(basic-usage): update SSE URL to use HTTPS for secure connection #3472

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 3 commits into from
Jun 3, 2025
Merged

fix(basic-usage): update SSE URL to use HTTPS for secure connection #3472

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
facb97d
fix(basic-usage): update SSE URL to use HTTPS for secure connection
zzcr Jun 3, 2025
884ef1b
feat(ai-agent): 优化文档和示例
zzcr Jun 3, 2025
11f87e9
chore: 删除无用变量
zzcr Jun 3, 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
116 changes: 86 additions & 30 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,100 +1,156 @@
<template>
<tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<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-column
field="boole"
title="布尔值"
align="center"
format-text="boole"
:editor="checkboxEdit"
></tiny-grid-column>
</tiny-grid>
</template>

<script setup lang="jsx">
<script setup>
import { ref, onMounted } from 'vue'
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
import { reactive } from '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 = reactive([
// 定义响应式数据
const tableData = ref([
{
id: '1',
name: 'GFD 科技 YX 公司',
company: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Remove unused boole property from data objects.

The boole property is present in all data objects but is no longer used since the boolean column was removed from the grid. This creates unnecessary data bloat and potential confusion.

  {
    id: '1',
    company: 'GFD 科技 YX 公司',
    city: '福州',
    employees: 800,
-    createdDate: '2014-04-30 00:56:00',
-    boole: false
+    createdDate: '2014-04-30 00:56:00'
  },

Apply similar changes to remove the boole property from all data objects in the array.

Also applies to: 45-45, 53-53, 61-61, 69-69, 77-77, 85-85, 90-90

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue at
lines 37, 45, 53, 61, 69, 77, 85, and 90, remove the unused `boole` property
from all data objects. This property is no longer needed since the boolean
column was removed from the grid, so delete `boole: false` from each object to
reduce data bloat and avoid confusion.

},
{
id: '2',
name: 'WWW 科技 YX 公司',
company: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true
},
{
id: '3',
name: 'RFV 有限责任公司',
company: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false
},
{
id: '4',
name: 'TGB 科技 YX 公司',
company: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true
},
{
id: '5',
name: 'YHN 科技 YX 公司',
company: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true
},
{
id: '6',
name: 'WSX 科技 YX 公司',
company: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11',
boole: true
},
{
id: '7',
name: 'KBG 物业 YX 公司',
company: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00',
boole: false
},
{
id: '8',
name: '深圳市福德宝网络技术 YX 公司',
company: '深圳市福德宝网络技术 YX 公司',
boole: true,
city: '厦门',
createdDate: '2016-06-03 13:53:25',
employees: 540
}
])

function checkboxEdit(h, { row }) {
return (
<input
type="checkbox"
checked={row.boole}
onChange={(event) => {
row.boole = event.target.checked
}}
/>
)
}
const server = ref(new McpServer({ name: 'base-config', version: '1.0.0' }, {}))
const sessionID = ref('')

const op = ref({
editConfig: {
trigger: 'click',
mode: 'cell',
showStatus: true
},
columns: [
{
type: 'index',
width: 60
},
{
type: 'selection',
width: 60
},
{
field: 'employees',
title: '员工数'
},
{
field: 'createdDate',
title: '创建日期'
},
{
field: 'city',
title: '城市'
},
{
field: 'boole',
title: '布尔值',
align: 'center',
formatText: 'boole'
}
],
data: tableData
})

// 生命周期钩子
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: 'https://39.108.160.245/sse'
})

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

// 3、连接服务器
await server.value.connect(transport)
})
Comment on lines +101 to +118
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add error handling for async operations.

The MCP setup in onMounted performs several async operations that could fail, but there's no error handling implemented. This could lead to unhandled promise rejections.

onMounted(async () => {
+  try {
    // 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: 'https://39.108.160.245/sse'
    })

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

    // 3、连接服务器
    await server.value.connect(transport)
+  } catch (error) {
+    console.error('Failed to initialize MCP setup:', error)
+    // Consider user-friendly error handling or fallback behavior
+  }
})
📝 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
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: 'https://39.108.160.245/sse'
})
sessionID.value = sessionId
window.$sessionId = sessionID.value
// 3、连接服务器
await server.value.connect(transport)
})
onMounted(async () => {
try {
// 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: 'https://39.108.160.245/sse'
})
sessionID.value = sessionId
window.$sessionId = sessionID.value
// 3、连接服务器
await server.value.connect(transport)
} catch (error) {
console.error('Failed to initialize MCP setup:', error)
// Consider user-friendly error handling or fallback behavior
}
})
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/grid/ai-agent/basic-usage-composition-api.vue
around lines 101 to 118, the async operations inside the onMounted hook lack
error handling, risking unhandled promise rejections. Wrap the entire async
function body in a try-catch block, and in the catch block, log or handle the
error appropriately to ensure any failures during transport creation, client
connection, or server connection are caught and managed.

</script>
78 changes: 11 additions & 67 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
Expand Up @@ -12,20 +12,14 @@
>
<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-column
field="boole"
title="布尔值"
align="center"
format-text="boole"
:editor="checkboxEdit"
></tiny-grid-column>
</tiny-grid>
</template>

<script lang="jsx">
<script>
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
import { createTransportPair, createSseProxy } from '@opentiny/next'
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
Expand All @@ -40,63 +34,63 @@ export default {
const tableData = [
{
id: '1',
name: 'GFD 科技 YX 公司',
company: 'GFD 科技 YX 公司',
city: '福州',
employees: 800,
createdDate: '2014-04-30 00:56:00',
boole: false
},
{
id: '2',
name: 'WWW 科技 YX 公司',
company: 'WWW 科技 YX 公司',
city: '深圳',
employees: 300,
createdDate: '2016-07-08 12:36:22',
boole: true
},
{
id: '3',
name: 'RFV 有限责任公司',
company: 'RFV 有限责任公司',
city: '中山',
employees: 1300,
createdDate: '2014-02-14 14:14:14',
boole: false
},
{
id: '4',
name: 'TGB 科技 YX 公司',
company: 'TGB 科技 YX 公司',
city: '龙岩',
employees: 360,
createdDate: '2013-01-13 13:13:13',
boole: true
},
{
id: '5',
name: 'YHN 科技 YX 公司',
company: 'YHN 科技 YX 公司',
city: '韶关',
employees: 810,
createdDate: '2012-12-12 12:12:12',
boole: true
},
{
id: '6',
name: 'WSX 科技 YX 公司',
company: 'WSX 科技 YX 公司',
city: '黄冈',
employees: 800,
createdDate: '2011-11-11 11:11:11',
boole: true
},
{
id: '7',
name: 'KBG 物业 YX 公司',
company: 'KBG 物业 YX 公司',
city: '赤壁',
employees: 400,
createdDate: '2016-04-30 23:56:00',
boole: false
},
{
id: '8',
name: '深圳市福德宝网络技术 YX 公司',
company: '深圳市福德宝网络技术 YX 公司',
boole: true,
city: '厦门',
createdDate: '2016-06-03 13:53:25',
Expand All @@ -107,59 +101,9 @@ export default {
return {
server: new McpServer({ name: 'base-config', version: '1.0.0' }, {}),
sessionID: '',
op: {
editConfig: {
trigger: 'click',
mode: 'cell',
showStatus: true
},
columns: [
{
type: 'index',
width: 60
},
{
type: 'selection',
width: 60
},
{
field: 'employees',
title: '员工数'
},
{
field: 'createdDate',
title: '创建日期'
},
{
field: 'city',
title: '城市'
},
{
field: 'boole',
title: '布尔值',
align: 'center',
formatText: 'boole',
editor: this.checkboxEdit
}
],
data: tableData
},
tableData
}
},
methods: {
checkboxEdit(h, { row }) {
return (
<input
type="checkbox"
checked={row.boole}
onChange={(event) => {
row.boole = event.target.checked
}}
/>
)
}
},
async mounted() {
// 1、
const [transport, clientTransport] = createTransportPair()
Expand All @@ -169,7 +113,7 @@ export default {
await client.connect(clientTransport)
const { sessionId } = await createSseProxy({
client,
url: 'http://39.108.160.245/sse'
url: 'https://39.108.160.245/sse'
})

this.sessionID = sessionId
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/grid/webdoc/grid-ai-agent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default {
- 选中表格数据：用户可以通过自然语言指令，选中表格数据。<br>
- 选中全部数据：用户可以通过自然语言指令，选中全部数据。<br>

通过属性 <code>tiny-mcp-config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
通过属性 <code>tiny_mcp_config</code> 可以配置表格的业务意义以及传入<code>server</code>对象，详见示例。`,
'en-US': ``
},
codeFiles: ['ai-agent/basic-usage.vue']
Expand Down
Loading