feat: the frontend part of mcp (#22131)

Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/appCard'
 import Loading from '@/app/components/base/loading'
+import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { ToastContext } from '@/app/components/base/toast'
 import {
   fetchAppDetail,
@@ -31,6 +32,8 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(state => state.setAppDetail)
 
+  const showMCPCard = isInPanel
+
   const updateAppDetail = async () => {
     try {
       const res = await fetchAppDetail({ url: '/apps', id: appId })
@@ -117,6 +120,11 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
         isInPanel={isInPanel}
         onChangeStatus={onChangeApiStatus}
       />
+      {showMCPCard && (
+        <MCPServiceCard
+          appInfo={appDetail}
+        />
+      )}
     </div>
   )
 }