Refactor ConfigConnection to use URL instead of port; update related components and services. This includes changes to context, provider, screens, and connection checks to accommodate the new URL structure. Additionally, several unused tools and services have been removed to streamline the codebase.

Author: virat21

src/components/ConfigConnection/ConfigConnectionContext.tsx

@@ -2,13 +2,13 @@ import { createContext } from "react";
 
 export const ConfigConnectionContext = createContext<{
   data: {
-    port: number;
+    url: string;
     siteId: string;
   };
-  setData: (data: { port: number; siteId: string }) => void;
+  setData: (data: { url: string; siteId: string }) => void;
 }>({
   data: {
-    port: 3000,
+    url: "http://localhost:1338",
     siteId: "",
   },
   setData: () => {},

src/components/ConfigConnection/ConfigConnectionProvider.tsx

@@ -7,10 +7,10 @@ export const ConfigConnectionProvider = ({
   children: React.ReactNode;
 }) => {
   const [data, setData] = useState<{
-    port: number;
+    url: string;
     siteId: string;
   }>({
-    port: 3000,
+    url: "://localhost:1338",
     siteId: "",
   });
   return (

src/components/Screens/Home.tsx

@@ -18,7 +18,7 @@ import { Badge } from "../ui/badge";
 
 export const HomeScreen = () => {
   const {
-    data: { port, siteId },
+    data: { url, siteId },
   } = useConfigConnection();
 
   const { setCurrentScreen } = useScreenManager();
@@ -27,8 +27,8 @@ export const HomeScreen = () => {
     string[]
   >([]);
   useEffect(() => {
-    if (port) {
-      initRPC(port, siteId, {
+    if (url) {
+      initRPC(url, siteId, {
         log: (message) => {
           setToolCallLogs((prev) => [
             `${message}`,
@@ -48,7 +48,7 @@ export const HomeScreen = () => {
     } else {
       setCurrentScreen("SPLASH");
     }
-  }, [port, setCurrentScreen, siteId]);
+  }, [url, setCurrentScreen, siteId]);
 
   if (!isConnected) {
     return (

src/components/Screens/Splash.tsx

@@ -17,44 +17,48 @@ import { LoaderCircle } from "lucide-react";
 export const SplashScreen = () => {
   const { setCurrentScreen } = useScreenManager();
   const { setData } = useConfigConnection();
-  const [port, setPort] = useState(3000);
+  const [url, setUrl] = useState("http://localhost:1338");
   const [isLoading, setIsLoading] = useState(false);
 
   const handleConnect = async () => {
     try {
       setIsLoading(true);
       toast.info("Checking Connection...");
-      const isConnected = await checkConnection(port);
+      const isConnected = await checkConnection(url);
       if (isConnected) {
         const site = await webflow.getSiteInfo();
-        setData({ port, siteId: site.siteId });
+        setData({ url, siteId: site.siteId });
         setCurrentScreen("HOME");
         toast.success("Connection Validated");
       } else {
-        toast.error("Failed to connect to MCP Server");
+        toast.error("Failed to connect to MCP Server", {
+          description:
+            "Please check the URL and try again. ask LLM to get the correct URL if needed.",
+        });
       }
     } catch (error) {
       console.error(error);
-      toast.error("Failed to connect to MCP Server");
+      toast.error("Failed to connect to MCP Server", {
+        description:
+          "Please check the URL and try again. ask LLM to get the correct URL if needed.",
+      });
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div className="flex flex-col justify-center items-center h-screen gap-3">
+    <div className="flex flex-col justify-center items-center h-screen gap-3 p-3">
       <Card>
         <CardHeader>
           <CardTitle>Enter Port</CardTitle>
         </CardHeader>
         <CardContent className="flex flex-col gap-2">
           <Input
-            type="number"
-            placeholder="Enter Port"
-            value={port}
-            onChange={(e) =>
-              setPort(Number(e.target.value))
-            }
+            type="url"
+            placeholder="Enter URL"
+            value={url}
+            onChange={(e) => setUrl(e.target.value)}
           />
           <Button
             onClick={handleConnect}
@@ -66,6 +70,13 @@ export const SplashScreen = () => {
               "Connect"
             )}
           </Button>
+          <div className="flex flex-col gap-1 mt-2">
+            <p className="text-sm text-text3">Need Help?</p>
+            <p className="text-xs text-text3">
+              Ask LLM to get "Get Webflow MCP App Connection
+              Info". put the localhost url in above input.
+            </p>
+          </div>
         </CardContent>
       </Card>
     </div>

src/services/checkConnection.ts

@@ -1,10 +1,8 @@
 import { debug } from "./debug";
 
-export const checkConnection = async (port: number) => {
+export const checkConnection = async (url: string) => {
   try {
-    const response = await fetch(
-      `http://localhost:${port}`
-    );
+    const response = await fetch(url);
     return response.ok;
   } catch (error) {
     debug(error);

src/services/de-tools/asset_tool.ts

@@ -0,0 +1,169 @@
+import getAssetFolderInfo, {
+  AssetFolderDetailedInfo,
+} from "@/utils/getAssetFolderInfo";
+import { getError } from "./helper/errorHelper";
+import getAssetInfo, {
+  AssetDetailedInfo,
+} from "@/utils/getAssetInfo";
+
+type Action = {
+  create_folder?: {
+    /** The name of the folder to create */
+    name: string;
+
+    /** The id of the parent folder to create the folder in */
+    parent_folder_id?: string;
+  };
+
+  get_all_assets_and_folders?: {
+    /** Query to get all assets and folders on the site */
+    query: "all" | "folders" | "assets";
+
+    /** Filter assets by ids */
+    filter_assets_by_ids?: string[];
+  };
+
+  update_asset?: {
+    /** The id of the asset to update */
+    asset_id: string;
+
+    /** The name of the asset to update */
+    name?: string;
+
+    /** The alt text of the asset to update */
+    alt_text?: string;
+
+    /**
+     * The id of the parent folder to move the asset to.
+     */
+    parent_folder_id?: string;
+  };
+};
+
+type ActionsArray = Action[];
+const asset_tool = async (actions: ActionsArray) => {
+  const result: {
+    status: "success" | "error";
+    message: string;
+    data: any;
+  }[] = [];
+  let AssetFolders: AssetFolder[] = [];
+  for (const action of actions) {
+    try {
+      if (action.create_folder) {
+        if (!action.create_folder.name) {
+          throw new Error("Folder name is required");
+        }
+        const folder = await webflow.createAssetFolder(
+          action.create_folder.name,
+          action.create_folder.parent_folder_id
+        );
+        result.push({
+          status: "success",
+          message: "Folder created successfully",
+          data: await getAssetFolderInfo(folder),
+        });
+      }
+      if (action.get_all_assets_and_folders) {
+        const query =
+          action.get_all_assets_and_folders.query;
+        const filterAssetId =
+          action.get_all_assets_and_folders
+            .filter_assets_by_ids || [];
+        const assets: AssetDetailedInfo[] = [];
+        const folders: AssetFolderDetailedInfo[] = [];
+        if (query === "all" || query === "assets") {
+          const _assets = (
+            await webflow.getAllAssets()
+          ).filter((asset) => {
+            if (filterAssetId.length > 0) {
+              return filterAssetId.includes(asset.id);
+            }
+            return true;
+          });
+          const _assetsInfo = await Promise.all(
+            _assets.map(getAssetInfo)
+          );
+          assets.push(..._assetsInfo);
+        }
+        if (query === "all" || query === "folders") {
+          const _folders =
+            await webflow.getAllAssetFolders();
+          AssetFolders = _folders;
+          const _foldersInfo = await Promise.all(
+            _folders.map(getAssetFolderInfo)
+          );
+          folders.push(..._foldersInfo);
+        }
+        result.push({
+          status: "success",
+          message:
+            "Assets and folders fetched successfully",
+          data: {
+            assets,
+            folders,
+          },
+        });
+      }
+
+      if (action.update_asset) {
+        const asset = await webflow.getAssetById(
+          action.update_asset.asset_id
+        );
+        if (!asset) {
+          result.push({
+            status: "error",
+            message: "Asset not found",
+            data: null,
+          });
+          continue;
+        }
+        if (action.update_asset.name) {
+          await asset.setName(action.update_asset.name);
+        }
+        if (action.update_asset.alt_text) {
+          await asset.setAltText(
+            action.update_asset.alt_text
+          );
+        }
+        if (action.update_asset.parent_folder_id) {
+          const folders = AssetFolders.length
+            ? AssetFolders
+            : await webflow.getAllAssetFolders();
+          const folder = folders.find(
+            (folder) =>
+              folder.id ===
+              action.update_asset!.parent_folder_id!
+          );
+          if (!folder) {
+            result.push({
+              status: "error",
+              message: `Folder with id ${action.update_asset!
+                .parent_folder_id!} not found for asset ${
+                action.update_asset!.asset_id
+              }`,
+              data: null,
+            });
+          } else {
+            await asset.setParent(folder);
+          }
+        }
+        result.push({
+          status: "success",
+          message: "Asset updated successfully",
+          data: await getAssetInfo(asset),
+        });
+      }
+    } catch (error) {
+      console.log(error);
+      result.push({
+        status: "error",
+        message: getError(error),
+        data: null,
+      });
+    }
+  }
+  return result;
+};
+
+export default asset_tool;