feat: carry mcp primitives content as a system prompt

app/components/chat.tsx

@@ -1,17 +1,18 @@
 import { useDebouncedCallback } from "use-debounce";
 import React, {
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-  useCallback,
   Fragment,
   RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
 } from "react";
 
 import SendWhiteIcon from "../icons/send-white.svg";
 import BrainIcon from "../icons/brain.svg";
 import RenameIcon from "../icons/rename.svg";
+import EditIcon from "../icons/rename.svg";
 import ExportIcon from "../icons/share.svg";
 import ReturnIcon from "../icons/return.svg";
 import CopyIcon from "../icons/copy.svg";
@@ -24,11 +25,11 @@ import MaskIcon from "../icons/mask.svg";
 import MaxIcon from "../icons/max.svg";
 import MinIcon from "../icons/min.svg";
 import ResetIcon from "../icons/reload.svg";
+import ReloadIcon from "../icons/reload.svg";
 import BreakIcon from "../icons/break.svg";
 import SettingsIcon from "../icons/chat-settings.svg";
 import DeleteIcon from "../icons/clear.svg";
 import PinIcon from "../icons/pin.svg";
-import EditIcon from "../icons/rename.svg";
 import ConfirmIcon from "../icons/confirm.svg";
 import CloseIcon from "../icons/close.svg";
 import CancelIcon from "../icons/cancel.svg";
@@ -45,33 +46,32 @@ import QualityIcon from "../icons/hd.svg";
 import StyleIcon from "../icons/palette.svg";
 import PluginIcon from "../icons/plugin.svg";
 import ShortcutkeyIcon from "../icons/shortcutkey.svg";
-import ReloadIcon from "../icons/reload.svg";
 import HeadphoneIcon from "../icons/headphone.svg";
 import {
-  ChatMessage,
-  SubmitKey,
-  useChatStore,
   BOT_HELLO,
+  ChatMessage,
   createMessage,
-  useAccessStore,
-  Theme,
-  useAppConfig,
   DEFAULT_TOPIC,
   ModelType,
+  SubmitKey,
+  Theme,
+  useAccessStore,
+  useAppConfig,
+  useChatStore,
   usePluginStore,
 } from "../store";
 
 import {
-  copyToClipboard,
-  selectOrCopy,
   autoGrowTextArea,
-  useMobileScreen,
-  getMessageTextContent,
+  copyToClipboard,
   getMessageImages,
-  isVisionModel,
+  getMessageTextContent,
   isDalle3,
-  showPlugins,
+  isVisionModel,
   safeLocalStorage,
+  selectOrCopy,
+  showPlugins,
+  useMobileScreen,
 } from "../utils";
 
 import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
@@ -79,7 +79,7 @@ import { uploadImage as uploadImageRemote } from "@/app/utils/chat";
 import dynamic from "next/dynamic";
 
 import { ChatControllerPool } from "../client/controller";
-import { DalleSize, DalleQuality, DalleStyle } from "../typing";
+import { DalleQuality, DalleSize, DalleStyle } from "../typing";
 import { Prompt, usePromptStore } from "../store/prompt";
 import Locale from "../locales";
 
@@ -102,8 +102,8 @@ import {
   ModelProvider,
   Path,
   REQUEST_TIMEOUT_MS,
-  UNFINISHED_INPUT,
   ServiceProvider,
+  UNFINISHED_INPUT,
 } from "../constant";
 import { Avatar } from "./emoji";
 import { ContextPrompts, MaskAvatar, MaskConfig } from "./mask";
@@ -113,9 +113,7 @@ import { prettyObject } from "../utils/format";
 import { ExportMessageModal } from "./exporter";
 import { getClientConfig } from "../config/client";
 import { useAllModels } from "../utils/hooks";
-import { MultimodalContent } from "../client/api";
-
-import { ClientApi } from "../client/api";
+import { ClientApi, MultimodalContent } from "../client/api";
 import { createTTSPlayer } from "../utils/audio";
 import { MsEdgeTTS, OUTPUT_FORMAT } from "../utils/ms_edge_tts";
 
