diff --git a/apps/mcp-playground/app.py b/apps/mcp-playground/app.py
new file mode 100644
index 00000000..33a06518
--- /dev/null
+++ b/apps/mcp-playground/app.py
@@ -0,0 +1,557 @@
+import gradio as gr
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.pro as pro
+import modelscope_studio.components.antdx as antdx
+from modelscope_studio.components.pro.multimodal_input import MultimodalInputUploadConfig
+import json
+from langchain.chat_models import init_chat_model
+from exceptiongroup import ExceptionGroup
+from ui_components.config_form import ConfigForm
+from ui_components.mcp_servers_button import McpServersButton
+from app_mcp_client import generate_with_mcp, get_mcp_prompts, parse_mcp_config
+from config import bot_config, default_mcp_config, default_mcp_prompts, default_mcp_servers, user_config, welcome_config, default_theme, default_locale, bot_avatars, primary_color, mcp_prompt_model
+from env import api_key, internal_mcp_config
+# from tools.oss import file_path_to_oss_url
+
+from modelscope_agent.agent import Agent
+
+
+def merge_mcp_config(mcp_config1, mcp_config2):
+    return {
+        "mcpServers": {
+            **mcp_config1.get("mcpServers", {}),
+            **mcp_config2.get("mcpServers", {})
+        }
+    }
+
+
+def format_messages(messages, oss_cache):
+    formatted_messages = []
+    for message in messages:
+        if message["role"] == "user":
+            contents = ''
+            for content in message["content"]:
+                if content["type"] == "text":
+                    contents += content["content"]
+                # elif content["type"] == "file":
+                #     files = []
+                #     for file_path in content["content"]:
+                #         file_url = oss_cache.get(
+                #             file_path, file_path_to_oss_url(file_path))
+                #         oss_cache[file_path] = file_url
+                #         files.append(file_url)
+                #     contents += f"\n\nAttachment links: [{','.join(files)}]\n\n"
+
+            formatted_messages.append({"role": "user", "content": contents})
+
+        elif message["role"] == "assistant":
+            formatted_messages.append({
+                "role":
+                "assistant",
+                "content":
+                "\n".join([
+                    content["content"] for content in message["content"]
+                    if content["type"] == "text"
+                ])
+            })
+
+    return formatted_messages
+
+
+def submit(input_value, config_form_value, mcp_config_value,
+                 mcp_servers_btn_value, chatbot_value, oss_state_value, history_config):
+    model = config_form_value.get("model", "")
+    sys_prompt = config_form_value.get("sys_prompt", "")
+    history_config = json.loads(history_config)
+
+    enabled_mcp_servers = [
+        item["name"] for item in mcp_servers_btn_value["data_source"]
+        if item.get("enabled") and not item.get("disabled")
+    ]
+    if input_value:
+        chatbot_value.append({
+            "role":
+            "user",
+            "content": [{
+                "type": "text",
+                "content": input_value["text"]
+            }] + ([{
+                "type": "file",
+                "content": [file for file in input_value["files"]]
+            }] if len(input_value["files"]) > 0 else []),
+            "class_names":
+            dict(content="user-message-content")
+        })
+
+    chatbot_value.append({
+        "role": "assistant",
+        "loading": True,
+        "content": [],
+        "header": model.split("/")[1],
+        "avatar": bot_avatars.get(model, None),
+        "status": "pending"
+    })
+    yield gr.update(
+        loading=True, value=None), gr.update(disabled=True), gr.update(
+            value=chatbot_value,
+            bot_config=bot_config(
+                disabled_actions=['edit', 'retry', 'delete']),
+            user_config=user_config(disabled_actions=['edit', 'delete']))
+    try:
+        prev_chunk_type = None
+        tool_name = ""
+        tool_args = ""
+        tool_content = ""
+        
+        get_llm={
+                    "model": model,
+                    "model_server": "openai",
+                    "api_key": api_key,
+                    "api_base": "https://api-inference.modelscope.cn/v1/",
+                    }
+        mcp_servers = {}
+        mcp_config = merge_mcp_config(json.loads(mcp_config_value),internal_mcp_config)
+        mcp_servers["mcpServers"] = parse_mcp_config(mcp_config, enabled_mcp_servers)
+        
+        agent_executor = Agent(
+            mcp=mcp_servers,
+            llm=get_llm, instruction=sys_prompt)
+        agent_messages = format_messages(chatbot_value[:-1],oss_state_value["oss_cache"])
+        response = agent_executor.run(agent_messages[-1]["content"], history=history_config["history"])
+        text = ""
+        for chunk in response:
+            text += chunk
+            chatbot_value[-1]["loading"] = False
+            current_content = chatbot_value[-1]["content"]
+            if prev_chunk_type != "text":
+                current_content.append({})
+            prev_chunk_type = "text"
+            current_content[-1]['type'] = "text"
+            current_content[-1]['content'] = text
+            yield gr.skip(), gr.skip(), gr.update(value=chatbot_value)
+        # chatbot_value = generate_with_mcp(
+        #     format_messages(
+        #         chatbot_value[:-1],
+        #         oss_state_value["oss_cache"]),
+        #     mcp_config=merge_mcp_config(json.loads(mcp_config_value),
+        #         internal_mcp_config),
+        #     enabled_mcp_servers=enabled_mcp_servers,
+        #     sys_prompt=sys_prompt,
+        #     get_llm={
+        #             "model": model,
+        #             "model_server": "openai",
+        #             "api_key": api_key,
+        #             "api_base": "https://api-inference.modelscope.cn/v1/",
+        #             },
+        #     chatbot = chatbot_value
+        # )
+
+        # async for chunk in generate_with_mcp(
+        #         format_messages(chatbot_value[:-1],
+        #                         oss_state_value["oss_cache"]),
+        #         mcp_config=merge_mcp_config(json.loads(mcp_config_value),
+        #                                     internal_mcp_config),
+        #         enabled_mcp_servers=enabled_mcp_servers,
+        #         sys_prompt=sys_prompt,
+        #         get_llm={
+        #             "model": model,
+        #             "model_server": "openai",
+        #             "api_key": api_key,
+        #             "api_base": "https://api-inference.modelscope.cn/v1/",
+        #             }):
+        #     chatbot_value[-1]["loading"] = False
+        #     current_content = chatbot_value[-1]["content"]
+
+        #     if prev_chunk_type != chunk["type"] and not (
+        #             prev_chunk_type == "tool_call_chunks"
+        #             and chunk["type"] == "tool"):
+        #         current_content.append({})
+        #     prev_chunk_type = chunk["type"]
+        #     if chunk["type"] == "content":
+        #         current_content[-1]['type'] = "text"
+        #         if not isinstance(current_content[-1].get("content"), str):
+        #             current_content[-1]['content'] = ''
+        #         current_content[-1]['content'] += chunk['content']
+        #     elif chunk["type"] == "tool":
+        #         if not isinstance(current_content[-1].get("content"), str):
+        #             current_content[-1]['content'] = ''
+        #         chunk_content = chunk["content"]
+        #         current_content[-1]["content"] = current_content[-1][
+        #             "content"] + f'\n\n**🎯 结果**\n```\n{chunk_content}\n```'
+        #         tool_name = ""
+        #         tool_args = ""
+        #         tool_content = ""
+        #         current_content[-1]['options']["status"] = "done"
+        #     elif chunk["type"] == "tool_call_chunks":
+        #         current_content[-1]['type'] = "tool"
+        #         current_content[-1]['editable'] = False
+        #         current_content[-1]['copyable'] = False
+        #         if not isinstance(current_content[-1].get("options"), dict):
+        #             current_content[-1]['options'] = {
+        #                 "title": "",
+        #                 "status": "pending"
+        #             }
+        #         if chunk["next_tool"]:
+        #             tool_name += ' '
+        #             tool_content = tool_content + f"**📝 参数**\n```json\n{tool_args}\n```\n\n"
+        #             tool_args = ""
+        #         if chunk["name"]:
+        #             tool_name += chunk["name"]
+        #             current_content[-1]['options'][
+        #                 "title"] = f"**🔧 调用 MCP 工具** `{tool_name}`"
+        #         if chunk["content"]:
+        #             tool_args += chunk["content"]
+        #             current_content[-1][
+        #                 'content'] = tool_content + f"**📝 参数**\n```json\n{tool_args}\n```"
+        print("ok")
+        # yield gr.skip(), gr.skip(), gr.update(value=chatbot_value)
+    except ExceptionGroup as eg:
+        e = eg.exceptions[0]
+        chatbot_value[-1]["loading"] = False
+        chatbot_value[-1]["content"] += [{
+            "type":
+            "text",
+            "content":
+            f'<span style="color: var(--color-red-500)">{str(e)}</span>'
+        }]
+        print('Error: ', e)
+        raise gr.Error(str(e))
+    except Exception as e:
+        chatbot_value[-1]["loading"] = False
+        chatbot_value[-1]["content"] += [{
+            "type":
+            "text",
+            "content":
+            f'<span style="color: var(--color-red-500)">{str(e)}</span>'
+        }]
+        print('Error: ', e)
+        raise gr.Error(str(e))
+    finally:
+        chatbot_value[-1]["status"] = "done"
+        yield gr.update(loading=False), gr.update(disabled=False), gr.update(
+            value=chatbot_value,
+            bot_config=bot_config(),
+            user_config=user_config())
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["status"] = "done"
+    chatbot_value[-1]["footer"] = "对话已暂停"
+    yield gr.update(loading=False), gr.update(disabled=False), gr.update(
+        value=chatbot_value,
+        bot_config=bot_config(),
+        user_config=user_config())
+
+
+async def retry(config_form_value, mcp_config_value, mcp_servers_btn_value,
+                chatbot_value, oss_state_value, e: gr.EventData):
+    index = e._data["payload"][0]["index"]
+    chatbot_value = chatbot_value[:index]
+
+    async for chunk in submit(None, config_form_value, mcp_config_value,
+                              mcp_servers_btn_value, chatbot_value,
+                              oss_state_value):
+        yield chunk
+
+
+def clear():
+    return gr.update(value=None)
+
+
+def select_welcome_prompt(input_value, e: gr.EventData):
+    input_value["text"] = e._data["payload"][0]["value"]["description"]
+    return gr.update(value=input_value)
+
+
+def select_model(e: gr.EventData):
+    return gr.update(visible=e._data["payload"][1].get("thought", False))
+
+
+async def reset_mcp_config(mcp_servers_btn_value):
+    mcp_servers_btn_value["data_source"] = default_mcp_servers
+    return gr.update(value=default_mcp_config), gr.update(
+        value=mcp_servers_btn_value), gr.update(
+            welcome_config=welcome_config(default_mcp_prompts)), gr.update(
+                value={
+                    "mcp_config": default_mcp_config,
+                    "mcp_prompts": default_mcp_prompts,
+                    "mcp_servers": default_mcp_servers
+                })
+
+
+def has_mcp_config_changed(old_config: dict, new_config: dict) -> bool:
+    old_servers = old_config.get("mcpServers", {})
+    new_servers = new_config.get("mcpServers", {})
+
+    if set(old_servers.keys()) != set(new_servers.keys()):
+        return True
+
+    for server_name in old_servers:
+        old_server = old_servers[server_name]
+        new_server = new_servers.get(server_name)
+        if new_server is None:
+            return True
+
+        if old_server.get("type") == "sse" and new_server.get("type") == "sse":
+            if old_server.get("url") != new_server.get("url"):
+                return True
+        else:
+            return True
+    return False
+
+
+def save_mcp_config_wrapper(initial: bool):
+
+    async def save_mcp_config(mcp_config_value, mcp_servers_btn_value,
+                              browser_state_value):
+        mcp_config = json.loads(mcp_config_value)
+        prev_mcp_config = json.loads(browser_state_value["mcp_config"])
+        browser_state_value["mcp_config"] = mcp_config_value
+        if has_mcp_config_changed(prev_mcp_config, mcp_config):
+            mcp_servers_btn_value["data_source"] = [{
+                "name": mcp_name,
+                "enabled": True
+            } for mcp_name in mcp_config.get("mcpServers", {}).keys()
+                                                    ] + default_mcp_servers
+            browser_state_value["mcp_servers"] = mcp_servers_btn_value[
+                "data_source"]
+            yield gr.update(
+                welcome_config=welcome_config({}, loading=True)), gr.update(
+                    value=mcp_servers_btn_value), gr.skip()
+            if not initial:
+                gr.Success("保存成功")
+            prompts = await get_mcp_prompts(
+                mcp_config=merge_mcp_config(mcp_config, internal_mcp_config),
+                get_llm=lambda: init_chat_model(
+                    model=mcp_prompt_model,
+                    model_provider="openai",
+                    api_key=api_key,
+                    base_url="https://api-inference.modelscope.cn/v1/"))
+
+            browser_state_value["mcp_prompts"] = prompts
+            yield gr.update(
+                welcome_config=welcome_config(prompts)), gr.skip(), gr.update(
+                    value=browser_state_value)
+        else:
+            yield gr.skip(), gr.skip(), gr.update(value=browser_state_value)
+            if not initial:
+                gr.Success("保存成功")
+
+    return save_mcp_config
+
+
+def save_mcp_servers(mcp_servers_btn_value, browser_state_value):
+    browser_state_value["mcp_servers"] = mcp_servers_btn_value["data_source"]
+    return gr.update(value=browser_state_value)
+
+
+def load(mcp_servers_btn_value, browser_state_value, url_mcp_config_value):
+    if browser_state_value:
+        mcp_servers_btn_value["data_source"] = browser_state_value[
+            "mcp_servers"]
+        try:
+            url_mcp_config = json.loads(url_mcp_config_value)
+        except:
+            url_mcp_config = {}
+        return gr.update(value=json.dumps(
+            merge_mcp_config(json.loads(browser_state_value["mcp_config"]),
+                             url_mcp_config),
+            indent=4)), gr.update(welcome_config=welcome_config(
+                browser_state_value["mcp_prompts"])), gr.update(
+                    value=mcp_servers_btn_value)
+    elif url_mcp_config_value:
+        try:
+            url_mcp_config = json.loads(url_mcp_config_value)
+        except:
+            url_mcp_config = {}
+        return gr.update(value=json.dumps(merge_mcp_config(url_mcp_config, {}),
+                                          indent=4)), gr.skip(), gr.skip()
+    return gr.skip()
+
+# def init_user(uuid_str, state, _user_token=None):
+#     try:
+#         allow_tool_hub = False
+
+# def init_all(uuid_str, _state, _user_token):
+#     init_user(uuid_str, _state, _user_token)
+#     in_ms_studio = os.getenv('MODELSCOPE_ENVIRONMENT',
+#                                  'None') == 'studio' and allow_tool_hub
+
+
+
+def lighten_color(hex_color, factor=0.2):
+    hex_color = hex_color.lstrip("#")
+
+    # 解析RGB值
+    r = int(hex_color[0:2], 16)
+    g = int(hex_color[2:4], 16)
+    b = int(hex_color[4:6], 16)
+
+    # 向白色方向调整
+    r = min(255, r + int((255 - r) * factor))
+    g = min(255, g + int((255 - g) * factor))
+    b = min(255, b + int((255 - b) * factor))
+
+    # 转回十六进制
+    return f"{r:02x}{g:02x}{b:02x}"
+
+
+lighten_primary_color = lighten_color(primary_color, 0.4)
+
+css = f"""
+.ms-gr-auto-loading-default-antd {{
+    z-index: 1001 !important;
+}}
+
+.user-message-content {{
+    background-color: #{lighten_primary_color};
+}}
+"""
+
+with gr.Blocks(css=css) as demo:
+    browser_state = gr.BrowserState(
+        {
+            "mcp_config": default_mcp_config,
+            "mcp_prompts": default_mcp_prompts,
+            "mcp_servers": default_mcp_servers
+        },
+        storage_key="mcp_config")
+    oss_state = gr.State({"oss_cache": {}})
+
+    with ms.Application(), antdx.XProvider(
+            locale=default_locale, theme=default_theme), ms.AutoLoading():
+
+        with antd.Badge.Ribbon(placement="start"):
+            with ms.Slot("text"):
+                with antd.Typography.Link(elem_style=dict(color="#fff"),
+                                          type="link",
+                                          href="https://modelscope.cn/mcp",
+                                          href_target="_blank"):
+                    with antd.Flex(align="center",
+                                   gap=2,
+                                   elem_style=dict(padding=2)):
+                        antd.Icon("ExportOutlined",
+                                  elem_style=dict(marginRight=4))
+                        ms.Text("前往")
+                        antd.Image("./assets/modelscope-mcp.png",
+                                   preview=False,
+                                   width=20,
+                                   height=20)
+                        ms.Text("MCP 广场")
+            with antd.Flex(justify="center", gap="small", align="center"):
+                antd.Image("./assets/logo.png",
+                           preview=False,
+                           elem_style=dict(backgroundColor="#fff"),
+                           width=50,
+                           height=50)
+                antd.Typography.Title("MCP Playground",
+                                      level=1,
+                                      elem_style=dict(fontSize=28, margin=0))
+
+        with antd.Tabs():
+            with antd.Tabs.Item(label="实验场"):
+                with antd.Flex(
+                        vertical=True,
+                        gap="middle",
+                        elem_style=dict(
+                            height=
+                            'calc(100vh - 46px - 16px - 50px - 16px - 16px - 21px - 16px)',
+                            maxHeight=1500)):
+                    with antd.Card(
+                            elem_style=dict(flex=1,
+                                            height=0,
+                                            display="flex",
+                                            flexDirection="column"),
+                            styles=dict(body=dict(flex=1,
+                                                  height=0,
+                                                  display='flex',
+                                                  flexDirection='column'))):
+                        chatbot = pro.Chatbot(
+                            height=0,
+                            bot_config=bot_config(),
+                            user_config=user_config(),
+                            welcome_config=welcome_config(default_mcp_prompts),
+                            elem_style=dict(flex=1))
+                    with pro.MultimodalInput(
+                            upload_config=MultimodalInputUploadConfig(
+                                placeholder={
+                                    "inline": {
+                                        "title": "上传文件",
+                                        "description": "拖拽文件到此处或点击录音按钮开始录音"
+                                    },
+                                    "drop": {
+                                        "title": "将文件拖放到此处",
+                                    }
+                                },
+                                title=
+                                "上传附件（只对部分支持远程文件 URL 的 MCP Server 生效，文件个数上限: 10）",
+                                multiple=True,
+                                allow_paste_file=True,
+                                allow_speech=True,
+                                max_count=10)) as input:
+                        with ms.Slot("prefix"):
+                            with antd.Button(value=None,
+                                             variant="text",
+                                             color="default") as clear_btn:
+                                with ms.Slot("icon"):
+                                    antd.Icon("ClearOutlined")
+                            mcp_servers_btn = McpServersButton(
+                                data_source=default_mcp_servers)
+
+            with antd.Tabs.Item(label="配置"):
+                with antd.Flex(vertical=True, gap="small"):
+                    with antd.Card():
+                        config_form, mcp_config_confirm_btn, reset_mcp_config_btn, mcp_config, history_config = ConfigForm(
+                        )
+
+    url_mcp_config = gr.Textbox(visible=False)
+    load_event = demo.load(
+        fn=load,
+        js=
+        "(mcp_servers_btn_value, browser_state_value) => [mcp_servers_btn_value, browser_state_value, decodeURIComponent(new URLSearchParams(window.location.search).get('studio_additional_params') || '') || null]",
+        inputs=[mcp_servers_btn, browser_state, url_mcp_config],
+        outputs=[mcp_config, chatbot, mcp_servers_btn])
+    
+    chatbot.welcome_prompt_select(fn=select_welcome_prompt,
+                                  inputs=[input],
+                                  outputs=[input],
+                                  queue=False)
+    retry_event = chatbot.retry(
+        fn=retry,
+        inputs=[config_form, mcp_config, mcp_servers_btn, chatbot, oss_state],
+        outputs=[input, clear_btn, chatbot])
+    clear_btn.click(fn=clear, outputs=[chatbot], queue=False)
+    mcp_servers_btn.change(fn=save_mcp_servers,
+                           inputs=[mcp_servers_btn, browser_state],
+                           outputs=[browser_state])
+
+    load_success_save_mcp_config_event = load_event.success(
+        fn=save_mcp_config_wrapper(initial=True),
+        inputs=[mcp_config, mcp_servers_btn, browser_state],
+        outputs=[chatbot, mcp_servers_btn, browser_state])
+    save_mcp_config_event = mcp_config_confirm_btn.click(
+        fn=save_mcp_config_wrapper(initial=False),
+        inputs=[mcp_config, mcp_servers_btn, browser_state],
+        cancels=[load_success_save_mcp_config_event],
+        outputs=[chatbot, mcp_servers_btn, browser_state])
+    reset_mcp_config_btn.click(
+        fn=reset_mcp_config,
+        inputs=[mcp_servers_btn],
+        outputs=[mcp_config, mcp_servers_btn, chatbot, browser_state],
+        cancels=[save_mcp_config_event, load_success_save_mcp_config_event])
+    submit_event = input.submit(fn=submit,
+                                inputs=[
+                                    input, config_form, mcp_config,
+                                    mcp_servers_btn, chatbot, oss_state, history_config
+                                ],
+                                outputs=[input, clear_btn, chatbot])
+    input.cancel(fn=cancel,
+                 inputs=[chatbot],
+                 outputs=[input, clear_btn, chatbot],
+                 cancels=[submit_event, retry_event],
+                 queue=False)
+
+demo.queue(default_concurrency_limit=100, max_size=100).launch(ssr_mode=False,
+                                                               max_threads=100)
diff --git a/apps/mcp-playground/app_mcp_client.py b/apps/mcp-playground/app_mcp_client.py
new file mode 100644
index 00000000..24272132
--- /dev/null
+++ b/apps/mcp-playground/app_mcp_client.py
@@ -0,0 +1,239 @@
+from typing import List, Callable
+from langchain_core.messages import HumanMessage, AIMessage, ToolMessage
+from langchain_core.prompts import ChatPromptTemplate, MessagesPlaceholder
+from langchain_core.language_models import BaseChatModel
+# from langgraph.prebuilt import create_react_agent
+from langchain_mcp_adapters.client import MultiServerMCPClient
+import json
+import os
+import re
+from contextlib import asynccontextmanager
+
+from modelscope_agent.agent import Agent
+
+
+def parse_mcp_config(mcp_config: dict, enabled_mcp_servers: list = None):
+    mcp_servers = {}
+    for server_name, server in mcp_config.get("mcpServers", {}).items():
+        if server["type"] == "stdio" or (enabled_mcp_servers is not None
+                                         and server_name
+                                         not in enabled_mcp_servers):
+            continue
+        new_server = {**server}
+        new_server["transport"] = server["type"]
+        del new_server["type"]
+        if server.get("env"):
+            env = {'PYTHONUNBUFFERED': '1', 'PATH': os.environ.get('PATH', '')}
+            env.update(server["env"])
+            new_server["env"] = env
+        mcp_servers[server_name] = new_server
+    return mcp_servers
+
+
+@asynccontextmanager
+async def get_mcp_client(mcp_servers: dict):
+    async with MultiServerMCPClient(mcp_servers) as client:
+        yield client
+
+
+async def get_mcp_prompts(mcp_config: dict, get_llm: Callable):
+    try:
+        mcp_servers = parse_mcp_config(mcp_config)
+        if len(mcp_servers.keys()) == 0:
+            return {}
+        llm: BaseChatModel = get_llm()
+        async with get_mcp_client(mcp_servers) as client:
+            mcp_tool_descriptions = {}
+            for mcp_name, server_tools in client.server_name_to_tools.items():
+                mcp_tool_descriptions[mcp_name] = {}
+                for tool in server_tools:
+                    mcp_tool_descriptions[mcp_name][
+                        tool.name] = tool.description
+            prompt = f"""Based on the following MCP service tool descriptions, generate 2-4 example user queries for each service:
+
+Input structure explanation:
+- mcp_tool_descriptions is a nested dictionary
+- The first level keys are MCP service names (e.g., "service1", "service2")
+- The second level contains descriptions of tools available within each service
+
+MCP Service Tool Descriptions: {json.dumps(mcp_tool_descriptions)}
+
+Please provide 2-4 natural and specific example queries in Chinese that effectively demonstrate the capabilities of each service.
+
+The response must be in strict JSON format as shown below, with MCP service names as keys:
+```json
+{{
+    "mcp_name1": ["中文示例1", "中文示例2"],
+    "mcp_name2": ["中文示例1", "中文示例2"]
+}}
+```
+
+Ensure:
+1. Each example is specific to the functionality of that particular MCP service
+2. Example queries are in natural Chinese expressions
+3. Strictly use the top-level MCP service names as JSON keys
+4. The returned format must be valid JSON
+5. Each service MUST have exactly 2-4 example queries - not fewer than 2 and not more than 4
+
+Return only the JSON object without any additional explanation or text."""
+            response = await llm.ainvoke(prompt)
+            if hasattr(response, 'content'):
+                content = response.content
+            else:
+                content = str(response)
+            json_match = re.search(r'\{.*\}', content, re.DOTALL)
+            if json_match:
+                json_content = json_match.group(0)
+            else:
+                json_content = content
+            raw_examples = json.loads(json_content)
+
+            for mcp_name in mcp_tool_descriptions.keys():
+                if mcp_name not in raw_examples:
+                    raw_examples[mcp_name] = [
+                        f"请使用 {mcp_name} 服务的功能帮我查询信息或解决问题",
+                    ]
+            return raw_examples
+    except Exception as e:
+        print('Prompt Error:', e)
+        return {
+            mcp_name: [
+                f"请使用 {mcp_name} 服务的功能帮我查询信息或解决问题",
+            ]
+            for mcp_name in mcp_servers.keys()
+        }
+
+
+def convert_mcp_name(tool_name: str, mcp_names: dict):
+    if not tool_name:
+        return tool_name
+    separators = tool_name.split("__TOOL__")
+    if len(separators) >= 2:
+        mcp_name_idx, mcp_tool_name = separators[:2]
+    else:
+        mcp_name_idx = separators[0]
+        mcp_tool_name = None
+    mcp_name = mcp_names.get(mcp_name_idx)
+    if not mcp_tool_name:
+        return mcp_name or mcp_name_idx
+
+    if not mcp_name:
+        return mcp_tool_name
+    return f"[{mcp_name}] {mcp_tool_name}"
+
+
+def generate_with_mcp(messages: List[dict], mcp_config: dict,
+                            enabled_mcp_servers: list, sys_prompt: str,
+                            get_llm: dict, chatbot):
+    mcp_servers = {}
+    mcp_servers["mcpServers"] = parse_mcp_config(mcp_config, enabled_mcp_servers)
+    agent_executor = Agent(
+        mcp=mcp_servers, llm=get_llm, instruction=sys_prompt)
+    response = agent_executor.run("你好")
+    for chunk in response:
+        response += chunk
+        chatbot[-1]["content"] = response
+        yield chatbot
+
+
+#     async with get_mcp_client(mcp_servers) as client:
+#         tools = []
+#         mcp_tools = []
+#         mcp_names = {}
+#         for i, server_name_to_tool in enumerate(
+#                 client.server_name_to_tools.items()):
+#             mcp_name, server_tools = server_name_to_tool
+#             mcp_names[str(i)] = mcp_name
+#             for tool in server_tools:
+#                 new_tool = tool.model_copy()
+#                 # tool match ^[a-zA-Z0-9_-]+$
+#                 new_tool.name = f"{i}__TOOL__{tool.name}"
+#                 mcp_tools.append(new_tool)
+#         tools.extend(mcp_tools)
+#         llm: BaseChatModel = get_llm()
+#         tool_result_instruction = """When a tool returns responses containing URLs or links, please format them appropriately based on their CORRECT content type:
+
+# For example:
+# - Videos should use <video> tags
+# - Audio should use <audio> tags
+# - Images should use ![description](URL) or <img> tags
+# - Documents and web links should use [description](URL) format
+
+# Choose the appropriate display format based on the URL extension or content type information. This will provide the best user experience.
+
+# Remember that properly formatted media will enhance the user experience, especially when content is directly relevant to answering the query.
+# """
+#         attachment_instruction = """
+# The following instructions apply when user messages contain "Attachment links: [...]":
+
+# These links are user-uploaded attachments that contain important information for this conversation. These are temporary, secure links to files the user has specifically provided for analysis.
+
+# IMPORTANT INSTRUCTIONS:
+# 1. These attachments should be your PRIMARY source of information when addressing the user's query.
+# 2. Prioritize analyzing and referencing these documents BEFORE using any other knowledge.
+# 3. If the content in these attachments is relevant to the user's request, base your response primarily on this information.
+# 4. When you reference information from these attachments, clearly indicate which document it comes from.
+# 5. If the attachments don't contain information needed to fully address the query, only then supplement with your general knowledge.
+# 6. These links are temporary and secure, specifically provided for this conversation.
+# 7. IMPORTANT: Do not use the presence of "Attachment links: [...]" as an indicator of the user's preferred language. This is an automatically added system text. Instead, determine the user's language from their actual query text.
+
+# Begin your analysis by examining these attachments first, and structure your thinking to prioritize insights from these documents.
+# """
+#         prompt = ChatPromptTemplate.from_messages([
+#             ("system", tool_result_instruction),
+#             ("system", sys_prompt),
+#             ("system", attachment_instruction),
+#             MessagesPlaceholder(variable_name="messages"),
+#         ])
+
+#         langchain_messages = []
+#         for msg in messages:
+#             if msg["role"] == "user":
+#                 langchain_messages.append(HumanMessage(content=msg["content"]))
+#             elif msg["role"] == "assistant":
+#                 langchain_messages.append(AIMessage(content=msg["content"]))
+
+#         agent_executor = create_react_agent(llm, tools, prompt=prompt)
+#         use_tool = False
+#         async for step in agent_executor.astream(
+#             {"messages": langchain_messages},
+#                 config={"recursion_limit": 50},
+#                 stream_mode=["values", "messages"],
+#         ):
+#             if isinstance(step, tuple):
+#                 if step[0] == "messages":
+#                     message_chunk = step[1][0]
+#                     if hasattr(message_chunk, "content"):
+#                         if isinstance(message_chunk, ToolMessage):
+#                             use_tool = False
+#                             yield {
+#                                 "type":
+#                                 "tool",
+#                                 "name":
+#                                 convert_mcp_name(message_chunk.name,
+#                                                  mcp_names),
+#                                 "content":
+#                                 message_chunk.content
+#                             }
+#                         elif hasattr(message_chunk,
+#                                      'tool_call_chunks') and len(
+#                                          message_chunk.tool_call_chunks) > 0:
+#                             for tool_call_chunk in message_chunk.tool_call_chunks:
+#                                 yield {
+#                                     "type":
+#                                     "tool_call_chunks",
+#                                     "name":
+#                                     convert_mcp_name(tool_call_chunk["name"],
+#                                                      mcp_names),
+#                                     "content":
+#                                     tool_call_chunk["args"],
+#                                     "next_tool":
+#                                     bool(use_tool and tool_call_chunk["name"])
+#                                 }
+#                                 if tool_call_chunk["name"]:
+#                                     use_tool = True
+#                         elif message_chunk.content:
+#                             yield {
+#                                 "type": "content",
+#                                 "content": message_chunk.content
+#                             }
diff --git a/apps/mcp-playground/assets/deepseek.png b/apps/mcp-playground/assets/deepseek.png
new file mode 100644
index 00000000..1ba8cb8b
Binary files /dev/null and b/apps/mcp-playground/assets/deepseek.png differ
diff --git a/apps/mcp-playground/assets/logo.png b/apps/mcp-playground/assets/logo.png
new file mode 100644
index 00000000..f3fc5abc
Binary files /dev/null and b/apps/mcp-playground/assets/logo.png differ
diff --git a/apps/mcp-playground/assets/mcp.png b/apps/mcp-playground/assets/mcp.png
new file mode 100644
index 00000000..eefe8cda
Binary files /dev/null and b/apps/mcp-playground/assets/mcp.png differ
diff --git a/apps/mcp-playground/assets/meta.webp b/apps/mcp-playground/assets/meta.webp
new file mode 100644
index 00000000..c0892481
Binary files /dev/null and b/apps/mcp-playground/assets/meta.webp differ
diff --git a/apps/mcp-playground/assets/modelscope-mcp.png b/apps/mcp-playground/assets/modelscope-mcp.png
new file mode 100644
index 00000000..185ef96a
Binary files /dev/null and b/apps/mcp-playground/assets/modelscope-mcp.png differ
diff --git a/apps/mcp-playground/assets/qwen.png b/apps/mcp-playground/assets/qwen.png
new file mode 100644
index 00000000..d207a289
Binary files /dev/null and b/apps/mcp-playground/assets/qwen.png differ
diff --git a/apps/mcp-playground/config.py b/apps/mcp-playground/config.py
new file mode 100644
index 00000000..12da856d
--- /dev/null
+++ b/apps/mcp-playground/config.py
@@ -0,0 +1,124 @@
+import json
+import os
+from modelscope_studio.components.pro.chatbot import ChatbotWelcomeConfig, ChatbotUserConfig, ChatbotBotConfig, ChatbotActionConfig
+
+max_mcp_server_count = 10
+
+default_mcp_config = json.dumps({"mcpServers": {
+    "time": {
+      "type": "sse",
+      "url": "https://mcp.api-inference.modelscope.cn/sse/35bd8831457242"
+    }
+}},
+                                indent=4,
+                                ensure_ascii=False)
+
+default_history_config = json.dumps({"history": 
+    [
+        {'role': 'user', 'content': '介绍一下成龙和李连杰', 'sent_from': '', 'send_to': 'all'},
+        {'role': 'assistant', 'content': '他们的职业都是功夫演员', 'sent_from': '', 'send_to': 'all'}
+    ]
+},
+                                indent=4,
+                                ensure_ascii=False)
+
+default_sys_prompt = "You are a helpful assistant."
+
+# for internal
+default_mcp_prompts = {
+    # "arxiv": ["查找最新的5篇关于量子计算的论文并简要总结", "根据当前时间，找到近期关于大模型的论文，得到研究趋势"],
+    "高德地图": ["北京今天天气怎么样", "基于今天的天气，帮我规划一条从北京到杭州的路线"],
+    "time": ["帮我查一下北京时间", "现在是北京时间 2025-04-01 12:00:00，对应的美西时间是多少？"],
+    "fetch":
+    ["从中国新闻网获取最新的新闻", "获取 https://www.example.com 的内容，并提取为Markdown格式"],
+}
+
+# for internal
+default_mcp_servers = [{
+    "name": mcp_name,
+    "enabled": True,
+    "internal": True
+} for mcp_name in default_mcp_prompts.keys()]
+
+bot_avatars = {
+    "Qwen/Qwen2.5-72B-Instruct":
+    os.path.join(os.path.dirname(__file__), "./assets/qwen.png"),
+    "Qwen/QwQ-32B":
+    os.path.join(os.path.dirname(__file__), "./assets/qwen.png"),
+    "LLM-Research/Llama-4-Maverick-17B-128E-Instruct":
+    os.path.join(os.path.dirname(__file__), "./assets/meta.webp"),
+    "deepseek-ai/DeepSeek-V3-0324":
+    os.path.join(os.path.dirname(__file__), "./assets/deepseek.png"),
+}
+
+mcp_prompt_model = "Qwen/Qwen2.5-72B-Instruct"
+
+model_options = [
+    {
+        "label": "Qwen2.5-72B-Instruct",
+        "value": "Qwen/Qwen2.5-72B-Instruct"
+    },
+    {
+        "label": "DeepSeek-V3-0324",
+        "value": "deepseek-ai/DeepSeek-V3-0324",
+    },
+    {
+        "label": "Llama-4-Maverick-17B-128E-Instruct",
+        "value": "LLM-Research/Llama-4-Maverick-17B-128E-Instruct",
+    },
+    {
+        "label": "QwQ-32B",
+        "value": "Qwen/QwQ-32B",
+        "thought": True
+    },
+]
+
+primary_color = "#816DF8"
+
+default_locale = 'zh_CN'
+
+default_theme = {"token": {"colorPrimary": primary_color}}
+
+
+def user_config(disabled_actions=None):
+    return ChatbotUserConfig(actions=[
+        "copy", "edit",
+        ChatbotActionConfig(action='delete',
+                            popconfirm=dict(title="删除消息",
+                                            description="确认删除该消息?",
+                                            okButtonProps=dict(danger=True)))
+    ],
+                             disabled_actions=disabled_actions)
+
+
+def bot_config(disabled_actions=None):
+    return ChatbotBotConfig(actions=[
+        "copy", "edit",
+        ChatbotActionConfig(action="retry",
+                            popconfirm=dict(title="重新生成消息",
+                                            description="重新生成消息会删除所有后续消息。",
+                                            okButtonProps=dict(danger=True))),
+        ChatbotActionConfig(action='delete',
+                            popconfirm=dict(title="删除消息",
+                                            description="确认删除该消息?",
+                                            okButtonProps=dict(danger=True)))
+    ],
+                            disabled_actions=disabled_actions)
+
+
+def welcome_config(prompts: dict, loading=False):
+    return ChatbotWelcomeConfig(
+        icon="./assets/mcp.png",
+        title="MCP 实验场",
+        styles=dict(icon=dict(borderRadius="50%", overflow="hidden")),
+        description="调用 MCP 工具以拓展模型能力",
+        prompts=dict(title="用例生成中..." if loading else None,
+                     wrap=True,
+                     styles=dict(item=dict(flex='1 0 200px')),
+                     items=[{
+                         "label":
+                         mcp_name,
+                         "children": [{
+                             "description": prompt
+                         } for prompt in prompts]
+                     } for mcp_name, prompts in prompts.items()]))
diff --git a/apps/mcp-playground/env.py b/apps/mcp-playground/env.py
new file mode 100644
index 00000000..ee1bb19b
--- /dev/null
+++ b/apps/mcp-playground/env.py
@@ -0,0 +1,16 @@
+import os
+import json
+
+is_cn_env = os.getenv('MODELSCOPE_ENVIRONMENT') == 'studio'
+
+api_key = os.getenv('MODELSCOPE_API_KEY')
+
+internal_mcp_config = json.loads(
+    os.getenv("INTERNAL_MCP_CONFIG", '{"mcpServers": {}}'))
+
+# oss
+endpoint = os.getenv("OSS_ENDPOINT")
+
+region = os.getenv("OSS_REGION")
+
+bucket_name = os.getenv("OSS_BUCKET_NAME")
diff --git a/apps/mcp-playground/requirements.txt b/apps/mcp-playground/requirements.txt
new file mode 100644
index 00000000..c0a726ca
--- /dev/null
+++ b/apps/mcp-playground/requirements.txt
@@ -0,0 +1,10 @@
+modelscope_studio
+gradio
+langchain
+langchain-openai
+langchain_core
+langgraph
+langchain_mcp_adapters
+mcp
+exceptiongroup
+oss2
\ No newline at end of file
diff --git a/apps/mcp-playground/tools/oss.py b/apps/mcp-playground/tools/oss.py
new file mode 100644
index 00000000..f1cdfeec
--- /dev/null
+++ b/apps/mcp-playground/tools/oss.py
@@ -0,0 +1,24 @@
+from http import HTTPStatus
+import uuid
+import oss2
+from oss2.credentials import EnvironmentVariableCredentialsProvider
+from env import endpoint, bucket_name, region
+# OSS_ACCESS_KEY_ID and OSS_ACCESS_KEY_SECRET。
+auth = oss2.ProviderAuthV4(EnvironmentVariableCredentialsProvider())
+
+bucket = oss2.Bucket(auth, endpoint, bucket_name, region=region)
+
+
+def file_path_to_oss_url(file_path: str):
+    if file_path.startswith("http"):
+        return file_path
+    ext = file_path.split('.')[-1]
+    object_name = f'studio-temp/mcp-playground/{uuid.uuid4()}.{ext}'
+    response = bucket.put_object_from_file(object_name, file_path)
+    file_url = file_path
+    if response.status == HTTPStatus.OK:
+        file_url = bucket.sign_url('GET',
+                                   object_name,
+                                   60 * 60,
+                                   slash_safe=True)
+    return file_url
diff --git a/apps/mcp-playground/ui_components/add_mcp_server_button.py b/apps/mcp-playground/ui_components/add_mcp_server_button.py
new file mode 100644
index 00000000..49c693b5
--- /dev/null
+++ b/apps/mcp-playground/ui_components/add_mcp_server_button.py
@@ -0,0 +1,92 @@
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import gradio as gr
+import json
+
+
+def AddMcpServerButton():
+    with antd.Button("添加 MCP Server", type="primary",
+                     size="small") as add_mcp_server_btn:
+        with ms.Slot("icon"):
+            antd.Icon("PlusOutlined")
+    with antd.Modal(
+            title="添加 MCP Server",
+            footer=False,
+            styles=dict(footer=dict(display="none"))) as add_mcp_server_modal:
+        with antd.Tabs():
+            with antd.Tabs.Item(label="表单添加"):
+                with antd.Form(layout="vertical") as add_mcp_server_form:
+                    with antd.Form.Item(form_name="name",
+                                        label="名称",
+                                        rules=[{
+                                            "required": True
+                                        }]):
+                        antd.Input(placeholder="MCP Server 名称，如 fetch、time 等")
+                    with antd.Form.Item(form_name="url",
+                                        label="SSE 链接",
+                                        rules=[{
+                                            "required": True
+                                        }]):
+                        antd.Input(placeholder="MCP Server SSE 链接")
+                    with antd.Flex(gap="small", justify="end"):
+                        add_mcp_server_modal_cancel_btn = antd.Button("取消")
+                        antd.Button("确定", html_type="submit", type="primary")
+            with antd.Tabs.Item(label="JSON 添加"):
+                with antd.Form(layout="vertical") as add_mcp_server_json_form:
+                    with antd.Form.Item(form_name="json",
+                                        label="JSON",
+                                        rules=[{
+                                            "required":
+                                            True,
+                                            "validator":
+                                            """(_, value) => {
+                                                if (!value) {
+                                                    return Promise.reject('请输入 JSON 值');
+                                                }
+                                                try {
+                                                    const parsedValue = JSON.parse(value);
+                                                    if (!parsedValue.mcpServers || typeof parsedValue.mcpServers !== 'object') {
+                                                        return Promise.reject('配置必须包含正确的 mcpServers 字段');
+                                                    }
+                                                    return Promise.resolve()
+                                                } catch {
+                                                    return Promise.reject('请输入有效的 JSON 值');
+                                                }
+                                            } """
+                                        }]):
+                        antd.Input.Textarea(
+                            auto_size=dict(minRows=4, maxRows=8),
+                            placeholder=json.dumps(
+                                {
+                                    "mcpServers": {
+                                        "fetch": {
+                                            "type": "sse",
+                                            "url": "mcp server sse url"
+                                        }
+                                    }
+                                },
+                                indent=4))
+                    with antd.Flex(gap="small", justify="end"):
+                        add_mcp_server_modal_json_cancel_btn = antd.Button(
+                            "取消")
+                        antd.Button("确定", html_type="submit", type="primary")
+    add_mcp_server_btn.click(fn=lambda: gr.update(open=True),
+                             outputs=[add_mcp_server_modal],
+                             queue=False)
+    gr.on(triggers=[
+        add_mcp_server_modal_cancel_btn.click,
+        add_mcp_server_modal_json_cancel_btn.click, add_mcp_server_modal.cancel
+    ],
+          queue=False,
+          fn=lambda: gr.update(open=False),
+          outputs=[add_mcp_server_modal])
+    add_mcp_server_form.finish(
+        lambda: (gr.update(value={
+            "name": "",
+            "url": "",
+        }), gr.update(open=False)),
+        outputs=[add_mcp_server_form, add_mcp_server_modal])
+    add_mcp_server_json_form.finish(
+        lambda: (gr.update(value={"json": ""}), gr.update(open=False)),
+        outputs=[add_mcp_server_json_form, add_mcp_server_modal])
+    return add_mcp_server_form, add_mcp_server_json_form
diff --git a/apps/mcp-playground/ui_components/config_form.py b/apps/mcp-playground/ui_components/config_form.py
new file mode 100644
index 00000000..e7360e46
--- /dev/null
+++ b/apps/mcp-playground/ui_components/config_form.py
@@ -0,0 +1,144 @@
+import json
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+from .add_mcp_server_button import AddMcpServerButton
+from config import default_mcp_config, model_options, primary_color, default_sys_prompt, default_history_config
+
+
+def ConfigForm():
+    with antd.Form(layout="vertical",
+                   value={
+                       "sys_prompt": default_sys_prompt,
+                       "model": model_options[0]["value"]
+                   }) as config_form:
+        with antd.Form.Item(label_col=24):
+            with ms.Slot("extra"):
+                with antd.Flex(justify="end", elem_style=dict(marginTop=10)):
+                    mcp_config_confirm_btn = antd.Button("保存配置",
+                                                         type="primary")
+            with antd.Flex(gap="middle",
+                           wrap=True,
+                           elem_style=dict(paddingBottom=8)):
+                with antd.Flex(gap="small", align="center"):
+                    antd.Typography.Text("MCP Servers",
+                                         elem_style=dict(fontSize=14))
+                    antd.Typography.Text("编辑以下内容以修改运行中的 MCP Servers",
+                                         elem_style=dict(fontSize=12),
+                                         type="secondary")
+                    with antd.Tooltip(title="目前只支持 SSE 类型的 MCP Server"):
+                        with antd.Typography.Text(type="warning"):
+                            antd.Icon("InfoCircleOutlined")
+                add_mcp_server_form, add_mcp_server_json_form = AddMcpServerButton(
+                )
+
+                with antd.Button("重置默认配置",
+                                 size="small") as reset_mcp_config_btn:
+                    with ms.Slot("icon"):
+                        antd.Icon("ReloadOutlined")
+            mcp_config = gr.Code(default_mcp_config,
+                                 show_label=False,
+                                 container=False,
+                                 max_lines=20,
+                                 lines=3,
+                                 language="json")
+        with antd.Form.Item(form_name="model", label="模型"):
+            with ms.Slot("extra"):
+                with ms.Fragment(visible=False) as thought_tip:
+                    antd.Typography.Text("Note: 推理模型在调用工具前，会有较长的思考过程，需耐心等待。",
+                                         elem_style=dict(fontSize=12),
+                                         type="warning")
+
+                with antd.Flex(align="center",
+                               gap=4,
+                               elem_style=dict(marginTop=4)):
+                    ms.Text("Powered by")
+                    with antd.Typography.Link(
+                            href=
+                            "https://modelscope.cn/docs/model-service/API-Inference/intro",
+                            href_target="_blank",
+                            elem_style=dict(display="flex",
+                                            alignItems="center")):
+                        antd.Image(
+                            "https://gw.alicdn.com/imgextra/i4/O1CN01dCJ2sA1OHUQJFyCRm_!!6000000001680-2-tps-200-200.png",
+                            preview=False,
+                            width=20,
+                            height=20)
+                        ms.Text("ModelScope API-Inference")
+            with antd.Select(options=model_options) as model_select:
+                with ms.Slot(
+                        "labelRender",
+                        params_mapping=
+                        "(option) => ({ label: option.label, link: { href: `https://modelscope.cn/models/${option.value}` } })"
+                ):
+                    antd.Typography.Text(as_item="label")
+                    antd.Typography.Link("模型链接",
+                                         href_target="_blank",
+                                         as_item="link")
+                with ms.Slot(
+                        "optionRender",
+                        params_mapping=
+                        "(option) =>  ({ label: option.data.label, thought: option.data.thought ? { style: { display: 'inline-block' } } : undefined })"
+                ):
+
+                    with antd.Flex(gap="small"):
+                        antd.Typography.Text(as_item="label")
+                        antd.Tag("推理模型",
+                                 elem_style=dict(display="none"),
+                                 color=primary_color,
+                                 as_item="thought")
+
+        with antd.Form.Item(form_name="sys_prompt", label="系统提示"):
+            antd.Input.Textarea(auto_size=dict(minRows=2, maxRows=4))
+
+        with antd.Form.Item(form_name="history", label="历史信息"):
+            history_config = gr.Code(default_history_config,
+                                 show_label=False,
+                                 container=False,
+                                 max_lines=20,
+                                 lines=3,
+                                 language="json")
+            # antd.Input.Textarea(auto_size=dict(minRows=2, maxRows=4))
+
+    def add_mcp_server(mcp_config_value, add_mcp_server_form_value):
+        if not mcp_config_value:
+            mcp_config_value = "{}"
+        mcp_config = json.loads(mcp_config_value)
+        name = add_mcp_server_form_value["name"]
+        url = add_mcp_server_form_value["url"]
+        if "mcpServers" not in mcp_config:
+            mcp_config["mcpServers"] = {}
+        mcp_config["mcpServers"][name] = {"type": "sse", "url": url}
+
+        return gr.update(value=json.dumps(mcp_config, indent=4))
+
+    def add_mcp_server_by_json(mcp_config_value,
+                               add_mcp_server_json_form_value):
+        if not mcp_config_value:
+            mcp_config_value = "{}"
+        mcp_config = json.loads(mcp_config_value)
+        json_value = add_mcp_server_json_form_value["json"]
+        json_config = json.loads(json_value)
+        if "mcpServers" not in mcp_config:
+            mcp_config["mcpServers"] = {}
+
+        mcp_config["mcpServers"].update(json_config.get("mcpServers", {}))
+
+        return gr.update(value=json.dumps(mcp_config, indent=4))
+
+    def select_model(e: gr.EventData):
+        return gr.update(visible=e._data["payload"][1].get("thought", False))
+
+    add_mcp_server_form.finish(fn=add_mcp_server,
+                               inputs=[mcp_config, add_mcp_server_form],
+                               outputs=[mcp_config],
+                               queue=False)
+    add_mcp_server_json_form.finish(
+        fn=add_mcp_server_by_json,
+        inputs=[mcp_config, add_mcp_server_json_form],
+        outputs=[mcp_config],
+        queue=False)
+    model_select.change(fn=select_model, outputs=[thought_tip], queue=False)
+
+    return config_form, mcp_config_confirm_btn, reset_mcp_config_btn, mcp_config, history_config
diff --git a/apps/mcp-playground/ui_components/mcp_servers_button.py b/apps/mcp-playground/ui_components/mcp_servers_button.py
new file mode 100644
index 00000000..bbc54c77
--- /dev/null
+++ b/apps/mcp-playground/ui_components/mcp_servers_button.py
@@ -0,0 +1,108 @@
+from typing import List
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import gradio as gr
+from config import max_mcp_server_count
+
+
+def McpServersButton(data_source: List[dict]):
+    state = gr.State({"data_source": data_source})
+    with antd.Button(value=None, variant="text",
+                     color="primary") as mcp_servers_btn:
+        with ms.Slot("icon"):
+            antd.Icon("ToolOutlined")
+    with antd.Modal(
+            width=420,
+            footer=False,
+            centered=True,
+            styles=dict(footer=dict(display="none"))) as mcp_servers_modal:
+        with ms.Slot("title"):
+            with antd.Flex(gap="small", align="center"):
+                ms.Text("MCP Servers")
+                mcp_servers_switch = antd.Switch(True)
+                antd.Typography.Text(
+                    f"最大 MCP Server 连接数：{max_mcp_server_count}",
+                    type="secondary",
+                    elem_style=dict(fontSize=12, fontWeight="normal"))
+        with antd.List(
+                data_source=data_source,
+                pagination=dict(pageSize=10,
+                                hideOnSinglePage=True)) as mcp_servers_list:
+            with ms.Slot(
+                    "renderItem",
+                    params_mapping=
+                    "(item) => ({ text: { value: item.name, disabled: item.disabled }, tag: { style: { display: item.internal ? undefined: 'none' } }, switch: { value: item.enabled, mcp: item.name, disabled: item.disabled }})"
+            ):
+                with antd.List.Item():
+                    with antd.Flex(justify="space-between",
+                                   elem_style=dict(width="100%")):
+                        with antd.Flex(gap="small"):
+                            antd.Typography.Text(as_item="text")
+                            antd.Tag("官方示例", color="green", as_item="tag")
+                        mcp_server_switch = antd.Switch(as_item="switch")
+
+    def change_mcp_servers_switch(mcp_servers_switch_value, state_value):
+        state_value["data_source"] = [{
+            **item, "disabled":
+            not mcp_servers_switch_value
+        } for item in state_value["data_source"]]
+        return gr.update(value=state_value)
+
+    def change_mcp_server_switch(state_value, e: gr.EventData):
+        mcp = e._data["component"]["mcp"]
+
+        enabled = e._data["payload"][0]
+
+        state_value["data_source"] = [{
+            **item, "enabled": enabled
+        } if item["name"] == mcp else item
+                                      for item in state_value["data_source"]]
+        return gr.update(value=state_value)
+
+    def apply_state_change(state_value):
+        has_tool_use = False
+        disabled_tool_use = False
+        enabled_server_count = 0
+        for item in state_value["data_source"]:
+            if item.get("enabled"):
+                if enabled_server_count >= max_mcp_server_count:
+                    item["enabled"] = False
+                else:
+                    enabled_server_count += 1
+                    if item.get("disabled"):
+                        disabled_tool_use = True
+                    else:
+                        has_tool_use = True
+
+        if not disabled_tool_use:
+            for item in state_value["data_source"]:
+                if enabled_server_count >= max_mcp_server_count:
+                    item["disabled"] = not item.get("enabled", False)
+                else:
+                    item["disabled"] = False
+
+        return gr.update(
+            data_source=state_value["data_source"],
+            footer="没有可用的 MCP Server"
+            if len(state_value["data_source"]) == 0 else ""), gr.update(
+                color="primary" if has_tool_use else "default"), gr.update(
+                    value=not disabled_tool_use), gr.update(value=state_value)
+
+    mcp_servers_btn.click(fn=lambda: gr.update(open=True),
+                          outputs=[mcp_servers_modal],
+                          queue=False)
+    mcp_servers_switch.change(fn=change_mcp_servers_switch,
+                              inputs=[mcp_servers_switch, state],
+                              outputs=[state])
+    mcp_server_switch.change(fn=change_mcp_server_switch,
+                             inputs=[state],
+                             outputs=[state])
+    state.change(
+        fn=apply_state_change,
+        inputs=[state],
+        outputs=[mcp_servers_list, mcp_servers_btn, mcp_servers_switch, state],
+        queue=False)
+    mcp_servers_modal.cancel(fn=lambda: gr.update(open=False),
+                             outputs=[mcp_servers_modal],
+                             queue=False)
+    return state