feat: implement MCP UIs

web/src/app/_settings/tabs/index.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import { Settings, type LucideIcon } from "lucide-react";
+
+import { AboutTab } from "./about-tab";
+import { GeneralTab } from "./general-tab";
+import { MCPTab } from "./mcp-tab";
+
+export const SETTINGS_TABS = [GeneralTab, MCPTab, AboutTab].map((tab) => {
+  const name = tab.name ?? tab.displayName;
+  return {
+    ...tab,
+    id: name.replace(/Tab$/, "").toLocaleLowerCase(),
+    label: name.replace(/Tab$/, ""),
+    icon: (tab.icon ?? <Settings />) as LucideIcon,
+    component: tab,
+  };
+});