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/components/base/app-icon/index.tsx

@@ -18,6 +18,7 @@ export type AppIconProps = {
   imageUrl?: string | null
   className?: string
   innerIcon?: React.ReactNode
+  coverElement?: React.ReactNode
   onClick?: () => void
 }
 const appIconVariants = cva(
@@ -51,6 +52,7 @@ const AppIcon: FC<AppIconProps> = ({
   imageUrl,
   className,
   innerIcon,
+  coverElement,
   onClick,
 }) => {
   const isValidImageIcon = iconType === 'image' && imageUrl
@@ -65,6 +67,7 @@ const AppIcon: FC<AppIconProps> = ({
       ? <img src={imageUrl} className="h-full w-full" alt="app icon" />
       : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
     }
+    {coverElement}
   </span>
 }