Refactor server to use questionToSQLResult and remove MCP

gpt-db-chat/app/app.css

@@ -41,10 +41,6 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 
-  body {
-    @apply flex h-screen flex-col overflow-hidden;
-  }
-
   input,
   textarea {
     @apply bg-[color:var(--background)] text-[color:var(--foreground)];

gpt-db-chat/app/chat/chat.tsx

@@ -2,7 +2,10 @@ import { useLocalStorage } from "@uidotdev/usehooks";
 import { useEffect, useState } from "react";
 import { Form, useSearchParams } from "react-router";
 import { Table } from "~/components/table";
-import { useMcpSql, type ChatResponse } from "~/hooks/use-mcp-sql";
+import {
+  useQuestionToSqlResult,
+  type ChatResponse,
+} from "~/hooks/use-question-to-sql-result";
 
 export function Chat() {
   const [searchParams] = useSearchParams();
@@ -16,7 +19,7 @@ export function Chat() {
   );
   const [chatResponse, setChatResponse] = useState<ChatResponse | null>(null);
 
-  const { isError, isLoading, retry, error, call } = useMcpSql();
+  const { isLoading, isError, call } = useQuestionToSqlResult();
 
   useEffect(() => {
     async function fetchChatResponse() {
@@ -76,14 +79,11 @@ export function Chat() {
               onChange={(e) => setQuestionInput(e.target.value)}
               placeholder="Ask a question about your database..."
               className="input-base flex-1"
-              disabled={isError}
             />
             <button
               type="submit"
-              disabled={isError || !questionInput.trim()}
-              className={`button-base button-primary px-6 py-2 ${
-                isError ? "opacity-50" : ""
-              }`}
+              disabled={!questionInput.trim()}
+              className="button-base button-primary px-6 py-2"
             >
               {isLoading ? (
                 <span className="flex items-center gap-2">
@@ -114,15 +114,7 @@ export function Chat() {
             </button>
           </Form>
         </section>
-
-        {/* Results Section */}
-        {isError ? (
-          <div>
-            <p>Connection failed: {error}</p>
-            <button onClick={retry}>Retry</button>
-          </div>
-        ) : null}
-
+        {isError && <p>Error occurred</p>}
         {chatResponse && (
           <section className="space-y-6 animate-fade-in">
             {/* SQL Query Display */}
@@ -139,7 +131,7 @@ export function Chat() {
             {chatResponse.result && (
               <div className="space-y-2">
                 <h3 className="h4 text-foreground">Query Results:</h3>
-                <div className="table-wrapper">
+                <div className="table-wrapper overflow-scroll overflow-y-scroll h-1/2">
                   <Table rows={chatResponse.result} />
                 </div>
               </div>

gpt-db-chat/app/components/navbar.tsx

@@ -7,7 +7,7 @@ export function Navbar() {
     <nav className="w-full h-full px-8 border-r">
       <h2 className="text-xl font-bold">History</h2>
 
-      <ul className="mt-8 overflow-y-scroll">
+      <ul className="mt-8">
         {chatHistory.map((item, index) => (
           <li key={index}>
             <a

gpt-db-chat/app/hooks/use-question-to-sql-result.ts

@@ -0,0 +1,40 @@
+import { useState } from "react";
+
+export interface ChatResponse {
+  sql: string;
+  result: unknown[];
+}
+
+async function makeRequest(body: Record<string, any>) {
+  const response = await fetch("http://localhost:3002/question-sql-result", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+
+  return await response.json();
+}
+
+export function useQuestionToSqlResult() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const call = async (question: string) => {
+    setIsLoading(true);
+    try {
+      const result = await makeRequest({ question });
+
+      return result as ChatResponse;
+    } catch (error) {
+      console.error(error);
+      setIsError(true);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return { isLoading, isError, call };
+}

gpt-db-chat/package.json

@@ -17,8 +17,7 @@
     "react": "^19.3.0-canary-1324e1bb-20251016",
     "react-dom": "^19.3.0-canary-1324e1bb-20251016",
     "react-router": "^7.9.2",
-    "ts-node": "^10.9.2",
-    "use-mcp": "^0.0.21"
+    "ts-node": "^10.9.2"
   },
   "devDependencies": {
     "@react-router/dev": "^7.9.2",

gpt-db-chat/yarn.lock

@@ -460,7 +460,7 @@
   resolved "https://registry.yarnpkg.com/@mjackson/node-fetch-server/-/node-fetch-server-0.2.0.tgz#577c0c25d8aae9f69a97738b7b0d03d1471cdc49"
   integrity sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==
 
-"@modelcontextprotocol/sdk@^1.13.3", "@modelcontextprotocol/sdk@^1.22.0":
+"@modelcontextprotocol/sdk@^1.22.0":
   version "1.23.0"
   resolved "https://registry.yarnpkg.com/@modelcontextprotocol/sdk/-/sdk-1.23.0.tgz#692fc54856bc8881c202c97bad103da44efe967f"
   integrity sha512-MCGd4K9aZKvuSqdoBkdMvZNcYXCkZRYVs/Gh92mdV5IHbctX9H9uIvd4X93+9g8tBbXv08sxc/QHXTzf8y65bA==
@@ -2437,11 +2437,6 @@ statuses@^2.0.1, statuses@~2.0.2:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.2.tgz#8f75eecef765b5e1cfcdc080da59409ed424e382"
   integrity sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==
 
-strict-url-sanitise@^0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/strict-url-sanitise/-/strict-url-sanitise-0.0.1.tgz#10cfac63c9dfdd856d98ab9f76433dad5ce99e0c"
-  integrity sha512-nuFtF539K8jZg3FjaWH/L8eocCR6gegz5RDOsaWxfdbF5Jqr2VXWxZayjTwUzsWJDC91k2EbnJXp6FuWW+Z4hg==
-
 "string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -2582,14 +2577,6 @@ update-browserslist-db@^1.1.4:
     escalade "^3.2.0"
     picocolors "^1.1.1"
 
-use-mcp@^0.0.21:
-  version "0.0.21"
-  resolved "https://registry.yarnpkg.com/use-mcp/-/use-mcp-0.0.21.tgz#e5f9235e7d86d18c91dfede65198537d09b224be"
-  integrity sha512-mF6WlWEnOWubUphXeNE3sc7/5dvlvN2AsUNla20EHPmwqqrt/LCdRIW0TWY+OgAX6O7HjZ+z2p8sKWG5OiObSg==
-  dependencies:
-    "@modelcontextprotocol/sdk" "^1.13.3"
-    strict-url-sanitise "^0.0.1"
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"

server/cli.ts

@@ -1,18 +1,10 @@
-import { openDB } from "./src/db/open-db.ts";
-import { questionToSQL } from "./src/services/question-to-sql.ts";
+import { questionToSQLResult } from "./src/services/question-to-sql.ts";
 
 async function main() {
-  const db = await openDB();
-
   const question = process.argv[2];
-  const sqlQuery = await questionToSQL(question, db);
-
-  console.log("Generated Query:", sqlQuery);
+  const results = await questionToSQLResult(question);
 
-  // Execute the query
-  const results = await db.all(sqlQuery);
   console.log("Results:", results);
 }
 
-
-main()
+main();

server/init-db.ts

@@ -82,9 +82,4 @@ async function init() {
   console.log("✅ Database initialized.");
 }
 
-// (async () => {
-//   const rows = await db.all("SELECT * FROM sqlite_master;");
-//   console.log(rows);
-// })();
-
 init();