diff --git a/web/src/views/skill/useSkills.ts b/web/src/views/skill/useSkills.ts
index 623898e..8dcf293 100644
--- a/web/src/views/skill/useSkills.ts
+++ b/web/src/views/skill/useSkills.ts
@@ -1,19 +1,49 @@
-import { ref, computed } from 'vue'
-import { ElMessageBox } from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+
+const API_BASE = 'http://localhost:8082'
 
 export interface Skill {
-  id: number
+  id: string
   name: string
   description: string
-  type: string
+  description_cn?: string
+  command: string
+  args?: string
+  env?: string
   category: string
-  status: 'running' | 'stopped' | 'error'
-  port: number
-  createdAt: string
-  tools: number
+  status: string
+  created_at?: string
 }
 
 export function useSkills() {
+  // 从 API 获取 MCP 列表
+  const fetchSkills = async () => {
+    try {
+      const response = await fetch(`${API_BASE}/mcp/list`)
+      const result = await response.json()
+      if (result && Array.isArray(result)) {
+        skills.value = result.map((mcp: any) => ({
+          id: mcp.id,
+          name: mcp.name,
+          description: mcp.description || '',
+          description_cn: mcp.description_cn || '',
+          command: mcp.command || '',
+          args: mcp.args || '',
+          env: mcp.env || '',
+          category: mcp.category || 'custom',
+          status: mcp.status || 'stopped',
+          created_at: mcp.created_at,
+        }))
+      }
+    } catch (error) {
+      console.error('Failed to fetch MCP list:', error)
+    }
+  }
+
+  onMounted(() => {
+    fetchSkills()
+  })
   // Skill 数据
   const skills = ref<Skill[]>([
     { id: 1, name: 'Linear', description: 'Linear API integration for project management', type: 'API', category: 'api', status: 'running', port: 3001, createdAt: '2025-04-10', tools: 12 },