MCPX MCP Gateway

import { Toaster } from "@/components/ui/toaster";
import Pages from "@/pages/index.jsx";
import { useSocketStore } from "@/store";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactFlowProvider } from "@xyflow/react";
import "@xyflow/react/dist/style.css";
import "monaco-editor/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf";
import { useEffect } from "react";
import "./App.css";
import { initMonaco } from "./monaco/init-monaco";

const queryClient = new QueryClient();

function App() {
  const connect = useSocketStore((s) => s.connect);
  const disconnect = useSocketStore((s) => s.disconnect);

  useEffect(() => {
    initMonaco();
    connect();

    return () => {
      disconnect();
    };
  }, [connect, disconnect]);

  return (
    <QueryClientProvider client={queryClient}>
      <ReactFlowProvider>
        <Pages />
        <Toaster />
      </ReactFlowProvider>
    </QueryClientProvider>
  );
}

export default App;