diff --git a/packages/plugins/page/src/mcp/tools/editSpecificPage.ts b/packages/plugins/page/src/mcp/tools/editSpecificPage.ts
index 5fe50d62dc..dbe7398f4b 100644
--- a/packages/plugins/page/src/mcp/tools/editSpecificPage.ts
+++ b/packages/plugins/page/src/mcp/tools/editSpecificPage.ts
@@ -6,7 +6,7 @@ const inputSchema = z.object({
 })
 
 export const editSpecificPage = {
-  name: 'Edit_page_in_canvas.',
+  name: 'edit_page_in_canvas',
   title: '在画布中编辑页面',
   order: 9,
   description: 'Edit a specific page in canvas. Use this tool when you need to edit some page in canvas.',
diff --git a/packages/plugins/robot/assets/loading.webp b/packages/plugins/robot/assets/loading.webp
new file mode 100644
index 0000000000..ed71b43597
Binary files /dev/null and b/packages/plugins/robot/assets/loading.webp differ
diff --git a/packages/plugins/robot/src/Main.vue b/packages/plugins/robot/src/Main.vue
index 4e5562d225..1e202390bb 100644
--- a/packages/plugins/robot/src/Main.vue
+++ b/packages/plugins/robot/src/Main.vue
@@ -36,20 +36,27 @@
               <icon-new-session />
             </button>
           </template>
-          <div v-if="activeMessages.length === 0">
-            <tr-welcome title="AI助手" description="您好，我是您的开发小助手" :icon="welcomeIcon" class="robot-welcome">
-            </tr-welcome>
-            <tr-prompts
-              :items="promptItems"
-              :wrap="true"
-              item-class="prompt-item"
-              class="tiny-prompts"
-              @item-click="handlePromptItemClick"
-            ></tr-prompts>
+          <div class="robot-chat-container-content" ref="chatContainerRef">
+            <div v-if="activeMessages.length === 0">
+              <tr-welcome
+                title="AI助手"
+                description="您好，我是您的开发小助手"
+                :icon="welcomeIcon"
+                class="robot-welcome"
+              >
+              </tr-welcome>
+              <tr-prompts
+                :items="promptItems"
+                :wrap="true"
+                item-class="prompt-item"
+                class="tiny-prompts"
+                @item-click="handlePromptItemClick"
+              ></tr-prompts>
+            </div>
+            <tr-bubble-provider :content-renderers="contentRenderers" v-else>
+              <tr-bubble-list :items="activeMessages" :roles="roles" autoScroll></tr-bubble-list>
+            </tr-bubble-provider>
           </div>
-          <tr-bubble-provider :message-renderers="{ markdown: MarkdownRenderer }" v-else>
-            <tr-bubble-list :items="activeMessages" :roles="roles" autoScroll></tr-bubble-list>
-          </tr-bubble-provider>
           <template #footer>
             <tr-sender
               :maxlength="4000"
@@ -61,7 +68,7 @@
               @submit="sendContent(inputContent, false)"
             >
               <template #footer-left>
-                <mcp-server></mcp-server>
+                <mcp-server :position="mcpDrawerPosition"></mcp-server>
               </template>
             </tr-sender>
           </template>
@@ -73,7 +80,18 @@
 
 <script lang="ts">
 /* metaService: engine.plugins.robot.Main */
-import { ref, onMounted, watchEffect, type CSSProperties, h, resolveComponent } from 'vue'
+import {
+  ref,
+  onMounted,
+  watchEffect,
+  type CSSProperties,
+  h,
+  resolveComponent,
+  computed,
+  watch,
+  nextTick,
+  type Component
+} from 'vue'
 import { Notify, Loading, TinyPopover } from '@opentiny/vue'
 import { useCanvas, useHistory, usePage, useModal, getMetaApi, META_SERVICE } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
@@ -85,6 +103,7 @@ import { getBlockContent, initBlockList, getAIModelOptions } from './js/robotSet
 import McpServer from './mcp/McpServer.vue'
 import useMcpServer from './mcp/useMcp'
 import MarkdownRenderer from './mcp/MarkdownRenderer.vue'
+import LoadingRenderer from './mcp/LoadingRenderer.vue'
 import { sendMcpRequest } from './mcp/utils'
 
 export default {
@@ -118,6 +137,8 @@ export default {
     const tokenValue = ref('')
     const showPopover = ref(false)
 
+    const chatContainerRef = ref(null)
+
     const { pageSettingState, getDefaultPage } = usePage()
     const ROOT_ID = pageSettingState.ROOT_ID
     const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
@@ -142,6 +163,14 @@ export default {
       )
     }
 
+    const scrollContent = async () => {
+      await nextTick()
+      const el = chatContainerRef.value as HTMLElement | null
+      if (el) {
+        el.scrollTop = el.scrollHeight
+      }
+    }
+
     const createNewPage = (schema) => {
       if (!(pageSettingState.isNew && pageSettingState.isAIPage)) {
         pageSettingState.isNew = true
@@ -188,8 +217,7 @@ export default {
 
     const getAiRespMessage = (role = 'assistant', content) => ({
       role,
-      content,
-      name: 'AI'
+      content
     })
 
     const requestLoading = ref(false)
@@ -198,6 +226,7 @@ export default {
       if (useMcpServer().isToolsEnabled) {
         try {
           requestLoading.value = true
+          await scrollContent()
           await sendMcpRequest(messages.value, {
             model: selectedModel.value.value,
             headers: {
@@ -209,6 +238,7 @@ export default {
         } finally {
           inProcesing.value = false
           requestLoading.value = false
+          await scrollContent()
         }
         return
       }
@@ -236,14 +266,6 @@ export default {
         })
     }
 
-    const scrollContent = async () => {
-      await sleep(100)
-      const scrollElement = document.getElementById('chatgpt-window')
-      if (scrollElement) {
-        scrollElement.scrollTop = scrollElement.scrollHeight
-      }
-    }
-
     const resetContent = async () => {
       activeMessages.value = messages.value
       await scrollContent()
@@ -257,8 +279,7 @@ export default {
 
     const getMessage = (content) => ({
       role: 'user',
-      content,
-      name: 'John'
+      content
     })
 
     const sendContent = async (content, isModel) => {
@@ -412,11 +433,38 @@ export default {
 
     // 对话角色配置
     const roles: Record<string, BubbleRoleConfig> = {
-      assistant: { placement: 'start', avatar: aiAvatar, maxWidth: '90%', contentRenderer: MarkdownRenderer },
+      assistant: {
+        placement: 'start',
+        avatar: aiAvatar,
+        maxWidth: '90%',
+        contentRenderer: MarkdownRenderer,
+        customContentField: 'renderContent'
+      },
       user: { placement: 'end', avatar: userAvatar, maxWidth: '90%', contentRenderer: MarkdownRenderer }
     }
 
+    watch([() => activeMessages.value.length, () => activeMessages.value.at(-1)?.renderContent?.length ?? 0], () => {
+      scrollContent()
+    })
+
+    const contentRenderers: Record<string, Component> = {
+      markdown: MarkdownRenderer,
+      loading: LoadingRenderer
+    }
+
+    const mcpDrawerPosition = computed(() => {
+      return {
+        type: 'fixed',
+        position: {
+          top: 'var(--base-top-panel-height)',
+          bottom: 0,
+          ...(fullscreen.value ? { left: 0 } : { right: 'var(--tr-container-width)' })
+        }
+      }
+    })
+
     return {
+      chatContainerRef,
       robotVisible,
       avatarUrl,
       chatWindowOpened,
@@ -439,8 +487,9 @@ export default {
       handlePromptItemClick,
       welcomeIcon,
       roles,
-      MarkdownRenderer,
-      requestLoading
+      contentRenderers,
+      requestLoading,
+      mcpDrawerPosition
     }
   }
 }
@@ -486,10 +535,38 @@ export default {
   }
 
   .tr-bubble-list {
+    font-size: 14px;
     flex: 1;
     .tr-bubble {
       word-break: break-word;
     }
+    ul,
+    ol {
+      padding-left: 10px;
+    }
+    ul > li {
+      list-style: disc;
+    }
+    ol > li {
+      list-style: decimal;
+    }
+    table {
+      border-collapse: collapse; // 合并边框
+      border: 1px solid #ccc;
+      width: 100%;
+      margin: 1rem 0;
+      th,
+      td {
+        border: 1px solid #ccc; /* 单元格边框 */
+        padding: 8px;
+      }
+      tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
+      tr:hover {
+        background-color: #e6f7ff;
+      }
+    }
   }
 
   .robot-welcome > div {
diff --git a/packages/plugins/robot/src/mcp/LoadingRenderer.vue b/packages/plugins/robot/src/mcp/LoadingRenderer.vue
new file mode 100644
index 0000000000..d32def5b80
--- /dev/null
+++ b/packages/plugins/robot/src/mcp/LoadingRenderer.vue
@@ -0,0 +1,3 @@
+<template>
+  <img src="../../assets/loading.webp" alt="loading" style="width: 24px; height: 24px" />
+</template>
diff --git a/packages/plugins/robot/src/mcp/MarkdownRenderer.vue b/packages/plugins/robot/src/mcp/MarkdownRenderer.vue
index 6fc7ba4ab6..90fbb860b5 100644
--- a/packages/plugins/robot/src/mcp/MarkdownRenderer.vue
+++ b/packages/plugins/robot/src/mcp/MarkdownRenderer.vue
@@ -1,57 +1,109 @@
 <template>
-  <div v-html="renderContent" class="robot-markdown-renderer"></div>
+  <div v-html="renderContent" class="markdown-renderer" :class="themeClass"></div>
 </template>
 
 <script setup lang="ts">
-import DOMPurify from 'dompurify'
-import MarkdownIt, { type Options as MarkdownItOptions } from 'markdown-it'
-import hljs from 'highlight.js'
 import { computed } from 'vue'
-import 'highlight.js/styles/github.min.css'
+import DOMPurify from 'dompurify'
+import MarkdownIt, { type Options } from 'markdown-it'
+import hljs from 'highlight.js/lib/core'
+import 'highlight.js/styles/github.css'
+
+// 按需加载语言
+import bash from 'highlight.js/lib/languages/bash'
+import javascript from 'highlight.js/lib/languages/javascript'
+import typescript from 'highlight.js/lib/languages/typescript'
+import json from 'highlight.js/lib/languages/json'
+import yaml from 'highlight.js/lib/languages/yaml'
+import xml from 'highlight.js/lib/languages/xml'
+import shell from 'highlight.js/lib/languages/shell'
+
+// 注册语言
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('shell', shell)
+
+const props = defineProps({
+  content: {
+    type: String,
+    required: true
+  },
+  theme: {
+    type: String as () => 'light' | 'dark',
+    default: 'light'
+  },
+  options: {
+    type: Object as () => Options,
+    default: () => ({})
+  }
+})
 
-const defaultMarkdownItOptions = {
+const themeClass = computed(() => `hljs-theme-${props.theme}`)
+
+const escapeHtml = (s: string) =>
+  s.replace(/[&<>"']/g, (ch) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[ch]!))
+
+const markdownIt = new MarkdownIt({
+  html: true,
   breaks: true,
   typographer: true,
-  highlight: function (str: string, lang: string) {
+  highlight: (str: string, lang: string) => {
     if (lang && hljs.getLanguage(lang)) {
       try {
-        return hljs.highlightAuto(str).value
-      } catch (__) {
+        const { value } = hljs.highlight(str, { language: lang, ignoreIllegals: true })
+        return `<pre class="hljs"><code class="language-${lang}">${value}</code></pre>`
+      } catch (e) {
         /* ignore */
       }
     }
-
-    return str
-  }
-}
-
-const props = defineProps<{
-  type?: 'markdown' | 'text'
-  content: string
-  options?: MarkdownItOptions
-}>()
-
-const markdownIt = computed(
-  () =>
-    new MarkdownIt({
-      ...defaultMarkdownItOptions,
-      ...props.options
-    })
-)
+    return `<pre class="hljs"><code>${escapeHtml(str)}</code></pre>`
+  },
+  ...props.options
+})
 
 const renderContent = computed(() => {
-  const htmlContent = markdownIt.value.render(props.content)
-  return DOMPurify.sanitize(htmlContent)
+  return DOMPurify.sanitize(markdownIt.render(props.content))
 })
 </script>
 
-<style lang="less" scoped>
-.robot-markdown-renderer {
+<style lang="less">
+.markdown-renderer {
   word-break: break-word;
-  & > *:first-child {
+
+  pre {
+    border-radius: 6px;
+    padding: 1em;
+    overflow: auto;
+    line-height: 1.45;
+    > code {
+      font-size: 12px;
+    }
+  }
+
+  // TODO: 适配TInyEngine主题，实现跟随主题自动切换
+  /* 亮色主题 */
+  &.hljs-theme-light {
+    pre {
+      background-color: #f6f8fa;
+    }
+  }
+
+  /* 暗色主题 */
+  &.hljs-theme-dark {
+    pre {
+      background-color: #0d1117;
+    }
+  }
+
+  > *:first-child {
     margin-top: 0 !important;
   }
-  & > *:last-child {
+
+  > *:last-child {
     margin-bottom: 0 !important;
   }
 }
diff --git a/packages/plugins/robot/src/mcp/McpServer.vue b/packages/plugins/robot/src/mcp/McpServer.vue
index 6820edcc30..0a7e1a3e6c 100644
--- a/packages/plugins/robot/src/mcp/McpServer.vue
+++ b/packages/plugins/robot/src/mcp/McpServer.vue
@@ -3,24 +3,22 @@
     <div class="button">
       <icon-plugin class="plugin-common_icon" />
       <span class="plugin-common_text">MCP</span>
-      <span class="plugin-active_count" v-if="activeCount">{{ activeCount }}</span>
     </div>
   </div>
-  <mcp-server-picker
-    :popup-config="drawerConfig"
-    v-model:visible="visible"
-    v-model:activeCount="activeCount"
-    :installed-plugins="installedPlugins"
-    :market-plugins="marketPlugins"
-    :market-category-options="[]"
-    :loading="loading"
-    :market-loading="marketLoading"
-    :show-market-tab="false"
-    @plugin-expand="handlePluginExpand"
-    @plugin-add="updateMcpServerStatus"
-    @plugin-toggle="handlePluginToggle"
-    @tool-toggle="updateMcpServerToolStatus"
-  />
+  <div class="robot-mcp-server-picker">
+    <mcp-server-picker
+      :popup-config="props.position"
+      v-model:visible="visible"
+      v-model:activeCount="activeCount"
+      :installed-plugins="installedPlugins"
+      :market-plugins="marketPlugins"
+      :show-market-tab="false"
+      @plugin-expand="handlePluginExpand"
+      @plugin-add="updateMcpServerStatus"
+      @plugin-toggle="handlePluginToggle"
+      @tool-toggle="updateMcpServerToolStatus"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,15 +27,21 @@ import { McpServerPicker, type PluginInfo, type PopupConfig } from '@opentiny/ti
 import { IconPlugin } from '@opentiny/tiny-robot-svgs'
 import useMcpServer from './useMcp'
 
-const loading = ref(false)
-const marketLoading = ref(false)
-
-const activeCount = ref(0)
-
-const drawerConfig: PopupConfig = {
-  type: 'fixed',
-  position: { top: 'var(--base-top-panel-height)', bottom: 0, right: 'var(--tr-container-width)' }
-}
+const activeCount = ref(1)
+
+const props = withDefaults(
+  defineProps<{
+    position: PopupConfig
+  }>(),
+  {
+    type: 'fixed',
+    position: {
+      top: 'var(--base-top-panel-height)',
+      bottom: 0,
+      right: 'var(--tr-container-width)'
+    }
+  }
+)
 
 const {
   inUseMcpServers: installedPlugins,
@@ -75,18 +79,17 @@ onMounted(() => {
 </script>
 
 <style lang="less" scoped>
+.robot-mcp-server-picker {
+  :deep(.mcp-server-picker.popup-type-fixed) {
+    border-radius: 0px;
+  }
+}
+
 :deep(.mcp-server-picker__header) {
   .mcp-server-picker__header-right-item {
     display: none !important;
   }
 }
-:deep(.mcp-server-picker__content-item) {
-  .plugin-card__operations {
-    .tiny-popconfirm {
-      display: none !important;
-    }
-  }
-}
 
 :deep(.mcp-server-picker__content) {
   .tiny-tabs.tiny-tabs .tiny-tabs__header .tiny-tabs__nav {
@@ -99,13 +102,23 @@ onMounted(() => {
   .tiny-tabs.tiny-tabs .tiny-tabs__header .tiny-tabs__nav {
     width: 160px;
   }
-}
-
-:deep(.tiny-tabs__content) {
-  .plugin-card__add-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .tiny-tabs__content {
+    .plugin-card__operations {
+      .tiny-popconfirm {
+        display: none;
+      }
+    }
+    .plugin-card__add-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .plugin-card__name {
+      text-align: left;
+    }
+    .plugin-card__desc {
+      font-size: 12px;
+    }
   }
 }
 
@@ -113,7 +126,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 80px;
+  width: 64px;
   height: 28px;
   border: 1px solid rgb(194, 194, 194);
   border-radius: 999px;
diff --git a/packages/plugins/robot/src/mcp/types.ts b/packages/plugins/robot/src/mcp/types.ts
index 6304732af3..3fad7339d0 100644
--- a/packages/plugins/robot/src/mcp/types.ts
+++ b/packages/plugins/robot/src/mcp/types.ts
@@ -11,6 +11,7 @@ export interface RequestTool {
   function: {
     name: string
     description: string
+    title?: string
     parameters: {
       type: 'object'
       required?: string[]
@@ -34,7 +35,8 @@ export interface LLMMessage {
 
 export interface RobotMessage {
   role: string
-  content: string | BubbleContentItem[]
+  content: string
+  renderContent?: Array<BubbleContentItem>
   [prop: string]: unknown
 }
 
@@ -66,6 +68,7 @@ export interface LLMResponse {
 
 export interface McpTool {
   name: string
+  title?: string
   description: string
   inputSchema?: {
     type: 'object'
diff --git a/packages/plugins/robot/src/mcp/useMcp.ts b/packages/plugins/robot/src/mcp/useMcp.ts
index 0a4ce0216f..26963e1cd9 100644
--- a/packages/plugins/robot/src/mcp/useMcp.ts
+++ b/packages/plugins/robot/src/mcp/useMcp.ts
@@ -5,69 +5,29 @@ import type { McpListToolsResponse, McpTool, RequestTool } from './types'
 
 const ENGINE_MCP_SERVER: PluginInfo = {
   id: 'tiny-engine-mcp-server',
-  name: 'Tiny Engine MCP 服务器',
+  name: 'Tiny Engine MCP 工具',
   icon: 'https://res.hc-cdn.com/lowcode-portal/1.1.80.20250515160330/assets/opentiny-tinyengine-logo-4f8a3801.svg',
-  description: '使用TinyEngine设计器能力，如添加国际化',
+  description: '使用TinyEngine设计器能力，如操作画布、编辑页面等',
   added: true
 }
 
-const MOCK_SERVERS: PluginInfo[] = [
-  {
-    id: 'plugin-1',
-    name: 'Jira 集成 (Mock)',
-    icon: 'https://ts3.tc.mm.bing.net/th/id/ODLS.2a97aa8b-50c6-4e00-af97-3b563dfa07f4',
-    description: 'Jira 任务管理',
-    enabled: true,
-    added: false,
-    tools: [
-      { id: 'tool-5', name: '创建任务', description: '创建 Jira 任务', enabled: true },
-      { id: 'tool-6', name: '查询任务', description: '查询 Jira 任务', enabled: true }
-    ]
-  },
-  {
-    id: 'plugin-2',
-    name: 'Notion 集成 (Mock)',
-    icon: 'https://www.notion.so/front-static/favicon.ico',
-    description: 'Notion 文档管理和协作',
-    enabled: false,
-    added: false,
-    tools: [
-      { id: 'tool-7', name: '创建页面', description: '创建 Notion 页面', enabled: false },
-      { id: 'tool-8', name: '查询数据库', description: '查询 Notion 数据库', enabled: false }
-    ]
-  },
-  {
-    id: 'plugin-3',
-    name: 'Telegram 机器人 (Mock)',
-    icon: 'https://telegram.org/favicon.ico',
-    description: 'Telegram 消息推送和自动化',
-    enabled: false,
-    added: false,
-    tools: [{ id: 'tool-9', name: '发送消息', description: '发送 Telegram 消息', enabled: false }]
-  }
-]
-
-const mcpServers = ref<PluginInfo[]>([ENGINE_MCP_SERVER, ...MOCK_SERVERS])
+const mcpServers = ref<PluginInfo[]>([ENGINE_MCP_SERVER])
 
-const inUseMcpServers = ref<PluginInfo[]>([
-  { ...ENGINE_MCP_SERVER, enabled: true, expanded: true, tools: [], toolCount: 0 }
-])
+const inUseMcpServers = ref<PluginInfo[]>([{ ...ENGINE_MCP_SERVER, enabled: true, expanded: true, tools: [] }])
 
 const updateServerTools = (serverId: string, tools: PluginTool[]) => {
   const mcpServer = inUseMcpServers.value.find((item) => item.id === serverId)
   if (mcpServer) {
     mcpServer.tools = tools
-    mcpServer.toolCount = tools.length
   }
 }
 
 const updateEngineTools = async () => {
-  const tools: Array<{ name: string; description: string; status: string; title: string }> =
+  const tools: Array<{ name: string; description: string; status: string; title?: string }> =
     (await getMetaApi(META_SERVICE.McpService)?.getToolList?.()) || []
   const engineTools = tools.map((tool) => ({
     id: tool.name,
-    name: tool.name,
-    title: tool.title,
+    name: tool.title ? `${tool.title} ${tool.name}` : tool.name,
     description: tool.description,
     enabled: tool.status === 'enabled'
   }))
@@ -124,8 +84,7 @@ const updateMcpServerStatus = async (server: PluginInfo, added: boolean) => {
       enabled: true,
       added: true,
       expanded: false,
-      tools: server.tools || [],
-      toolCount: server.tools?.length || 0
+      tools: server.tools || []
     }
     inUseMcpServers.value.push(newServer)
     if (server.id === ENGINE_MCP_SERVER.id) {
diff --git a/packages/plugins/robot/src/mcp/utils.ts b/packages/plugins/robot/src/mcp/utils.ts
index 8b785bca98..41fe24dcb9 100644
--- a/packages/plugins/robot/src/mcp/utils.ts
+++ b/packages/plugins/robot/src/mcp/utils.ts
@@ -6,6 +6,14 @@ import { META_SERVICE, getMetaApi } from '@opentiny/tiny-engine-meta-register'
 
 let requestOptions: RequestOptions = {}
 
+// 格式化LLM输入messages消息
+const formatMessages = (messages: LLMMessage[]) => {
+  return messages.map((message) => ({
+    role: message.role,
+    content: message.content
+  }))
+}
+
 const fetchLLM = async (messages: LLMMessage[], tools: RequestTool[], options: RequestOptions = requestOptions) => {
   const bodyObj: LLMRequestBody = {
     model: options?.model || 'deepseek-chat',
@@ -41,11 +49,11 @@ const handleToolCall = async (
     return
   }
   const currentMessage = messages.at(-1)!
-  if (typeof currentMessage.content === 'string' || !currentMessage.content) {
-    currentMessage.content = []
+  if (!currentMessage.renderContent) {
+    currentMessage.renderContent = []
   }
   if (res.choices[0].message.content) {
-    currentMessage.content.push({
+    currentMessage.renderContent.push({
       type: 'markdown',
       content: res.choices[0].message.content
     })
@@ -66,7 +74,7 @@ const handleToolCall = async (
         },
         formatPretty: true
       }
-      currentMessage.content.push(currentToolMessage)
+      currentMessage.renderContent.push(currentToolMessage)
       const toolCallResult = await useMcpServer().callTool(name, parsedArgs)
       toolMessages.push({
         type: 'text',
@@ -75,19 +83,21 @@ const handleToolCall = async (
         tool_call_id: tool.id
       })
 
-      currentMessage.content.at(-1)!.status = 'success'
-      currentMessage.content.at(-1)!.content = {
+      currentMessage.renderContent.at(-1)!.status = 'success'
+      currentMessage.renderContent.at(-1)!.content = {
         params: parsedArgs,
         result: toolCallResult.content
       }
     }
+    currentMessage.renderContent.push({ type: 'loading', content: '' })
     const newResp = await fetchLLM(toolMessages, tools)
+    currentMessage.renderContent.pop()
     const hasToolCall = newResp.choices[0].message.tool_calls?.length > 0
     if (hasToolCall) {
       await handleToolCall(newResp, tools, messages, toolMessages)
     } else {
       if (newResp.choices[0].message.content) {
-        currentMessage.content.push({
+        currentMessage.renderContent.push({
           type: 'markdown',
           content: newResp.choices[0].message.content
         })
@@ -102,10 +112,13 @@ export const sendMcpRequest = async (messages: LLMMessage[], options: RequestOpt
   }
   const tools = await useMcpServer().getLLMTools()
   requestOptions = options
-  const res = await fetchLLM(messages.slice(0, -1), tools, options)
+  messages.at(-1)!.renderContent = [{ type: 'loading', content: '' }]
+  const res = await fetchLLM(formatMessages(messages.slice(0, -1)), tools, options)
+  delete messages.at(-1)!.renderContent
   const hasToolCall = res.choices[0].message.tool_calls?.length > 0
   if (hasToolCall) {
     await handleToolCall(res, tools, messages)
+    messages.at(-1)!.content = messages.at(-1)!.renderContent.at(-1)!.content
   } else {
     messages.at(-1)!.content = res.choices[0].message.content
   }