initMcpPanel()

in spring-ai-alibaba-jmanus/src/main/resources/static/admin/js/mcp-ui.js [32:134]

• 85 lines of code
• 1 McCabe index (conditional complexity)

    initMcpPanel() {
        // 清空当前内容
        this.mcpConfigPanel.innerHTML = '';
        
        // 添加标题
        const titleElement = document.createElement('h2');
        titleElement.className = 'panel-title';
        titleElement.textContent = 'MCP配置';
        this.mcpConfigPanel.appendChild(titleElement);
        
        // 创建MCP服务器列表容器
        const mcpLayout = document.createElement('div');
        mcpLayout.className = 'mcp-layout';
        this.mcpConfigPanel.appendChild(mcpLayout);
        
        // 创建表格容器
        this.mcpTableContainer = document.createElement('div');
        this.mcpTableContainer.className = 'mcp-table-container';
        mcpLayout.appendChild(this.mcpTableContainer);
        
        // 创建添加MCP服务器表单容器
        const addMcpContainer = document.createElement('div');
        addMcpContainer.className = 'add-mcp-container';
        mcpLayout.appendChild(addMcpContainer);
        
        // 添加标题
        const addMcpHeader = document.createElement('div');
        addMcpHeader.className = 'add-mcp-header';
        addMcpContainer.appendChild(addMcpHeader);
        
        const addMcpTitle = document.createElement('h3');
        addMcpTitle.className = 'add-mcp-title';
        addMcpTitle.textContent = '添加MCP服务器';
        addMcpHeader.appendChild(addMcpTitle);
        
        // 创建添加表单
        const addMcpForm = document.createElement('div');
        addMcpForm.className = 'mcp-form';
        addMcpContainer.appendChild(addMcpForm);
        
        // 添加表单内容
        addMcpForm.innerHTML = `
            <div class="mcp-form-group">
                <label for="mcp-connection-type">连接类型：</label>
                <div class="connection-type-options">
                    <div class="connection-type-option">
                        <input type="radio" id="mcp-connection-type-studio" name="mcp-connection-type" value="STUDIO" checked>
                        <label for="mcp-connection-type-studio">STUDIO</label>
                        <div class="connection-type-desc">本地mcp server，目前市面上主流的是这个</div>
                    </div>
                    <div class="connection-type-option">
                        <input type="radio" id="mcp-connection-type-sse" name="mcp-connection-type" value="SSE">
                        <label for="mcp-connection-type-sse">SSE</label>
                        <div class="connection-type-desc">一种远程mcp server 链接协议，目前推荐</div>
                    </div>
                </div>
            </div>
            <div class="mcp-form-group">
                <label for="mcp-config-input">mcp json配置：</label>
                <textarea id="mcp-config-input" rows="12" placeholder="请输入MCP服务器配置JSON。

        例如：
        {
        &quot;mcpServers&quot;: {
            &quot;github&quot;: {
            &quot;command&quot;: &quot;npx&quot;,
            &quot;args&quot;: [
                &quot;-y&quot;,
                &quot;@modelcontextprotocol/server-github&quot;
            ],
            &quot;env&quot;: {
                &quot;GITHUB_PERSONAL_ACCESS_TOKEN&quot;: &quot;<YOUR_TOKEN>&quot;
            }
            }
        }
        }"></textarea>
            </div>
            <div class="mcp-form-actions">
                <button class="submit-mcp-btn" id="submit-mcp-btn">提交</button>
            </div>
            <div class="mcp-form-instructions">
                <h3>使用说明：</h3>
                <ol>
                    <li>找到你要用的mcp server的配置json：
                        <ul class="indented-list">
                            <li><strong>本地(STDIO)</strong>：可以在<a href="https://mcp.so" target="_blank">mcp.so</a>上找到，需要你有Node.js环境并理解你要配置的json里面的每一个项，
                                做对应调整比如配置ak</li>
                            <li><strong>远程服务(SSE)</strong>：<a href="https://mcp.higress.ai/" target="_blank">mcp.higress.ai/</a>上可以找到，
                                有SSE和STREAMING两种，目前SSE协议更完备一些</li>
                        </ul>
                    </li>
                    <li>将json配置复制到上面的输入框，本地选STUDIO，远程选STREAMING或SSE，提交</li>
                    <li>这样mcp tools就注册成功了。默认会放在DEFAULT_AGENT下面，如果tools过多，对上下文有压力，多出的tools会被忽略</li>
                    <li>推荐在Agent配置里面，新建一个agent，然后增加指定的tools，这样可以极大减少冲突，增强tools被agent选择的准确性</li>
                </ol>
            </div>
        `;
        
        this.addMcpForm = {
            configInput: addMcpForm.querySelector('#mcp-config-input'),
            submitButton: addMcpForm.querySelector('#submit-mcp-btn')
        };
    }