feat(mcp): add Model Context Protocol integration
Add MCP integration including: - New MCP settings tab with server configuration - Tool invocation UI components - API endpoints for MCP management - Integration with chat system for tool execution - Example configurations
This commit is contained in:
Roamin
367
app/components/chat/ToolInvocations.tsx
Normal file
367
app/components/chat/ToolInvocations.tsx
Normal file
@@ -0,0 +1,367 @@
|
||||
import type { ToolInvocationUIPart } from '@ai-sdk/ui-utils';
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { memo, useMemo, useState } from 'react';
|
||||
import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import {
|
||||
TOOL_EXECUTION_APPROVAL,
|
||||
TOOL_EXECUTION_DENIED,
|
||||
TOOL_EXECUTION_ERROR,
|
||||
TOOL_NO_EXECUTE_FUNCTION,
|
||||
} from '~/utils/constants';
|
||||
import { cubicEasingFn } from '~/utils/easings';
|
||||
import { logger } from '~/utils/logger';
|
||||
import { themeStore, type Theme } from '~/lib/stores/theme';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import type { ToolCallAnnotation } from '~/types/context';
|
||||
|
||||
const highlighterOptions = {
|
||||
langs: ['json'],
|
||||
themes: ['light-plus', 'dark-plus'],
|
||||
};
|
||||
|
||||
const jsonHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme> =
|
||||
import.meta.hot?.data.jsonHighlighter ?? (await createHighlighter(highlighterOptions));
|
||||
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.data.jsonHighlighter = jsonHighlighter;
|
||||
}
|
||||
|
||||
interface JsonCodeBlockProps {
|
||||
className?: string;
|
||||
code: string;
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
function JsonCodeBlock({ className, code, theme }: JsonCodeBlockProps) {
|
||||
let formattedCode = code;
|
||||
|
||||
try {
|
||||
if (typeof formattedCode === 'object') {
|
||||
formattedCode = JSON.stringify(formattedCode, null, 2);
|
||||
} else if (typeof formattedCode === 'string') {
|
||||
// Attempt to parse and re-stringify for formatting
|
||||
try {
|
||||
const parsed = JSON.parse(formattedCode);
|
||||
formattedCode = JSON.stringify(parsed, null, 2);
|
||||
} catch {
|
||||
// Leave as is if not JSON
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// If parsing fails, keep original code
|
||||
logger.error('Failed to parse JSON', { error: e });
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames('text-xs rounded-md overflow-hidden mcp-tool-invocation-code', className)}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: jsonHighlighter.codeToHtml(formattedCode, {
|
||||
lang: 'json',
|
||||
theme: theme === 'dark' ? 'dark-plus' : 'light-plus',
|
||||
}),
|
||||
}}
|
||||
style={{
|
||||
padding: '0',
|
||||
margin: '0',
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ToolInvocationsProps {
|
||||
toolInvocations: ToolInvocationUIPart[];
|
||||
toolCallAnnotations: ToolCallAnnotation[];
|
||||
addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
|
||||
}
|
||||
|
||||
export const ToolInvocations = memo(({ toolInvocations, toolCallAnnotations, addToolResult }: ToolInvocationsProps) => {
|
||||
const theme = useStore(themeStore);
|
||||
const [showDetails, setShowDetails] = useState(false);
|
||||
|
||||
const toggleDetails = () => {
|
||||
setShowDetails((prev) => !prev);
|
||||
};
|
||||
|
||||
const toolCalls = useMemo(
|
||||
() => toolInvocations.filter((inv) => inv.toolInvocation.state === 'call'),
|
||||
[toolInvocations],
|
||||
);
|
||||
|
||||
const toolResults = useMemo(
|
||||
() => toolInvocations.filter((inv) => inv.toolInvocation.state === 'result'),
|
||||
[toolInvocations],
|
||||
);
|
||||
|
||||
const hasToolCalls = toolCalls.length > 0;
|
||||
const hasToolResults = toolResults.length > 0;
|
||||
|
||||
if (!hasToolCalls && !hasToolResults) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tool-invocation border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150 mt-4 mb-4">
|
||||
<div className="flex">
|
||||
<button
|
||||
className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
|
||||
onClick={toggleDetails}
|
||||
aria-label={showDetails ? 'Collapse details' : 'Expand details'}
|
||||
>
|
||||
<div className="p-2">
|
||||
<div className="i-ph:wrench-fill text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"></div>
|
||||
</div>
|
||||
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
|
||||
<div className="px-5 p-2 w-full text-left">
|
||||
<div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
|
||||
MCP Tool Invocations{' '}
|
||||
{hasToolResults && (
|
||||
<span className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
|
||||
({toolResults.length} tool{hasToolResults ? 's' : ''} used)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
|
||||
<AnimatePresence>
|
||||
{hasToolResults && (
|
||||
<motion.button
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: 'auto' }}
|
||||
exit={{ width: 0 }}
|
||||
transition={{ duration: 0.15, ease: cubicEasingFn }}
|
||||
className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
|
||||
onClick={toggleDetails}
|
||||
>
|
||||
<div className="p-2">
|
||||
<div
|
||||
className={`${showDetails ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'} text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors`}
|
||||
></div>
|
||||
</div>
|
||||
</motion.button>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<AnimatePresence>
|
||||
{hasToolCalls && (
|
||||
<motion.div
|
||||
className="details"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: 'auto' }}
|
||||
exit={{ height: '0px' }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
|
||||
|
||||
<div className="p-5 text-left bg-bolt-elements-actions-background">
|
||||
<ToolCallsList
|
||||
toolInvocations={toolCalls}
|
||||
toolCallAnnotations={toolCallAnnotations}
|
||||
addToolResult={addToolResult}
|
||||
theme={theme}
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{hasToolResults && showDetails && (
|
||||
<motion.div
|
||||
className="details"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: 'auto' }}
|
||||
exit={{ height: '0px' }}
|
||||
transition={{ duration: 0.15 }}
|
||||
>
|
||||
<div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
|
||||
|
||||
<div className="p-5 text-left bg-bolt-elements-actions-background">
|
||||
<ToolResultsList toolInvocations={toolResults} toolCallAnnotations={toolCallAnnotations} theme={theme} />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const toolVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
interface ToolResultsListProps {
|
||||
toolInvocations: ToolInvocationUIPart[];
|
||||
toolCallAnnotations: ToolCallAnnotation[];
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ToolResultsList = memo(({ toolInvocations, toolCallAnnotations, theme }: ToolResultsListProps) => {
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
||||
<ul className="list-none space-y-4">
|
||||
{toolInvocations.map((tool, index) => {
|
||||
const toolCallState = tool.toolInvocation.state;
|
||||
|
||||
if (toolCallState !== 'result') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { toolName, toolCallId } = tool.toolInvocation;
|
||||
|
||||
const annotation = toolCallAnnotations.find((annotation) => {
|
||||
return annotation.toolCallId === toolCallId;
|
||||
});
|
||||
|
||||
const isErrorResult = [TOOL_NO_EXECUTE_FUNCTION, TOOL_EXECUTION_DENIED, TOOL_EXECUTION_ERROR].includes(
|
||||
tool.toolInvocation.result,
|
||||
);
|
||||
|
||||
return (
|
||||
<motion.li
|
||||
key={index}
|
||||
variants={toolVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
ease: cubicEasingFn,
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-xs mb-1">
|
||||
{isErrorResult ? (
|
||||
<div className="text-lg text-bolt-elements-icon-error">
|
||||
<div className="i-ph:x"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-lg text-bolt-elements-icon-success">
|
||||
<div className="i-ph:check"></div>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-bolt-elements-textSecondary text-xs">Server:</div>
|
||||
<div className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</div>
|
||||
</div>
|
||||
|
||||
<div className="ml-6 mb-2">
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
||||
Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
||||
Description:{' '}
|
||||
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
|
||||
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
||||
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mt-3 mb-1">Result:</div>
|
||||
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
||||
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.result)} theme={theme} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</motion.div>
|
||||
);
|
||||
});
|
||||
|
||||
interface ToolCallsListProps {
|
||||
toolInvocations: ToolInvocationUIPart[];
|
||||
toolCallAnnotations: ToolCallAnnotation[];
|
||||
addToolResult: ({ toolCallId, result }: { toolCallId: string; result: any }) => void;
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
const ToolCallsList = memo(({ toolInvocations, toolCallAnnotations, addToolResult, theme }: ToolCallsListProps) => {
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
|
||||
<ul className="list-none space-y-4">
|
||||
{toolInvocations.map((tool, index) => {
|
||||
const toolCallState = tool.toolInvocation.state;
|
||||
|
||||
if (toolCallState !== 'call') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { toolName, toolCallId } = tool.toolInvocation;
|
||||
|
||||
const annotation = toolCallAnnotations.find((annotation) => {
|
||||
return annotation.toolCallId === toolCallId;
|
||||
});
|
||||
|
||||
return (
|
||||
<motion.li
|
||||
key={index}
|
||||
variants={toolVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
transition={{
|
||||
duration: 0.2,
|
||||
ease: cubicEasingFn,
|
||||
}}
|
||||
>
|
||||
<div className="ml-6 mb-2">
|
||||
<div key={toolCallId}>
|
||||
<div className="text-bolt-elements-textPrimary">Bolt wants to use a tool.</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
||||
Server:{' '}
|
||||
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.serverName}</span>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
||||
Tool: <span className="text-bolt-elements-textPrimary font-semibold">{toolName}</span>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">
|
||||
Description:{' '}
|
||||
<span className="text-bolt-elements-textPrimary font-semibold">{annotation?.toolDescription}</span>
|
||||
</div>
|
||||
<div className="text-bolt-elements-textSecondary text-xs mb-1">Parameters:</div>
|
||||
<div className="bg-[#FAFAFA] dark:bg-[#0A0A0A] p-3 rounded-md">
|
||||
<JsonCodeBlock className="mb-0" code={JSON.stringify(tool.toolInvocation.args)} theme={theme} />
|
||||
</div>{' '}
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<button
|
||||
className={classNames(
|
||||
'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
'bg-purple-500 hover:bg-purple-600',
|
||||
'text-white',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
)}
|
||||
onClick={() =>
|
||||
addToolResult({
|
||||
toolCallId,
|
||||
result: TOOL_EXECUTION_APPROVAL.APPROVE,
|
||||
})
|
||||
}
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
<button
|
||||
className={classNames(
|
||||
'px-3 py-1.5 rounded-lg text-sm',
|
||||
'bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-4',
|
||||
'text-bolt-elements-textPrimary',
|
||||
'transition-all duration-200',
|
||||
'flex items-center gap-2',
|
||||
)}
|
||||
onClick={() =>
|
||||
addToolResult({
|
||||
toolCallId,
|
||||
result: TOOL_EXECUTION_APPROVAL.REJECT,
|
||||
})
|
||||
}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</motion.div>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user