71e66c651c
This adds a completely separate frontend based on React because I found that code gen works better with React once the application gets bigger. In particular it was getting very hard to move past add connectors and actions. The idea is to replace the standard UI with this once it has been tested. But for now it is available at /app in addition to the original at / Signed-off-by: Richard Palethorpe <io@richiejp.com>
71 lines
2.1 KiB
JavaScript
71 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
|
|
/**
|
|
* MCP Servers section of the agent form
|
|
*/
|
|
const MCPServersSection = ({
|
|
formData,
|
|
handleAddMCPServer,
|
|
handleRemoveMCPServer,
|
|
handleMCPServerChange
|
|
}) => {
|
|
return (
|
|
<div id="mcp-section">
|
|
<h3 className="section-title">MCP Servers</h3>
|
|
<p className="section-description">
|
|
Configure MCP servers for this agent.
|
|
</p>
|
|
|
|
<div className="mcp-servers-container">
|
|
{formData.mcp_servers && formData.mcp_servers.map((server, index) => (
|
|
<div key={index} className="mcp-server-item mb-4">
|
|
<div className="mcp-server-header">
|
|
<h4>MCP Server #{index + 1}</h4>
|
|
<button
|
|
type="button"
|
|
className="remove-btn"
|
|
onClick={() => handleRemoveMCPServer(index)}
|
|
>
|
|
<i className="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor={`mcp-url-${index}`}>URL</label>
|
|
<input
|
|
type="text"
|
|
id={`mcp-url-${index}`}
|
|
value={server.url || ''}
|
|
onChange={(e) => handleMCPServerChange(index, 'url', e.target.value)}
|
|
className="form-control"
|
|
placeholder="https://example.com/mcp"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-3">
|
|
<label htmlFor={`mcp-api-key-${index}`}>API Key</label>
|
|
<input
|
|
type="password"
|
|
id={`mcp-api-key-${index}`}
|
|
value={server.api_key || ''}
|
|
onChange={(e) => handleMCPServerChange(index, 'api_key', e.target.value)}
|
|
className="form-control"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<button
|
|
type="button"
|
|
className="add-btn"
|
|
onClick={handleAddMCPServer}
|
|
>
|
|
<i className="fas fa-plus"></i> Add MCP Server
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MCPServersSection;
|