pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 04:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Edit mcpview

Browse Source
This commit is contained in:
Saoud Rizwan
2024-12-01 15:08:50 -08:00
parent bee3df5319
commit fa62548b01
1 changed files with 58 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
webview-ui/src/components/mcp/McpView.tsx
View File

@@ -125,8 +125,8 @@ const McpView = ({ onDone }: McpViewProps) => {
bottom: 0,
display: "flex",
flexDirection: "column",
overflow: "hidden",
}}>
{/* Fixed Header */}
<div
style={{
display: "flex",
@@ -137,23 +137,38 @@ const McpView = ({ onDone }: McpViewProps) => {
<h3 style={{ color: "var(--vscode-foreground)", margin: 0 }}>MCP Servers</h3>
<VSCodeButton onClick={onDone}>Done</VSCodeButton>
</div>
<p style={{ padding: "0 20px", color: "var(--vscode-foreground)", fontSize: "13px" }}>
MCP (Model Context Protocol) enables AI models to access external tools and data through standardized
interfaces. Add MCP servers to extend Claude's capabilities with custom functionality and real-time data
access.
{/* Scrollable Content */}
<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
<p style={{ color: "var(--vscode-foreground)", fontSize: "13px" }}>
MCP (Model Context Protocol) enables AI models to access external tools and data through
standardized interfaces. Add MCP servers to extend Claude's capabilities with custom functionality
and real-time data access.
</p>
{/* Server List */}
<div style={{ flex: 1, overflow: "auto", padding: "0 20px" }}>
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{servers.map((server) => (
<ServerRow key={server.name} server={server} />
))}
</div>
{/* Add Server UI */}
<div style={{ padding: "20px" }}>
{/* Add Server UI as a row */}
{isAdding ? (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
<div
style={{
padding: "12px",
background: "var(--vscode-list-hoverBackground)",
borderRadius: "4px",
display: "flex",
flexDirection: "column",
gap: "10px",
}}>
<b style={{ color: "var(--vscode-foreground)" }}>New MCP Server</b>
<p style={{ color: "var(--vscode-descriptionForeground)", fontSize: "13px", margin: "0" }}>
Enter the MCP server configuration in JSON format. You can find this configuration in
the setup instructions for your MCP server. The config defines how to start and connect
to the server, typically specifying a command and arguments.
</p>
<VSCodeTextArea
rows={4}
placeholder='{"mcpServers": {"server-name": {"command": "...", "args": [...]}}}'
@@ -162,9 +177,12 @@ const McpView = ({ onDone }: McpViewProps) => {
/>
<div style={{ display: "flex", gap: "10px" }}>
<VSCodeButton style={{ flex: 1 }} onClick={handleAddServer}>
Add Server
Save
</VSCodeButton>
<VSCodeButton style={{ flex: 1 }} appearance="secondary" onClick={() => setIsAdding(false)}>
<VSCodeButton
style={{ flex: 1 }}
appearance="secondary"
onClick={() => setIsAdding(false)}>
Cancel
</VSCodeButton>
</div>
@@ -176,6 +194,10 @@ const McpView = ({ onDone }: McpViewProps) => {
</VSCodeButton>
)}
</div>
{/* Add bottom padding for scrolling */}
<div style={{ height: "20px" }} />
</div>
</div>
)
}
@@ -345,6 +367,7 @@ const ServerRow = ({ server }: { server: McpServer }) => {
{isEditing ? (
<>
<VSCodeTextArea
rows={4}
value={editConfig}
onChange={(e) => setEditConfig((e.target as HTMLTextAreaElement).value)}
style={{ width: "100%" }}