@@ -143,7 +143,7 @@ function App() {
@@ -183,10 +183,10 @@ function App() {
to learn more.
- This is a simple, web-based GUI to help you install and - manage MCP servers in your Claude App.
- This runs client-side in your browser so your data will - never leave your computer. + This is a simple GUI to help you install and manage MCP + servers in your Claude App.
+ This runs client-side on your machine only, so your data + will never leave your computer.
diff --git a/src/components/applying-instructions.tsx b/src/components/applying-instructions.tsx
index 77d7fed..de426a0 100644
--- a/src/components/applying-instructions.tsx
+++ b/src/components/applying-instructions.tsx
@@ -78,9 +78,9 @@ export function ApplyingInstructions({
// Use the child_process module through window.electron
const result = await window.electron.executeCommand(command)
- if (result.error) {
+ if (!result.success) {
setAutoApplyStatus("error")
- setErrorMessage(result.error)
+ setErrorMessage(result.output)
} else {
setAutoApplyStatus("success")
}
diff --git a/src/components/mcp-servers.tsx b/src/components/mcp-servers.tsx
index 3a1770f..0709637 100644
--- a/src/components/mcp-servers.tsx
+++ b/src/components/mcp-servers.tsx
@@ -2,6 +2,7 @@ import { MCPServerCard } from "@/components/mcp-server-card"
import { SERVER_CONFIGS } from "@/server-configs"
import { capitalizeFirstLetter } from "@/utils"
import { Plus } from "lucide-react"
+import { useState } from "react"
type MCPServer = {
command: string
@@ -30,10 +31,9 @@ export function MCPServers({
onServerAdd,
onServerRemove
}: MCPServersProps) {
- console.log("MCPServers component received props:", {
- servers: jsonContent.mcpServers,
- serverCount: Object.keys(jsonContent.mcpServers).length
- })
+ const [customJson, setCustomJson] = useState("")
+ const [customServerName, setCustomServerName] = useState("")
+ const [jsonError, setJsonError] = useState("")
const handleServerUpdate = (name: string, newConfig: MCPServer) => {
console.log("Updating server:", name, newConfig)
@@ -52,36 +52,92 @@ export function MCPServers({
onServerRemove(name)
}
+ const handleCustomServerAdd = () => {
+ if (!customServerName.trim()) {
+ setJsonError("Please enter a server name")
+ return
+ }
+
+ try {
+ const parsedConfig = JSON.parse(customJson)
+ if (!parsedConfig.command || !Array.isArray(parsedConfig.args)) {
+ setJsonError(
+ "Invalid server configuration. Must include 'command' and 'args' fields"
+ )
+ return
+ }
+
+ const updatedContent = {
+ ...jsonContent,
+ mcpServers: {
+ ...jsonContent.mcpServers,
+ [customServerName]: parsedConfig
+ }
+ }
+ onUpdate(updatedContent)
+
+ // Reset form and close modal
+ setCustomJson("")
+ setCustomServerName("")
+ setJsonError("")
+ const modal = document.getElementById(
+ "add_custom_server_modal"
+ ) as HTMLDialogElement
+ if (modal) {
+ modal.close()
+ }
+ } catch (error) {
+ setJsonError("Invalid JSON format")
+ }
+ }
+
const hasServers = Object.keys(jsonContent.mcpServers).length > 0
- console.log("Has servers:", hasServers)
return (
Your MCP Servers
- +
+
+
+