feature: add Neon and Browserbase MCP support (#947)

geclos · web-flow · commit da55c2afefc2 · 2025-03-06T11:57:52.000+01:00
diff --git a/apps/web/src/app/(private)/settings/integrations/[integrationId]/details/_components/McpServerLogsModal.tsx b/apps/web/src/app/(private)/settings/integrations/[integrationId]/details/_components/McpServerLogsModal.tsx
@@ -8,6 +8,7 @@ import {
   CodeBlock,
   AnimatedDots,
   CloseTrigger,
+  Button,
 } from '@latitude-data/web-ui'
 import { ROUTES } from '$/services/routes'
 import useMcpLogs from '$/stores/mcpLogs'
@@ -30,7 +31,13 @@ export function McpServerLogsModal({ integrationId }: McpServerLogsModalProps) {
   const mcpServerId = integration?.mcpServerId?.toString() || null
 
   // Use the mcpLogs hook to fetch logs
-  const { logs, isLoading, error } = useMcpLogs(mcpServerId)
+  const {
+    data,
+    isLoading,
+    isValidating,
+    error,
+    mutate: refresh,
+  } = useMcpLogs(mcpServerId)
 
   // Handle close
   const handleClose = () => {
@@ -52,7 +59,24 @@ export function McpServerLogsModal({ integrationId }: McpServerLogsModalProps) {
       title={integration.name}
       description='Here is the status of your integration and its latest logs.'
       size='large'
-      footer={<CloseTrigger />}
+      footer={
+        <>
+          <Button
+            fancy
+            variant='outline'
+            onClick={() => refresh()}
+            iconProps={{
+              name: 'refresh',
+              placement: 'left',
+              spin: isValidating,
+            }}
+            disabled={isLoading || isValidating}
+          >
+            Refresh logs
+          </Button>
+          <CloseTrigger />
+        </>
+      }
     >
       <div className='flex flex-col gap-4'>
         <McpServerStatus mcpServerId={integration?.mcpServerId || undefined} />
@@ -69,13 +93,13 @@ export function McpServerLogsModal({ integrationId }: McpServerLogsModalProps) {
                 An unknown error occurred
               </Text.H6>
             </div>
-          ) : logs.length === 0 ? (
-            <div className='text-center p-4'>
+          ) : data.logs.length === 0 ? (
+            <div className='text-center p-4 flex flex-col items-center gap-4'>
               <Text.H6 color='foregroundMuted'>No logs available</Text.H6>
             </div>
           ) : (
             <div className='h-full rounded-lg overflow-auto'>
-              <CodeBlock language='log'>{logs}</CodeBlock>
+              <CodeBlock language='log'>{data.logs}</CodeBlock>
             </div>
           ))}
       </div>
diff --git a/apps/web/src/app/(private)/settings/integrations/[integrationId]/details/_components/McpServerStatus.tsx b/apps/web/src/app/(private)/settings/integrations/[integrationId]/details/_components/McpServerStatus.tsx
@@ -40,12 +40,27 @@ export function McpServerStatus({
   const statusVariant = getStatusVariant(mcpServer.status)
 
   return (
-    <div className='flex items-center gap-2'>
-      <Text.H5 color='foregroundMuted'>
-        {short ? '' : 'MCP server status: '}
-        {capitalize(mcpServer.status)}{' '}
-      </Text.H5>
-      <DotIndicator pulse variant={statusVariant} />
+    <div className='flex flex-col gap-1'>
+      <div className='flex items-center gap-2'>
+        <Text.H5 color='foregroundMuted'>
+          {short ? '' : 'MCP server status: '}
+          {capitalize(mcpServer.status)}{' '}
+        </Text.H5>
+        <DotIndicator pulse variant={statusVariant} />
+      </div>
+
+      {!short && mcpServer.status === 'failed' && (
+        <Text.H6 color='foregroundMuted'>
+          Deployment failed. Check the logs for more details. We'll
+          automatically attempt to redeploy in a few seconds.
+        </Text.H6>
+      )}
+
+      {!short && mcpServer.status === 'deploying' && (
+        <Text.H6 color='foregroundMuted'>
+          Deployment in progress. This should complete in a few seconds.
+        </Text.H6>
+      )}
     </div>
   )
 }
diff --git a/apps/web/src/lib/integrationTypeOptions.ts b/apps/web/src/lib/integrationTypeOptions.ts
@@ -116,6 +116,14 @@ export const HOSTED_INTEGRATION_TYPE_OPTIONS: Record<
     label: 'Time',
     icon: 'clock',
   },
+  [HostedIntegrationType.browserbase]: {
+    label: 'browserbase',
+    icon: 'browserbase',
+  },
+  [HostedIntegrationType.Neon]: {
+    label: 'Neon',
+    icon: 'neon',
+  },
 }
 
 export function integrationOptions(
diff --git a/apps/web/src/stores/mcpLogs.ts b/apps/web/src/stores/mcpLogs.ts
@@ -25,22 +25,17 @@ export default function useMcpLogs(
     { fallback: { logs: '' } },
   )
 
-  const {
-    data = { logs: '' },
-    isLoading,
-    error,
-  } = useSWR<McpLogsResponse>(
+  const { data = { logs: '' }, ...rest } = useSWR<McpLogsResponse>(
     mcpServerId ? ['mcpLogs', mcpServerId, options] : null,
     fetcher,
     {
-      refreshInterval: 10000, // Default to 10 seconds
+      fallbackData: { logs: '' },
       ...swrConfig,
     },
   )
 
   return {
-    logs: data.logs,
-    isLoading,
-    error,
+    data,
+    ...rest,
   }
 }
diff --git a/packages/constants/src/integrations.ts b/packages/constants/src/integrations.ts
@@ -31,6 +31,11 @@ export enum HostedIntegrationType {
   // SequentialThinking = 'sequential_thinking', // useless
   Time = 'time',
 
+  browserbase = 'browserbase',
+  Neon = 'neon',
+
+  // Gmail = 'google_drive', // env vars not supported, requires auth file
+  // GoogleCalendar = 'google_drive', // env vars not supported, requires auth file
   // GoogleDrive = 'google_drive', // env vars not supported, requires auth file
   // Postgres = 'postgres', // Uses a custom parameter in the command instead of env vars
   // Redis = 'redis', // Uses a custom parameter in the command instead of env vars
diff --git a/packages/core/src/lib/chainStreamManager/resolveTools/integrationTools.ts b/packages/core/src/lib/chainStreamManager/resolveTools/integrationTools.ts
@@ -57,7 +57,7 @@ export async function resolveIntegrationTools({
         mcpTools.map((mcpTool) => [
           mcpTool.name,
           {
-            description: mcpTool.description ?? '',
+            description: mcpTool?.description?.slice(0, 1023) ?? '',
             parameters: mcpTool.inputSchema,
           },
         ]),
diff --git a/packages/core/src/services/integrations/hostedTypes/configs/browserbase.ts b/packages/core/src/services/integrations/hostedTypes/configs/browserbase.ts
@@ -0,0 +1,22 @@
+import { HostedIntegrationConfig } from '../types'
+
+export default {
+  description: 'Integrates the Browserbase API, a headless web browser.',
+  command: 'node mcps/mcp-server-browserbase/browserbase/dist/index.js',
+  env: {
+    BROWSERBASE_PROJECT_ID: {
+      label: 'Browserbase Project ID',
+      description: 'The Project ID for the Browserbase API',
+      placeholder: 'your-project-id',
+      required: true,
+    },
+    BROWSERBASE_API_KEY: {
+      label: 'Browserbase API Key',
+      description: 'The API key for the Browserbase API',
+      placeholder: 'your-api-key',
+      required: true,
+    },
+  },
+  envSource:
+    'https://docs.browserbase.com/introduction/getting-started#overview-dashboard',
+} as HostedIntegrationConfig
diff --git a/packages/core/src/services/integrations/hostedTypes/configs/neon.ts b/packages/core/src/services/integrations/hostedTypes/configs/neon.ts
@@ -0,0 +1,15 @@
+import { HostedIntegrationConfig } from '../types'
+
+export default {
+  description: 'Integrates with Neon, serverless postgres.',
+  command: 'npx @neondatabase/mcp-server-neon start $NEON_API_KEY',
+  env: {
+    NEON_API_KEY: {
+      label: 'Neon API Key',
+      description: 'The API key for the Neon API',
+      placeholder: 'your-api-key',
+      required: true,
+    },
+  },
+  envSource: 'https://neon.tech/docs/manage/api-keys',
+} as HostedIntegrationConfig
diff --git a/packages/core/src/services/integrations/hostedTypes/index.ts b/packages/core/src/services/integrations/hostedTypes/index.ts
@@ -21,6 +21,8 @@ import GOOGLE_MAPS_MCP_CONFIG from './configs/googleMaps'
 import PUPPETEER_MCP_CONFIG from './configs/puppeteer'
 import SENTRY_MCP_CONFIG from './configs/sentry'
 import TIME_MCP_CONFIG from './configs/time'
+import browserbase_MCP_CONFIG from './configs/browserbase'
+import NEON_MCP_CONFIG from './configs/neon'
 
 export const HOSTED_MCP_CONFIGS: Record<
   HostedIntegrationType,
@@ -47,4 +49,6 @@ export const HOSTED_MCP_CONFIGS: Record<
   [HostedIntegrationType.Puppeteer]: PUPPETEER_MCP_CONFIG,
   [HostedIntegrationType.Sentry]: SENTRY_MCP_CONFIG,
   [HostedIntegrationType.Time]: TIME_MCP_CONFIG,
+  [HostedIntegrationType.browserbase]: browserbase_MCP_CONFIG,
+  [HostedIntegrationType.Neon]: NEON_MCP_CONFIG,
 }
diff --git a/packages/env/src/index.ts b/packages/env/src/index.ts
@@ -81,7 +81,7 @@ if (environment === 'development' || environment === 'test') {
       BULL_ADMIN_USER: 'admin',
       BULL_ADMIN_PASS: 'admin',
       MCP_SCHEME: 'internet-facing',
-      MCP_DOCKER_IMAGE: 'ghcr.io/latitude-dev/latitude-mcp:latest',
+      MCP_DOCKER_IMAGE: 'ghcr.io/latitude-dev/latitude-mcp:sha-dd84ff4',
       MCP_NODE_GROUP_NAME: 'latitude-dev-node-group',
     },
     { path: pathToEnv },
diff --git a/packages/web-ui/src/ds/atoms/Icons/custom-icons/logos/Browserbase.tsx b/packages/web-ui/src/ds/atoms/Icons/custom-icons/logos/Browserbase.tsx
@@ -0,0 +1,14 @@
+import { LucideProps } from 'lucide-react'
+
+export default function Browserbase(props: LucideProps) {
+  return (
+    <svg viewBox='0 0 65 64' fill='none' {...props}>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M100.889 0H0.888885V100H100.889V0ZM36.9167 27.7778V72.2222H53.4246C59.7738 72.2222 64.8532 67.1429 64.8532 60.7937V58.254C64.8532 54.6349 63.2024 51.4603 60.6627 49.3651C62.504 47.3968 63.5833 44.6667 63.5833 41.746V39.2063C63.5833 32.8571 58.504 27.7778 52.1548 27.7778H36.9167ZM53.4246 65.873H43.2659V53.1746H53.4246C56.2817 53.1746 58.504 55.3968 58.504 58.254V60.7937C58.504 63.6508 56.2817 65.873 53.4246 65.873ZM52.1548 46.8254H43.2659V34.127H52.1548C55.0119 34.127 57.2341 36.3492 57.2341 39.2063V41.746C57.2341 44.6032 55.0119 46.8254 52.1548 46.8254Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
diff --git a/packages/web-ui/src/ds/atoms/Icons/custom-icons/logos/Neon.tsx b/packages/web-ui/src/ds/atoms/Icons/custom-icons/logos/Neon.tsx
@@ -0,0 +1,18 @@
+import { LucideProps } from 'lucide-react'
+
+export default function Neon(props: LucideProps) {
+  return (
+    <svg viewBox='0 0 58 57' fill='none' {...props}>
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M0 9.82759C0 4.39996 4.47705 0 9.99976 0H47.9989C53.5216 0 57.9986 4.39996 57.9986 9.82759V41.5893C57.9986 47.2045 50.7684 49.6414 47.2618 45.2082L36.2991 31.3488V48.1552C36.2991 53.04 32.2698 57 27.2993 57H9.99976C4.47705 57 0 52.6 0 47.1724V9.82759ZM9.99976 7.86207C8.89522 7.86207 7.99981 8.74206 7.99981 9.82759V47.1724C7.99981 48.2579 8.89522 49.1379 9.99976 49.1379H27.5993C28.1516 49.1379 28.2993 48.6979 28.2993 48.1552V25.6178C28.2993 20.0027 35.5295 17.5656 39.0361 21.9989L49.9988 35.8583V9.82759C49.9988 8.74206 50.1034 7.86207 48.9988 7.86207H9.99976Z'
+        fill='black'
+      />
+      <path
+        d='M48.0003 0C53.523 0 58 4.39996 58 9.82759V41.5893C58 47.2045 50.7699 49.6414 47.2633 45.2082L36.3006 31.3488V48.1552C36.3006 53.04 32.2712 57 27.3008 57C27.8531 57 28.3008 56.56 28.3008 56.0172V25.6178C28.3008 20.0027 35.5309 17.5656 39.0375 21.9989L50.0002 35.8583V1.96552C50.0002 0.879992 49.1048 0 48.0003 0Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx
@@ -118,6 +118,8 @@ import Perplexity from './custom-icons/logos/Perplexity'
 import AwsBedrock from './custom-icons/logos/AwsBedrock'
 import Brave from './custom-icons/logos/Brave'
 import Sentry from './custom-icons/logos/Sentry'
+import Browserbase from './custom-icons/logos/Browserbase'
+import Neon from './custom-icons/logos/Neon'
 
 const Icons = {
   addCircle: CirclePlus,
@@ -238,6 +240,8 @@ const Icons = {
   awsBedrock: AwsBedrock,
   brave: Brave,
   sentry: Sentry,
+  browserbase: Browserbase,
+  neon: Neon,
 }
 
 export type IconName = keyof typeof Icons
diff --git a/packages/web-ui/src/ds/molecules/Chat/Message/ToolResult.tsx b/packages/web-ui/src/ds/molecules/Chat/Message/ToolResult.tsx
@@ -55,7 +55,7 @@ export function ToolResultContent({
   if (isString) {
     return (
       <div
-        className={cn('flex flex-col gap-2 p-4', {
+        className={cn('flex flex-col gap-2 p-4 overflow-x-auto', {
           'bg-destructive-muted': toolResponse.isError,
         })}
       >

Original file line number	Diff line number	Diff line change
`@@ -25,22 +25,17 @@ export default function useMcpLogs(`
`25`	`25`	`{ fallback: { logs: '' } },`
`26`	`26`	`)`
`27`	`27`
`28`		`- const {`
`29`		`- data = { logs: '' },`
`30`		`- isLoading,`
`31`		`- error,`
`32`		`- } = useSWR<McpLogsResponse>(`
	`28`	`+ const { data = { logs: '' }, ...rest } = useSWR<McpLogsResponse>(`
`33`	`29`	`mcpServerId ? ['mcpLogs', mcpServerId, options] : null,`
`34`	`30`	`fetcher,`
`35`	`31`	`{`
`36`		`- refreshInterval: 10000, // Default to 10 seconds`
	`32`	`+ fallbackData: { logs: '' },`
`37`	`33`	`...swrConfig,`
`38`	`34`	`},`
`39`	`35`	`)`
`40`	`36`
`41`	`37`	`return {`
`42`		`- logs: data.logs,`
`43`		`- isLoading,`
`44`		`- error,`
	`38`	`+ data,`
	`39`	`+ ...rest,`
`45`	`40`	`}`
`46`	`41`	`}`
Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ export async function resolveIntegrationTools({`
`57`	`57`	`mcpTools.map((mcpTool) => [`
`58`	`58`	`mcpTool.name,`
`59`	`59`	`{`
`60`		`- description: mcpTool.description ?? '',`
	`60`	`+ description: mcpTool?.description?.slice(0, 1023) ?? '',`
`61`	`61`	`parameters: mcpTool.inputSchema,`
`62`	`62`	`},`
`63`	`63`	`]),`