Error loading MCP servers
;
+ }
+
+ return (
+
+ {/* Header + Add button */}
+
+
+
+
+ ) : (
+
+ );
+}
\ No newline at end of file
diff --git a/packages/web/src/app/(app)/settings/mcpServers/page.tsx b/packages/web/src/app/(app)/settings/mcpServers/page.tsx
new file mode 100644
index 000000000..edfd780d6
--- /dev/null
+++ b/packages/web/src/app/(app)/settings/mcpServers/page.tsx
@@ -0,0 +1,14 @@
+import { McpServersPage } from "./mcpServersPage";
+
+interface PageProps {
+ searchParams: Promise<{
+ status?: string;
+ server?: string;
+ message?: string;
+ }>;
+}
+
+export default async function Page({ searchParams }: PageProps) {
+ const { status, server, message } = await searchParams;
+ return
+
+
+ {/* Server list */}
+ {isLoading ? (
+
+
+
+
+ MCP Servers
++ Connect external MCP servers to use with Ask Sourcebot. +
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+ ) : servers.length === 0 ? (
+
+
+ No MCP servers yet
++ Click "Add MCP Server" above to connect an external MCP server. +
+
+ {servers.map((server) => (
+
+
+
+
+ {server.isConnected && (
+
+
+
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+ Delete MCP Server
+
+ Are you sure you want to remove {server.name || server.serverUrl}? This will remove the server and your credentials from your list.
+
+
+
+ Cancel
+ handleDelete(server.id)}
+ disabled={deletingServerId === server.id}
+ className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+ >
+ {deletingServerId === server.id ? "Deleting..." : "Delete"}
+
+
+
+
+
+
+
+
+ {server.name || server.serverUrl}
+ {server.serverUrl}
+
+
+
+ Connected
+
+ )}
+ {server.isAuthExpired && (
+
+
+ Authorization expired
+
+ )}
+ {!server.isConnected && !server.isAuthExpired && (
+
+
+ Not connected
+
+ )}
+ - response.json());
return result as ListChatsResponse | ServiceError;
-}
\ No newline at end of file
+}
+
+export const connectMcpToAsk = async (body: { serverId: string }): Promise
+ {server.isAuthExpired ? (
+ 
onFaviconError(server.id)}
+ className="w-4 h-4 shrink-0 rounded-sm"
+ alt=""
+ />
+ )}
+ {server.name}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/packages/web/src/features/chat/components/chatThread/chatThread.tsx b/packages/web/src/features/chat/components/chatThread/chatThread.tsx
index f60d281b7..af0aee3cc 100644
--- a/packages/web/src/features/chat/components/chatThread/chatThread.tsx
+++ b/packages/web/src/features/chat/components/chatThread/chatThread.tsx
@@ -7,10 +7,10 @@ import { CustomSlateEditor } from '@/features/chat/customSlateEditor';
import { AdditionalChatRequestParams, CustomEditor, LanguageModelInfo, SBChatMessage, SearchScope, Source } from '@/features/chat/types';
import { createUIMessage, getAllMentionElements, resetEditor, slateContentToString } from '@/features/chat/utils';
import { useChat } from '@ai-sdk/react';
-import { CreateUIMessage, DefaultChatTransport } from 'ai';
+import { CreateUIMessage, DefaultChatTransport, lastAssistantMessageIsCompleteWithApprovalResponses } from 'ai';
import { ArrowDownIcon, CopyIcon } from 'lucide-react';
import { useNavigationGuard } from 'next-navigation-guard';
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useStickToBottom } from 'use-stick-to-bottom';
import { Descendant } from 'slate';
import { useMessagePairs } from '../../useMessagePairs';
@@ -19,12 +19,15 @@ import { ChatBox } from '../chatBox';
import { ChatBoxToolbar } from '../chatBox/chatBoxToolbar';
import { ChatThreadListItem } from './chatThreadListItem';
import { ErrorBanner } from './errorBanner';
+import { McpFailedServersBanner } from './mcpFailedServersBanner';
import { useRouter } from 'next/navigation';
import { usePrevious } from '@uidotdev/usehooks';
import { RepositoryQuery, SearchContextQuery } from '@/lib/types';
import { duplicateChat, generateAndUpdateChatNameFromMessage } from '../../actions';
import { isServiceError } from '@/lib/utils';
import { NotConfiguredErrorBanner } from '../notConfiguredErrorBanner';
+import { McpServerIconContext, McpServerIconMap } from '../../mcpServerIconContext';
+import { ToolApprovalProvider } from '../../toolApprovalContext';
import useCaptureEvent from '@/hooks/useCaptureEvent';
import { SignInPromptBanner } from './signInPromptBanner';
import { DuplicateChatDialog } from '@/app/(app)/chat/components/duplicateChatDialog';
@@ -47,6 +50,8 @@ interface ChatThreadProps {
searchContexts: SearchContextQuery[];
selectedSearchScopes: SearchScope[];
onSelectedSearchScopesChange: (items: SearchScope[]) => void;
+ disabledMcpServerIds: string[];
+ onDisabledMcpServerIdsChange: (ids: string[]) => void;
isOwner?: boolean;
isAuthenticated?: boolean;
chatName?: string;
@@ -61,6 +66,8 @@ export const ChatThread = ({
searchContexts,
selectedSearchScopes,
onSelectedSearchScopesChange,
+ disabledMcpServerIds,
+ onDisabledMcpServerIdsChange,
isOwner = true,
isAuthenticated = false,
chatName,
@@ -86,13 +93,66 @@ export const ChatThread = ({
) ?? []
);
+ const [mcpServerIconMap, setMcpServerIconMap] = useState
+
+ Extra Features
+
+ Add MCP servers, include files and more.
+
+ Error: No answer response was provided
)}
+
+ );
+};
\ No newline at end of file
diff --git a/packages/web/src/features/chat/components/chatThread/toolApprovalBanner.tsx b/packages/web/src/features/chat/components/chatThread/toolApprovalBanner.tsx
new file mode 100644
index 000000000..0724c93b7
--- /dev/null
+++ b/packages/web/src/features/chat/components/chatThread/toolApprovalBanner.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import { Button } from "@/components/ui/button";
+import { McpFavicon } from "@/ee/features/mcp/components/mcpFavicon";
+import { useMcpServerIconMap } from "@/features/chat/mcpServerIconContext";
+import { useToolApproval } from "@/features/chat/toolApprovalContext";
+import { cn } from "@/lib/utils";
+import { DynamicToolUIPart } from "ai";
+import { ChevronRight } from "lucide-react";
+import { useCallback, useState } from "react";
+import { parseMcpToolName } from "./tools/mcpToolComponent";
+import { JsonHighlighter } from "./tools/jsonHighlighter";
+
+interface ToolApprovalBannerProps {
+ parts: DynamicToolUIPart[];
+}
+
+export const ToolApprovalBanner = ({ parts }: ToolApprovalBannerProps) => {
+ const addToolApprovalResponse = useToolApproval();
+ const iconMap = useMcpServerIconMap();
+
+ if (parts.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ {parts.map((part) => (
+
+ );
+};
+
+const ToolApprovalItem = ({
+ part,
+ addToolApprovalResponse,
+ iconMap,
+}: {
+ part: DynamicToolUIPart;
+ addToolApprovalResponse: ReturnType
+
+ );
+};
diff --git a/packages/web/src/features/chat/components/chatThread/tools/jsonHighlighter.tsx b/packages/web/src/features/chat/components/chatThread/tools/jsonHighlighter.tsx
new file mode 100644
index 000000000..18203a9de
--- /dev/null
+++ b/packages/web/src/features/chat/components/chatThread/tools/jsonHighlighter.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+export function unescapeJsonStrings(value: unknown): unknown {
+ if (typeof value === 'string') {
+ try {
+ const parsed: unknown = JSON.parse(value);
+ if (typeof parsed === 'object' && parsed !== null) {
+ return unescapeJsonStrings(parsed);
+ }
+ } catch {
+ // not JSON — leave as-is
+ }
+ return value;
+ }
+ if (Array.isArray(value)) {
+ return value.map(unescapeJsonStrings);
+ }
+ if (typeof value === 'object' && value !== null) {
+ return Object.fromEntries(
+ Object.entries(value).map(([k, v]) => [k, unescapeJsonStrings(v)])
+ );
+ }
+ return value;
+}
+
+type TokenType = 'key' | 'string' | 'number' | 'boolean' | 'null' | 'structural' | 'whitespace' | 'other';
+
+interface Token {
+ type: TokenType;
+ value: string;
+}
+
+function tokenizeJson(text: string): Token[] {
+ const tokens: Token[] = [];
+ let i = 0;
+
+ while (i < text.length) {
+ const ch = text[i];
+
+ // Whitespace
+ if (/\s/.test(ch)) {
+ let j = i + 1;
+ while (j < text.length && /\s/.test(text[j])) {
+ j++;
+ }
+ tokens.push({ type: 'whitespace', value: text.slice(i, j) });
+ i = j;
+ continue;
+ }
+
+ // String
+ if (ch === '"') {
+ let j = i + 1;
+ while (j < text.length) {
+ if (text[j] === '\\') {
+ j += 2;
+ } else if (text[j] === '"') {
+ j++;
+ break;
+ } else {
+ j++;
+ }
+ }
+ const str = text.slice(i, j);
+
+ // Lookahead past whitespace for a colon → this is a key
+ let k = j;
+ while (k < text.length && /\s/.test(text[k])) {
+ k++;
+ }
+ const isKey = text[k] === ':';
+
+ tokens.push({ type: isKey ? 'key' : 'string', value: str });
+ i = j;
+ continue;
+ }
+
+ // Number
+ if (ch === '-' || /\d/.test(ch)) {
+ const match = text.slice(i).match(/^-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/);
+ if (match) {
+ tokens.push({ type: 'number', value: match[0] });
+ i += match[0].length;
+ continue;
+ }
+ }
+
+ // Boolean / null keywords
+ if (text.slice(i, i + 4) === 'true') {
+ tokens.push({ type: 'boolean', value: 'true' });
+ i += 4;
+ continue;
+ }
+ if (text.slice(i, i + 5) === 'false') {
+ tokens.push({ type: 'boolean', value: 'false' });
+ i += 5;
+ continue;
+ }
+ if (text.slice(i, i + 4) === 'null') {
+ tokens.push({ type: 'null', value: 'null' });
+ i += 4;
+ continue;
+ }
+
+ // Structural characters
+ if ('{}[]:,'.includes(ch)) {
+ tokens.push({ type: 'structural', value: ch });
+ i++;
+ continue;
+ }
+
+ // Fallback
+ tokens.push({ type: 'other', value: ch });
+ i++;
+ }
+
+ return tokens;
+}
+
+const TOKEN_CLASSES: Record
+
+
+ {hasInput && isExpanded && (
+
+
+
+
+
+
+ )}
+
+ {tokens.map((token, i) => {
+ const cls = TOKEN_CLASSES[token.type];
+ if (!cls) {
+ return token.value;
+ }
+ return (
+
+ {token.value}
+
+ );
+ })}
+
+ );
+};
diff --git a/packages/web/src/features/chat/components/chatThread/tools/mcpToolComponent.tsx b/packages/web/src/features/chat/components/chatThread/tools/mcpToolComponent.tsx
new file mode 100644
index 000000000..3e679a21b
--- /dev/null
+++ b/packages/web/src/features/chat/components/chatThread/tools/mcpToolComponent.tsx
@@ -0,0 +1,173 @@
+'use client';
+
+import { CopyIconButton } from "@/app/(app)/components/copyIconButton";
+import { McpFavicon } from "@/ee/features/mcp/components/mcpFavicon";
+import { useMcpServerIconMap } from "@/features/chat/mcpServerIconContext";
+import { cn } from "@/lib/utils";
+import { DynamicToolUIPart } from "ai";
+import { CheckCircle, ChevronDown, XCircle } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { JsonHighlighter, unescapeJsonStrings } from "./jsonHighlighter";
+
+export function parseMcpToolName(toolName: string): { serverName: string; toolName: string } | null {
+ if (!toolName.startsWith('mcp_')) {
+ return null;
+ }
+ const withoutPrefix = toolName.slice(4);
+ const doubleUnderscoreIdx = withoutPrefix.indexOf('__');
+ if (doubleUnderscoreIdx === -1) {
+ return null;
+ }
+ return {
+ serverName: withoutPrefix.slice(0, doubleUnderscoreIdx),
+ toolName: withoutPrefix.slice(doubleUnderscoreIdx + 2),
+ };
+}
+
+export const McpToolComponent = ({ part }: { part: DynamicToolUIPart }) => {
+ const needsApproval = part.state === 'approval-requested';
+ const [isExpanded, setIsExpanded] = useState(needsApproval);
+ const onToggle = useCallback(() => setIsExpanded(v => !v), []);
+
+ const iconMap = useMcpServerIconMap();
+ const parsed = parseMcpToolName(part.toolName);
+ const displayName = parsed
+ ? `${parsed.serverName}: ${parsed.toolName}`
+ : part.toolName;
+ const faviconUrl = parsed ? iconMap[parsed.serverName] : undefined;
+
+ const hasInput = part.state !== 'input-streaming';
+
+ const requestText = useMemo(
+ () => hasInput ? JSON.stringify(part.input, null, 2) : '',
+ [hasInput, part.input]
+ );
+ const responseText = useMemo(() => {
+ if (part.state === 'output-available') {
+ try {
+ return JSON.stringify(unescapeJsonStrings(part.output), null, 2);
+ } catch {
+ return String(part.output);
+ }
+ }
+ if (part.state === 'output-error') {
+ return part.errorText ?? '';
+ }
+ return undefined;
+ }, [part.state, part.output, part.errorText]);
+
+ const onCopyRequest = useCallback(() => {
+ navigator.clipboard.writeText(requestText);
+ return true;
+ }, [requestText]);
+
+ const onCopyResponse = useCallback(() => {
+ if (!responseText) {
+ return false;
+ }
+ navigator.clipboard.writeText(responseText);
+ return true;
+ }, [responseText]);
+
+ const renderStatus = () => {
+ if (part.state === 'output-error') {
+ return (
+
+
+
+ );
+};
+
+
+const ResultSection = ({ label, onCopy, children }: { label: string; onCopy: () => boolean; children: React.ReactNode }) => (
+
+
+ {hasInput && isExpanded && (
+
+ {renderStatus()}
+
+ {hasInput && (
+
+ )}
+
+
+
+ {responseText !== undefined && (
+ <>
+
+
+
+
+ )}
+
+ )}
+
+
+
+
+);
diff --git a/packages/web/src/features/chat/components/chatThread/tools/toolOutputGuard.tsx b/packages/web/src/features/chat/components/chatThread/tools/toolOutputGuard.tsx
index aac756f4a..43ce2021d 100644
--- a/packages/web/src/features/chat/components/chatThread/tools/toolOutputGuard.tsx
+++ b/packages/web/src/features/chat/components/chatThread/tools/toolOutputGuard.tsx
@@ -6,6 +6,7 @@ import { ToolUIPart } from "ai";
import { ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { useCallback, useState } from "react";
+import { JsonHighlighter, unescapeJsonStrings } from "./jsonHighlighter";
export const ToolOutputGuard =
+ {label}
+
+
+ {children}
+
+
- {requestText}
-
+
- {responseText}
-
+
+
+
+
+ {results.map((result) => (
+
+
+ {result.name}
+ {result.description && (
+ <>
+ -
+ {result.description}
+
+ )}
+
+ ))}
+ {results.length === 0 && (
+ No tools found
+ )}
+ MCP Servers
- Connect external MCP servers to use with Ask Sourcebot. + {canManageMcpServers + ? "Approve external MCP servers for your workspace." + : "Connect to workspace-approved MCP servers to use them with Ask Sourcebot."}
+
+
+
+ setNewServerName(e.target.value)}
+ placeholder="e.g. Linear"
+ />
+
+
+
+ setNewServerUrl(e.target.value)}
+ placeholder="https://mcp.linear.app/mcp"
+ />
+
+