@@ -427,6 +425,7 @@ function useScrollToBottom(
   // for auto-scroll
 
   const [autoScroll, setAutoScroll] = useState(true);
+
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
@@ -473,6 +472,7 @@ export function ChatActions(props: {
 
   // switch themes
   const theme = config.theme;
+
   function nextTheme() {
     const themes = [Theme.Auto, Theme.Light, Theme.Dark];
     const themeIndex = themes.indexOf(theme);
@@ -1237,6 +1237,7 @@ function _Chat() {
   const accessStore = useAccessStore();
   const [speechStatus, setSpeechStatus] = useState(false);
   const [speechLoading, setSpeechLoading] = useState(false);
+
   async function openaiSpeech(text: string) {
     if (speechStatus) {
       ttsPlayer.stop();
@@ -1336,6 +1337,7 @@ function _Chat() {
   const [msgRenderIndex, _setMsgRenderIndex] = useState(
     Math.max(0, renderMessages.length - CHAT_PAGE_SIZE),
   );
+
   function setMsgRenderIndex(newIndex: number) {
     newIndex = Math.min(renderMessages.length - CHAT_PAGE_SIZE, newIndex);
     newIndex = Math.max(0, newIndex);
@@ -1371,6 +1373,7 @@ function _Chat() {
     setHitBottom(isHitBottom);
     setAutoScroll(isHitBottom);
   };
+
   function scrollToBottom() {
     setMsgRenderIndex(renderMessages.length - CHAT_PAGE_SIZE);
     scrollDomToBottom();
@@ -1712,252 +1715,264 @@ function _Chat() {
                 setAutoScroll(false);
               }}
             >
-              {messages.map((message, i) => {
-                const isUser = message.role === "user";
-                const isContext = i < context.length;
-                const showActions =
-                  i > 0 &&
-                  !(message.preview || message.content.length === 0) &&
-                  !isContext;
-                const showTyping = message.preview || message.streaming;
+              {messages
+                // TODO
+                // .filter((m) => !m.isMcpResponse)
+                .map((message, i) => {
+                  const isUser = message.role === "user";
+                  const isContext = i < context.length;
+                  const showActions =
+                    i > 0 &&
+                    !(message.preview || message.content.length === 0) &&
+                    !isContext;
+                  const showTyping = message.preview || message.streaming;
 
-                const shouldShowClearContextDivider =
-                  i === clearContextIndex - 1;
+                  const shouldShowClearContextDivider =
+                    i === clearContextIndex - 1;
 
-                return (
-                  <Fragment key={message.id}>
-                    <div
-                      className={
-                        isUser
-                          ? styles["chat-message-user"]
-                          : styles["chat-message"]
-                      }
-                    >
-                      <div className={styles["chat-message-container"]}>
-                        <div className={styles["chat-message-header"]}>
-                          <div className={styles["chat-message-avatar"]}>
-                            <div className={styles["chat-message-edit"]}>
-                              <IconButton
-                                icon={<EditIcon />}
-                                aria={Locale.Chat.Actions.Edit}
-                                onClick={async () => {
-                                  const newMessage = await showPrompt(
-                                    Locale.Chat.Actions.Edit,
-                                    getMessageTextContent(message),
-                                    10,
-                                  );
-                                  let newContent: string | MultimodalContent[] =
-                                    newMessage;
-                                  const images = getMessageImages(message);
-                                  if (images.length > 0) {
-                                    newContent = [
-                                      { type: "text", text: newMessage },
-                                    ];
-                                    for (let i = 0; i < images.length; i++) {
-                                      newContent.push({
-                                        type: "image_url",
-                                        image_url: {
-                                          url: images[i],
-                                        },
-                                      });
-                                    }
-                                  }
-                                  chatStore.updateTargetSession(
-                                    session,
-                                    (session) => {
-                                      const m = session.mask.context
-                                        .concat(session.messages)
-                                        .find((m) => m.id === message.id);
-                                      if (m) {
-                                        m.content = newContent;
+                  return (
+                    <Fragment key={message.id}>
+                      <div
+                        className={
+                          isUser
+                            ? styles["chat-message-user"]
+                            : styles["chat-message"]
+                        }
+                      >
+                        <div className={styles["chat-message-container"]}>
+                          <div className={styles["chat-message-header"]}>
+                            <div className={styles["chat-message-avatar"]}>
+                              <div className={styles["chat-message-edit"]}>
+                                <IconButton
+                                  icon={<EditIcon />}
+                                  aria={Locale.Chat.Actions.Edit}
+                                  onClick={async () => {
+                                    const newMessage = await showPrompt(
+                                      Locale.Chat.Actions.Edit,
+                                      getMessageTextContent(message),
+                                      10,
+                                    );
+                                    let newContent:
+                                      | string
+                                      | MultimodalContent[] = newMessage;
+                                    const images = getMessageImages(message);
+                                    if (images.length > 0) {
+                                      newContent = [
+                                        { type: "text", text: newMessage },
+                                      ];
+                                      for (let i = 0; i < images.length; i++) {
+                                        newContent.push({
+                                          type: "image_url",
+                                          image_url: {
+                                            url: images[i],
+                                          },
+                                        });
                                       }
-                                    },
-                                  );
-                                }}
-                              ></IconButton>
-                            </div>
-                            {isUser ? (
-                              <Avatar avatar={config.avatar} />
-                            ) : (
-                              <>
-                                {["system"].includes(message.role) ? (
-                                  <Avatar avatar="2699-fe0f" />
-                                ) : (
-                                  <MaskAvatar
-                                    avatar={session.mask.avatar}
-                                    model={
-                                      message.model ||
-                                      session.mask.modelConfig.model
                                     }
-                                  />
-                                )}
-                              </>
+                                    chatStore.updateTargetSession(
+                                      session,
+                                      (session) => {
+                                        const m = session.mask.context
+                                          .concat(session.messages)
+                                          .find((m) => m.id === message.id);
+                                        if (m) {
+                                          m.content = newContent;
+                                        }
+                                      },
+                                    );
+                                  }}
+                                ></IconButton>
+                              </div>
+                              {isUser ? (
+                                <Avatar avatar={config.avatar} />
+                              ) : (
+                                <>
+                                  {["system"].includes(message.role) ? (
+                                    <Avatar avatar="2699-fe0f" />
+                                  ) : (
+                                    <MaskAvatar
+                                      avatar={session.mask.avatar}
+                                      model={
+                                        message.model ||
+                                        session.mask.modelConfig.model
+                                      }
+                                    />
+                                  )}
+                                </>
+                              )}
+                            </div>
+                            {!isUser && (
+                              <div className={styles["chat-model-name"]}>
+                                {message.model}
+                              </div>
                             )}
-                          </div>
-                          {!isUser && (
-                            <div className={styles["chat-model-name"]}>
-                              {message.model}
-                            </div>
-                          )}
 
-                          {showActions && (
-                            <div className={styles["chat-message-actions"]}>
-                              <div className={styles["chat-input-actions"]}>
-                                {message.streaming ? (
-                                  <ChatAction
-                                    text={Locale.Chat.Actions.Stop}
-                                    icon={<StopIcon />}
-                                    onClick={() => onUserStop(message.id ?? i)}
-                                  />
-                                ) : (
-                                  <>
+                            {showActions && (
+                              <div className={styles["chat-message-actions"]}>
+                                <div className={styles["chat-input-actions"]}>
+                                  {message.streaming ? (
                                     <ChatAction
-                                      text={Locale.Chat.Actions.Retry}
-                                      icon={<ResetIcon />}
-                                      onClick={() => onResend(message)}
-                                    />
-
-                                    <ChatAction
-                                      text={Locale.Chat.Actions.Delete}
-                                      icon={<DeleteIcon />}
-                                      onClick={() => onDelete(message.id ?? i)}
-                                    />
-
-                                    <ChatAction
-                                      text={Locale.Chat.Actions.Pin}
-                                      icon={<PinIcon />}
-                                      onClick={() => onPinMessage(message)}
-                                    />
-                                    <ChatAction
-                                      text={Locale.Chat.Actions.Copy}
-                                      icon={<CopyIcon />}
+                                      text={Locale.Chat.Actions.Stop}
+                                      icon={<StopIcon />}
                                       onClick={() =>
-                                        copyToClipboard(
-                                          getMessageTextContent(message),
-                                        )
+                                        onUserStop(message.id ?? i)
                                       }
                                     />
-                                    {config.ttsConfig.enable && (
+                                  ) : (
+                                    <>
                                       <ChatAction
-                                        text={
-                                          speechStatus
-                                            ? Locale.Chat.Actions.StopSpeech
-                                            : Locale.Chat.Actions.Speech
-                                        }
-                                        icon={
-                                          speechStatus ? (
-                                            <SpeakStopIcon />
-                                          ) : (
-                                            <SpeakIcon />
-                                          )
-                                        }
+                                        text={Locale.Chat.Actions.Retry}
+                                        icon={<ResetIcon />}
+                                        onClick={() => onResend(message)}
+                                      />
+
+                                      <ChatAction
+                                        text={Locale.Chat.Actions.Delete}
+                                        icon={<DeleteIcon />}
                                         onClick={() =>
-                                          openaiSpeech(
+                                          onDelete(message.id ?? i)
+                                        }
+                                      />
+
+                                      <ChatAction
+                                        text={Locale.Chat.Actions.Pin}
+                                        icon={<PinIcon />}
+                                        onClick={() => onPinMessage(message)}
+                                      />
+                                      <ChatAction
+                                        text={Locale.Chat.Actions.Copy}
+                                        icon={<CopyIcon />}
+                                        onClick={() =>
+                                          copyToClipboard(
                                             getMessageTextContent(message),
                                           )
                                         }
                                       />
-                                    )}
-                                  </>
-                                )}
+                                      {config.ttsConfig.enable && (
+                                        <ChatAction
+                                          text={
+                                            speechStatus
+                                              ? Locale.Chat.Actions.StopSpeech
+                                              : Locale.Chat.Actions.Speech
+                                          }
+                                          icon={
+                                            speechStatus ? (
+                                              <SpeakStopIcon />
+                                            ) : (
+                                              <SpeakIcon />
+                                            )
+                                          }
+                                          onClick={() =>
+                                            openaiSpeech(
+                                              getMessageTextContent(message),
+                                            )
+                                          }
+                                        />
+                                      )}
+                                    </>
+                                  )}
+                                </div>
                               </div>
+                            )}
+                          </div>
+                          {message?.tools?.length == 0 && showTyping && (
+                            <div className={styles["chat-message-status"]}>
+                              {Locale.Chat.Typing}
                             </div>
                           )}
-                        </div>
-                        {message?.tools?.length == 0 && showTyping && (
-                          <div className={styles["chat-message-status"]}>
-                            {Locale.Chat.Typing}
-                          </div>
-                        )}
-                        {/*@ts-ignore*/}
-                        {message?.tools?.length > 0 && (
-                          <div className={styles["chat-message-tools"]}>
-                            {message?.tools?.map((tool) => (
-                              <div
-                                key={tool.id}
-                                title={tool?.errorMsg}
-                                className={styles["chat-message-tool"]}
-                              >
-                                {tool.isError === false ? (
-                                  <ConfirmIcon />
-                                ) : tool.isError === true ? (
-                                  <CloseIcon />
-                                ) : (
-                                  <LoadingButtonIcon />
-                                )}
-                                <span>{tool?.function?.name}</span>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                        <div className={styles["chat-message-item"]}>
-                          <Markdown
-                            key={message.streaming ? "loading" : "done"}
-                            content={getMessageTextContent(message)}
-                            loading={
-                              (message.preview || message.streaming) &&
-                              message.content.length === 0 &&
-                              !isUser
-                            }
-                            //   onContextMenu={(e) => onRightClick(e, message)} // hard to use
-                            onDoubleClickCapture={() => {
-                              if (!isMobileScreen) return;
-                              setUserInput(getMessageTextContent(message));
-                            }}
-                            fontSize={fontSize}
-                            fontFamily={fontFamily}
-                            parentRef={scrollRef}
-                            defaultShow={i >= messages.length - 6}
-                          />
-                          {getMessageImages(message).length == 1 && (
-                            <img
-                              className={styles["chat-message-item-image"]}
-                              src={getMessageImages(message)[0]}
-                              alt=""
-                            />
+                          {/*@ts-ignore*/}
+                          {message?.tools?.length > 0 && (
+                            <div className={styles["chat-message-tools"]}>
+                              {message?.tools?.map((tool) => (
+                                <div
+                                  key={tool.id}
+                                  title={tool?.errorMsg}
+                                  className={styles["chat-message-tool"]}
+                                >
+                                  {tool.isError === false ? (
+                                    <ConfirmIcon />
+                                  ) : tool.isError === true ? (
+                                    <CloseIcon />
+                                  ) : (
+                                    <LoadingButtonIcon />
+                                  )}
+                                  <span>{tool?.function?.name}</span>
+                                </div>
+                              ))}
+                            </div>
                           )}
-                          {getMessageImages(message).length > 1 && (
-                            <div
-                              className={styles["chat-message-item-images"]}
-                              style={
-                                {
-                                  "--image-count":
-                                    getMessageImages(message).length,
-                                } as React.CSSProperties
+                          <div className={styles["chat-message-item"]}>
+                            <Markdown
+                              key={message.streaming ? "loading" : "done"}
+                              content={getMessageTextContent(message)}
+                              loading={
+                                (message.preview || message.streaming) &&
+                                message.content.length === 0 &&
+                                !isUser
                               }
-                            >
-                              {getMessageImages(message).map((image, index) => {
-                                return (
-                                  <img
-                                    className={
-                                      styles["chat-message-item-image-multi"]
-                                    }
-                                    key={index}
-                                    src={image}
-                                    alt=""
-                                  />
-                                );
-                              })}
+                              //   onContextMenu={(e) => onRightClick(e, message)} // hard to use
+                              onDoubleClickCapture={() => {
+                                if (!isMobileScreen) return;
+                                setUserInput(getMessageTextContent(message));
+                              }}
+                              fontSize={fontSize}
+                              fontFamily={fontFamily}
+                              parentRef={scrollRef}
+                              defaultShow={i >= messages.length - 6}
+                            />
+                            {getMessageImages(message).length == 1 && (
+                              <img
+                                className={styles["chat-message-item-image"]}
+                                src={getMessageImages(message)[0]}
+                                alt=""
+                              />
+                            )}
+                            {getMessageImages(message).length > 1 && (
+                              <div
+                                className={styles["chat-message-item-images"]}
+                                style={
+                                  {
+                                    "--image-count":
+                                      getMessageImages(message).length,
+                                  } as React.CSSProperties
+                                }
+                              >
+                                {getMessageImages(message).map(
+                                  (image, index) => {
+                                    return (
+                                      <img
+                                        className={
+                                          styles[
+                                            "chat-message-item-image-multi"
+                                          ]
+                                        }
+                                        key={index}
+                                        src={image}
+                                        alt=""
+                                      />
+                                    );
+                                  },
+                                )}
+                              </div>
+                            )}
+                          </div>
+                          {message?.audio_url && (
+                            <div className={styles["chat-message-audio"]}>
+                              <audio src={message.audio_url} controls />
                             </div>
                           )}
-                        </div>
-                        {message?.audio_url && (
-                          <div className={styles["chat-message-audio"]}>
-                            <audio src={message.audio_url} controls />
-                          </div>
-                        )}
 
-                        <div className={styles["chat-message-action-date"]}>
-                          {isContext
-                            ? Locale.Chat.IsContext
-                            : message.date.toLocaleString()}
+                          <div className={styles["chat-message-action-date"]}>
+                            {isContext
+                              ? Locale.Chat.IsContext
+                              : message.date.toLocaleString()}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    {shouldShowClearContextDivider && <ClearContextDivider />}
-                  </Fragment>
-                );
-              })}
+                      {shouldShowClearContextDivider && <ClearContextDivider />}
+                    </Fragment>
+                  );
+                })}
             </div>
             <div className={styles["chat-input-panel"]}>
               <PromptHints

app/constant.ts

@@ -253,6 +253,117 @@ Latex inline: \\(x^2\\)
 Latex block: $$e=mc^2$$
 `;
 
+export const MCP_PRIMITIVES_TEMPLATE = `
+[clientId]
+{{ clientId }}
+[primitives]
+{{ primitives }}
+`;
+
+export const MCP_SYSTEM_TEMPLATE = `
+You are an AI assistant with access to system tools. Your role is to help users by combining natural language understanding with tool operations when needed.
+
+1. TOOLS AVAILABLE:
+{{ MCP_PRIMITIVES }}
+
+2. WHEN TO USE TOOLS:
+   - ALWAYS USE TOOLS when they can help answer user questions
+   - DO NOT just describe what you could do - TAKE ACTION immediately
+   - If you're not sure whether to use a tool, USE IT
+   - Common triggers for tool use:
+     * Questions about files or directories
+     * Requests to check, list, or manipulate system resources
+     * Any query that can be answered with available tools
+
+3. HOW TO USE TOOLS:
+   A. Tool Call Format:
+      - Use markdown code blocks with format: \`\`\`json:mcp:{clientId}\`\`\`
+      - Always include:
+        * method: "tools/call"
+        * params: 
+          - name: must match an available primitive name
+          - arguments: required parameters for the primitive
+
+   B. Response Format:
+      - Tool responses will come as user messages
+      - Format: \`\`\`json:mcp-response:{clientId}\`\`\`
+      - Wait for response before making another tool call
+
+   C. Important Rules:
+      - Only ONE tool call per message
+      - ALWAYS TAKE ACTION instead of just describing what you could do
+      - Include the correct clientId in code block language tag
+      - Verify arguments match the primitive's requirements
+
+4. INTERACTION FLOW:
+   A. When user makes a request:
+      - IMMEDIATELY use appropriate tool if available
+      - DO NOT ask if user wants you to use the tool
+      - DO NOT just describe what you could do
+   B. After receiving tool response:
+      - Explain results clearly
+      - Take next appropriate action if needed
+   C. If tools fail:
+      - Explain the error
+      - Try alternative approach immediately
+
+5. EXAMPLE INTERACTION:
+   User: "What files do I have on my desktop?"
+   Assistant: "I'll check which directories I have access to.
+   \`\`\`json:mcp:filesystem
+   {
+     "method": "tools/call",
+     "params": {
+       "name": "list_allowed_directories",
+       "arguments": {}
+     }
+   }
+   \`\`\`"
+
+   User: "\`\`\`json:mcp-response:filesystem
+   {
+     "directories": ["/path/to/desktop"]
+   }
+   \`\`\`"
+
+   Assistant: "I can see that I have access to your desktop directory. Let me list its contents for you.
+   \`\`\`json:mcp:filesystem
+   {
+     "method": "tools/call",
+     "params": {
+       "name": "list_directory",
+       "arguments": {
+         "path": "/path/to/desktop"
+       }
+     }
+   }
+   \`\`\`"
+
+   User: "\`\`\`json:mcp-response:filesystem
+   {
+     "content": [
+       {
+         "type": "text",
+         "text": "[FILE] document.txt\n[DIR] folder1\n[DIR] folder2\n[FILE] image.png\n[FILE] notes.md"
+       }
+     ]
+   }
+   \`\`\`"
+
+   Assistant: "I've found the contents of your desktop. Here's what you have:
+
+   Files:
+   - document.txt
+   - image.png
+   - notes.md
+
+   Directories:
+   - folder1
+   - folder2
+
+   Would you like to explore any of these directories or perform other operations with these files?"
+`;
+
 export const SUMMARIZE_MODEL = "gpt-4o-mini";
 export const GEMINI_SUMMARIZE_MODEL = "gemini-pro";
 

app/mcp/actions.ts

@@ -1,6 +1,11 @@
 "use server";
-
-import { createClient, executeRequest } from "./client";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import {
+  createClient,
+  executeRequest,
+  listPrimitives,
+  Primitive,
+} from "./client";
 import { MCPClientLogger } from "./logger";
 import conf from "./mcp_config.json";
 import { McpRequestMessage } from "./types";
@@ -8,7 +13,10 @@ import { McpRequestMessage } from "./types";
 const logger = new MCPClientLogger("MCP Actions");
 
 // Use Map to store all clients
-const clientsMap = new Map<string, any>();
+const clientsMap = new Map<
+  string,
+  { client: Client; primitives: Primitive[] }
+>();
 
 // Whether initialized
 let initialized = false;
@@ -30,8 +38,11 @@ export async function initializeMcpClients() {
     try {
       logger.info(`Initializing MCP client: ${clientId}`);
       const client = await createClient(config, clientId);
-      clientsMap.set(clientId, client);
-      logger.success(`Client ${clientId} initialized`);
+      const primitives = await listPrimitives(client);
+      clientsMap.set(clientId, { client, primitives });
+      logger.success(
+        `Client [${clientId}] initialized, ${primitives.length} primitives supported`,
+      );
     } catch (error) {
       errorClients.push(clientId);
       logger.error(`Failed to initialize client ${clientId}: ${error}`);
@@ -58,7 +69,7 @@ export async function executeMcpAction(
 ) {
   try {
     // Find the corresponding client
-    const client = clientsMap.get(clientId);
+    const client = clientsMap.get(clientId)?.client;
     if (!client) {
       logger.error(`Client ${clientId} not found`);
       return;
@@ -80,3 +91,16 @@ export async function getAvailableClients() {
     (clientId) => !errorClients.includes(clientId),
   );
 }
+
+// Get all primitives from all clients
+export async function getAllPrimitives(): Promise<
+  {
+    clientId: string;
+    primitives: Primitive[];
+  }[]
+> {
+  return Array.from(clientsMap.entries()).map(([clientId, { primitives }]) => ({
+    clientId,
+    primitives,
+  }));
+}

app/mcp/client.ts

@@ -40,13 +40,13 @@ export async function createClient(
   return client;
 }
 
-interface Primitive {
+export interface Primitive {
   type: "resource" | "tool" | "prompt";
   value: any;
 }
 
 /** List all resources, tools, and prompts */
-export async function listPrimitives(client: Client) {
+export async function listPrimitives(client: Client): Promise<Primitive[]> {
   const capabilities = client.getServerCapabilities();
   const primitives: Primitive[] = [];
   const promises = [];

app/mcp/example.ts

@@ -4,25 +4,25 @@ import conf from "./mcp_config.json";
 
 const logger = new MCPClientLogger("MCP Server Example", true);
 
-async function main() {
-  logger.info("Connecting to server...");
+const TEST_SERVER = "everything";
 
-  const client = await createClient(conf.mcpServers.everything, "everything");
+async function main() {
+  logger.info(`All MCP servers: ${Object.keys(conf.mcpServers).join(", ")}`);
+
+  logger.info(`Connecting to server ${TEST_SERVER}...`);
+
+  const client = await createClient(conf.mcpServers[TEST_SERVER], TEST_SERVER);
   const primitives = await listPrimitives(client);
 
-  logger.success(`Connected to server everything`);
+  logger.success(`Connected to server ${TEST_SERVER}`);
 
   logger.info(
-    `server capabilities: ${Object.keys(
-      client.getServerCapabilities() ?? [],
-    ).join(", ")}`,
+    `${TEST_SERVER} supported primitives:\n${JSON.stringify(
+      primitives.filter((i) => i.type === "tool"),
+      null,
+      2,
+    )}`,
   );
-
-  logger.info("Server supports the following primitives:");
-
-  primitives.forEach((primitive) => {
-    logger.info("\n" + JSON.stringify(primitive, null, 2));
-  });
 }
 
 main().catch((error) => {

app/store/chat.ts

@@ -21,6 +21,8 @@ import {
   DEFAULT_SYSTEM_TEMPLATE,
   GEMINI_SUMMARIZE_MODEL,
   KnowledgeCutOffDate,
+  MCP_PRIMITIVES_TEMPLATE,
+  MCP_SYSTEM_TEMPLATE,
   ServiceProvider,
   StoreKey,
   SUMMARIZE_MODEL,
@@ -33,7 +35,7 @@ import { ModelConfig, ModelType, useAppConfig } from "./config";
 import { useAccessStore } from "./access";
 import { collectModelsWithDefaultModel } from "../utils/model";
 import { createEmptyMask, Mask } from "./mask";
-import { executeMcpAction } from "../mcp/actions";
+import { executeMcpAction, getAllPrimitives } from "../mcp/actions";
 import { extractMcpJson, isMcpJson } from "../mcp/utils";
 
 const localStorage = safeLocalStorage();
@@ -196,6 +198,26 @@ function fillTemplateWith(input: string, modelConfig: ModelConfig) {
   return output;
 }
 
+async function getMcpSystemPrompt(): Promise<string> {
+  let primitives = await getAllPrimitives();
+  primitives = primitives.filter((i) =>
+    i.primitives.some((p) => p.type === "tool"),
+  );
+
+  let primitivesString = "";
+  primitives.forEach((i) => {
+    primitivesString += MCP_PRIMITIVES_TEMPLATE.replace(
+      "{{ clientId }}",
+      i.clientId,
+    ).replace(
+      "{{ primitives }}",
+      i.primitives.map((p) => JSON.stringify(p, null, 2)).join("\n"),
+    );
+  });
+
+  return MCP_SYSTEM_TEMPLATE.replace("{{ MCP_PRIMITIVES }}", primitivesString);
+}
+
 const DEFAULT_CHAT_STATE = {
   sessions: [createEmptySession()],
   currentSessionIndex: 0,
@@ -409,7 +431,7 @@ export const useChatStore = createPersistStore(
         });
 
         // get recent messages
-        const recentMessages = get().getMessagesWithMemory();
+        const recentMessages = await get().getMessagesWithMemory();
         const sendMessages = recentMessages.concat(userMessage);
         const messageIndex = session.messages.length + 1;
 
@@ -508,7 +530,7 @@ export const useChatStore = createPersistStore(
         }
       },
 
-      getMessagesWithMemory() {
+      async getMessagesWithMemory() {
         const session = get().currentSession();
         const modelConfig = session.mask.modelConfig;
         const clearContextIndex = session.clearContextIndex ?? 0;
@@ -524,18 +546,26 @@ export const useChatStore = createPersistStore(
           (session.mask.modelConfig.model.startsWith("gpt-") ||
             session.mask.modelConfig.model.startsWith("chatgpt-"));
 
+        const mcpSystemPrompt = await getMcpSystemPrompt();
+
         var systemPrompts: ChatMessage[] = [];
         systemPrompts = shouldInjectSystemPrompts
           ? [
               createMessage({
                 role: "system",
-                content: fillTemplateWith("", {
-                  ...modelConfig,
-                  template: DEFAULT_SYSTEM_TEMPLATE,
-                }),
+                content:
+                  fillTemplateWith("", {
+                    ...modelConfig,
+                    template: DEFAULT_SYSTEM_TEMPLATE,
+                  }) + mcpSystemPrompt,
               }),
             ]
-          : [];
+          : [
+              createMessage({
+                role: "system",
+                content: mcpSystemPrompt,
+              }),
+            ];
         if (shouldInjectSystemPrompts) {
           console.log(
             "[Global System Prompt] ",
@@ -796,12 +826,12 @@ export const useChatStore = createPersistStore(
                       ? JSON.stringify(result)
                       : String(result);
                   get().onUserInput(
-                    `\`\`\`json:mcp:${mcpRequest.clientId}\n${mcpResponse}\n\`\`\``,
+                    `\`\`\`json:mcp-response:${mcpRequest.clientId}\n${mcpResponse}\n\`\`\``,
                     [],
                     true,
                   );
                 })
-                .catch((error) => showToast(String(error)));
+                .catch((error) => showToast("MCP execution failed", error));
             }
           } catch (error) {
             console.error("[MCP Error]", error);