Function AddMCPDialog

client-next/src/components/add-mcp-dialog.tsx:127–263

({ onAdd }: AddMCPDialogProps)

}

export function AddMCPDialog({ onAdd }: AddMCPDialogProps) {
  const [open, setOpen] = useState(false);
  const [pasteInput, setPasteInput] = useState("");
  const [name, setName] = useState("");
  const [configJson, setConfigJson] = useState(() => JSON.stringify(buildDefaultConfig(), null, 2));
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const resetForm = () => {
    setPasteInput("");
    setName("");
    setConfigJson(JSON.stringify(buildDefaultConfig(), null, 2));
    setError("");
  };

  useEffect(() => {
    if (!pasteInput.trim()) return;
    
    const parsed = parseInput(pasteInput);
    if (parsed) {
      setName(parsed.name);
      setConfigJson(JSON.stringify(parsed.config, null, 2));
    }
  }, [pasteInput]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError("");

    if (!name.trim()) {
      setError("Please enter a server name");
      return;
    }

    if (name.includes(" ")) {
      setError("Server name should not contain spaces");
      return;
    }

    let config: MCPConfig;
    try {
      config = JSON.parse(configJson);
      if (typeof config !== "object" || Array.isArray(config)) {
        setError("Config must be a JSON object");
        return;
      }
    } catch {
      setError("Invalid JSON");
      return;
    }

    try {
      setLoading(true);
      await onAdd(name, config);
      resetForm();
      setOpen(false);
    } catch (err: any) {
      const msg = err.response?.data?.error || err.message || "Failed to add server";