From 0ae6c23dc902f49f7c79e557c8b28b6f3ea18971 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 16:29:41 +0500
Subject: [PATCH 1/6] console log curl to json

---
 client/packages/lowcoder/package.json         |  1 +
 .../lowcoder/src/components/CurlImport.tsx    | 90 +++++++++++++++++++
 .../src/components/ResCreatePanel.tsx         | 24 +++++
 client/yarn.lock                              | 12 ++-
 4 files changed, 126 insertions(+), 1 deletion(-)
 create mode 100644 client/packages/lowcoder/src/components/CurlImport.tsx

diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index e838c870d..7137e23b6 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -7,6 +7,7 @@
   "types": "src/index.sdk.ts",
   "dependencies": {
     "@ant-design/icons": "^5.3.0",
+    "@bany/curl-to-json": "^1.2.8",
     "@codemirror/autocomplete": "^6.11.1",
     "@codemirror/commands": "^6.3.2",
     "@codemirror/lang-css": "^6.2.1",
diff --git a/client/packages/lowcoder/src/components/CurlImport.tsx b/client/packages/lowcoder/src/components/CurlImport.tsx
new file mode 100644
index 000000000..e3b26936b
--- /dev/null
+++ b/client/packages/lowcoder/src/components/CurlImport.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Modal, Input, Button, message } from "antd";
+import { trans } from "i18n";
+import parseCurl from "@bany/curl-to-json";
+const { TextArea } = Input;
+interface CurlImportModalProps {
+  open: boolean;
+  onCancel: () => void;
+  onSuccess: (parsedData: any) => void;
+}
+
+export function CurlImportModal(props: CurlImportModalProps) {
+  const { open, onCancel, onSuccess } = props;
+  const [curlCommand, setCurlCommand] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleImport = async () => {
+    if (!curlCommand.trim()) {
+      message.error("Please enter a cURL command");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Parse the cURL command using the correct import
+      const parsedData = parseCurl(curlCommand);
+      console.log("CURL JSON", parsedData)
+
+      
+      
+      // Log the result for now as requested
+    //   console.log("Parsed cURL data:", parsedData);
+      
+      // Call success callback with parsed data
+      onSuccess(parsedData);
+      
+      // Reset form and close modal
+      setCurlCommand("");
+      onCancel();
+      
+      message.success("cURL command imported successfully!");
+    } catch (error: any) {
+      console.error("Error parsing cURL command:", error);
+      message.error(`Failed to parse cURL command: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setCurlCommand("");
+    onCancel();
+  };
+
+  return (
+    <Modal
+      title="Import from cURL"
+      open={open}
+      onCancel={handleCancel}
+      footer={[
+        <Button key="cancel" onClick={handleCancel}>
+          Cancel
+        </Button>,
+        <Button key="import" type="primary" loading={loading} onClick={handleImport}>
+          Import
+        </Button>,
+      ]}
+      width={600}
+    >
+      <div style={{ marginBottom: 16 }}>
+        <div style={{ marginBottom: 8, fontWeight: 500 }}>
+          Paste cURL Command Here
+        </div>
+        <div style={{ marginBottom: 12, color: "#666", fontSize: "12px" }}>
+          Hint: Try typing in the following curl command and then click on the 'Import' button: 
+          curl -X GET https://mock-api.appsmith.com/users
+        </div>
+        <TextArea
+          value={curlCommand}
+          onChange={(e) => setCurlCommand(e.target.value)}
+          placeholder="curl -X POST \
+-H 'Content-Type: application/json' \
+'https://generativelanguage.googleapis.com/v1beta/models/{MODEL_ID}:{GENERATE_CONTENT_API}?key={GEMINI_API_KEY}' -d '@request.json'"
+          rows={8}
+          style={{ fontFamily: "monospace" }}
+        />
+      </div>
+    </Modal>
+  );
+} 
\ No newline at end of file
diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index 9d60608aa..89a9f545e 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -26,6 +26,7 @@ import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
+import { CurlImportModal } from "./CurlImport";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;
@@ -230,6 +231,7 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   const { onSelect, onClose, recentlyUsed, datasource, placement = "editor" } = props;
   const [isScrolling, setScrolling] = useState(false);
   const [visible, setVisible] = useState(false);
+  const [curlModalVisible, setCurlModalVisible] = useState(false);
 
   const isPublicApp = useSelector(isPublicApplication);
   const user = useSelector(getUser);
@@ -244,6 +246,19 @@ export function ResCreatePanel(props: ResCreateModalProps) {
     setScrolling(top > 0);
   }, 100);
 
+  const handleCurlImportSuccess = (parsedData: any) => {
+    // For now just log the result as requested
+    console.log("cURL import successful:", parsedData);
+    
+    // Create a new REST API query with the parsed data
+    // We'll pass the parsed data as extra info to be used when creating the query
+    onSelect(BottomResTypeEnum.Query, {
+      compType: "restApi", 
+      dataSourceId: QUICK_REST_API_ID,
+      curlData: parsedData
+    });
+  };
+
   return (
     <Wrapper $placement={placement}>
       <Title $shadow={isScrolling} $placement={placement}>
@@ -331,6 +346,10 @@ export function ResCreatePanel(props: ResCreateModalProps) {
                 <ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"alasql"} onSelect={onSelect} />
                 <ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
+                <DataSourceButton size={buttonSize} onClick={() => setCurlModalVisible(true)}>
+                  <DataSourceIcon size="large" dataSourceType="restApi" />
+                  Import from cURL
+                </DataSourceButton>
               </DataSourceListWrapper>
             </div>
 
@@ -374,6 +393,11 @@ export function ResCreatePanel(props: ResCreateModalProps) {
         onCancel={() => setVisible(false)}
         onCreated={() => setVisible(false)}
       />
+      <CurlImportModal
+        open={curlModalVisible}
+        onCancel={() => setCurlModalVisible(false)}
+        onSuccess={handleCurlImportSuccess}
+      />
     </Wrapper>
   );
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index d15e8a065..b3885ff80 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1682,6 +1682,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bany/curl-to-json@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@bany/curl-to-json@npm:1.2.8"
+  dependencies:
+    minimist: ^1.2.8
+  checksum: 4f2c095c3e3194e9e3e717cf766a66c8ca320c2f10b118d52a8d8d2b842b6760af656a966ec3ce9e9cf774909b2507a2d1417c7f3d98b6773f5ae935be9191b6
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -14095,6 +14104,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   resolution: "lowcoder@workspace:packages/lowcoder"
   dependencies:
     "@ant-design/icons": ^5.3.0
+    "@bany/curl-to-json": ^1.2.8
     "@codemirror/autocomplete": ^6.11.1
     "@codemirror/commands": ^6.3.2
     "@codemirror/lang-css": ^6.2.1
@@ -15476,7 +15486,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.2.0, minimist@npm:^1.2.6":
+"minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 75a6d645fb122dad29c06a7597bddea977258957ed88d7a6df59b5cd3fe4a527e253e9bbf2e783e4b73657f9098b96a5fe96ab8a113655d4109108577ecf85b0

From 850ccdab5bd864a8e4b6716964ffeedda5daade3 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 16:54:49 +0500
Subject: [PATCH 2/6] edits in querycomp

---
 .../lowcoder/src/comps/queries/queryComp.tsx  | 48 +++++++++++++++----
 1 file changed, 39 insertions(+), 9 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index c40cb3cd6..78d95a358 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -743,18 +743,48 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
     const name = this.genNewName(editorState);
     const compType = extraInfo?.compType || "js";
     const dataSourceId = extraInfo?.dataSourceId;
+    const curlData = extraInfo?.curlData;
+    console.log("CURL DATA", curlData)
+
+
+
+    // Build the payload that will be pushed to the list
+    let payload: any = {
+      id: id,
+      name: name,
+      datasourceId: dataSourceId,
+      compType,
+      triggerType: manualTriggerResource.includes(compType) ? "manual" : "automatic",
+      isNewCreate: true,
+      order: Date.now(),
+    };
+
+    // If this is a REST API created from cURL, pre-populate the HTTP query fields
+    if (compType === "restApi" && curlData) {
+      const headersArr = curlData.header
+        ? Object.entries(curlData.header).map(([key, value]) => ({ key, value }))
+        : [{ key: "", value: "" }];
+      const paramsArr = curlData.params
+        ? Object.entries(curlData.params).map(([key, value]) => ({ key, value }))
+        : [{ key: "", value: "" }];
+
+      payload = {
+        ...payload,
+        comp: {
+          httpMethod: curlData.method || "GET",
+          path: curlData.url || "",
+          headers: headersArr,
+          params: paramsArr,
+          bodyType: curlData.body ? "application/json" : "none",
+          body: curlData.body ? JSON.stringify(curlData.body, null, 2) : "",
+          bodyFormData: [{ key: "", value: "", type: "text" }],
+        },
+      };
+    }
 
     this.dispatch(
       wrapActionExtraInfo(
-        this.pushAction({
-          id: id,
-          name: name,
-          datasourceId: dataSourceId,
-          compType,
-          triggerType: manualTriggerResource.includes(compType) ? "manual" : "automatic",
-          isNewCreate: true,
-          order: Date.now(),
-        }),
+        this.pushAction(payload),
         {
           compInfos: [
             {

From 1e0295f17ff23679a209ce332bebacf00328061f Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 18:46:54 +0500
Subject: [PATCH 3/6] fix body issue

---
 .../lowcoder/src/comps/queries/queryComp.tsx  | 44 ++++++++++++++++---
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 78d95a358..0a674353b 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -761,22 +761,52 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
 
     // If this is a REST API created from cURL, pre-populate the HTTP query fields
     if (compType === "restApi" && curlData) {
-      const headersArr = curlData.header
-        ? Object.entries(curlData.header).map(([key, value]) => ({ key, value }))
+      // Normalize possible field names returned by different curl parsers
+      const rawHeaders: Record<string, any> | undefined =
+        curlData.header || curlData.headers;
+      const rawParams: Record<string, any> | undefined =
+        curlData.params || curlData.parameters || curlData.query;
+
+      // Convert headers & params objects to the key/value array expected by the UI controls
+      const headersArr = rawHeaders
+        ? Object.entries(rawHeaders).map(([key, value]) => ({ key, value }))
         : [{ key: "", value: "" }];
-      const paramsArr = curlData.params
-        ? Object.entries(curlData.params).map(([key, value]) => ({ key, value }))
+
+      const paramsArr = rawParams
+        ? Object.entries(rawParams).map(([key, value]) => ({ key, value }))
         : [{ key: "", value: "" }];
 
+      // Detect request body – different parsers may expose it under various keys
+      const bodyContent: any =
+        curlData.body ?? curlData.data ?? curlData.postData ?? undefined;
+
+      // Determine body type – prefer the Content-Type header if present
+      let bodyType: string = "none";
+      if (bodyContent !== undefined && bodyContent !== "") {
+        const contentTypeHeader =
+          (rawHeaders && (rawHeaders["Content-Type"] || rawHeaders["content-type"])) ||
+          "";
+        if (contentTypeHeader) {
+          bodyType = contentTypeHeader;
+        } else if (typeof bodyContent === "object") {
+          bodyType = "application/json";
+        } else {
+          bodyType = "text/plain";
+        }
+      }
+
       payload = {
         ...payload,
         comp: {
           httpMethod: curlData.method || "GET",
-          path: curlData.url || "",
+          path: curlData.url || curlData.path || "",
           headers: headersArr,
           params: paramsArr,
-          bodyType: curlData.body ? "application/json" : "none",
-          body: curlData.body ? JSON.stringify(curlData.body, null, 2) : "",
+          bodyType: bodyType,
+          body:
+            typeof bodyContent === "object"
+              ? JSON.stringify(bodyContent, null, 2)
+              : bodyContent || "",
           bodyFormData: [{ key: "", value: "", type: "text" }],
         },
       };

From d8560aadde128f0d2c5b1693bf302efaa2603f43 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 19:18:06 +0500
Subject: [PATCH 4/6] add global query library curl

---
 .../pages/queryLibrary/QueryLibraryEditor.tsx | 64 +++++++++++++++++--
 1 file changed, 58 insertions(+), 6 deletions(-)

diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
index cff8de9eb..855603c5b 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
@@ -199,17 +199,70 @@ export const QueryLibraryEditor = () => {
   const newName = nameGenerator.genItemName(trans("queryLibrary.unnamed"));
 
   const handleAdd = (type: BottomResTypeEnum, extraInfo?: any) => {
+    // Build basic query DSL
+    let queryDSL: any = {
+      triggerType: "manual",
+      datasourceId: extraInfo?.dataSourceId,
+      compType: extraInfo?.compType,
+    };
+
+    // If it is a REST API created from cURL, pre-populate the HTTP query fields
+    if (extraInfo?.compType === "restApi" && extraInfo?.curlData) {
+      const curlData = extraInfo.curlData;
+
+      const rawHeaders: Record<string, any> | undefined =
+        curlData.header || curlData.headers;
+      const rawParams: Record<string, any> | undefined =
+        curlData.params || curlData.parameters || curlData.query;
+
+      const headersArr = rawHeaders
+        ? Object.entries(rawHeaders).map(([key, value]) => ({ key, value }))
+        : [{ key: "", value: "" }];
+
+      const paramsArr = rawParams
+        ? Object.entries(rawParams).map(([key, value]) => ({ key, value }))
+        : [{ key: "", value: "" }];
+
+      const bodyContent: any =
+        curlData.body ?? curlData.data ?? curlData.postData ?? undefined;
+
+      let bodyType: string = "none";
+      if (bodyContent !== undefined && bodyContent !== "") {
+        const contentTypeHeader =
+          (rawHeaders && (rawHeaders["Content-Type"] || rawHeaders["content-type"])) || "";
+        if (contentTypeHeader) {
+          bodyType = contentTypeHeader;
+        } else if (typeof bodyContent === "object") {
+          bodyType = "application/json";
+        } else {
+          bodyType = "text/plain";
+        }
+      }
+
+      queryDSL = {
+        ...queryDSL,
+        comp: {
+          httpMethod: curlData.method || "GET",
+          path: curlData.url || curlData.path || "",
+          headers: headersArr,
+          params: paramsArr,
+          bodyType: bodyType,
+          body:
+            typeof bodyContent === "object"
+              ? JSON.stringify(bodyContent, null, 2)
+              : bodyContent || "",
+          bodyFormData: [{ key: "", value: "", type: "text" }],
+        },
+      };
+    }
+
     dispatch(
       createQueryLibrary(
         {
           name: newName,
           organizationId: orgId,
           libraryQueryDSL: {
-            query: {
-              triggerType: "manual",
-              datasourceId: extraInfo?.dataSourceId,
-              compType: extraInfo?.compType,
-            },
+            query: queryDSL,
           },
         },
         (resp) => {
@@ -218,7 +271,6 @@ export const QueryLibraryEditor = () => {
             setModify(!modify);
           }, 200);
           setCurrentPage(Math.ceil(elements.total / pageSize));
-
         },
         () => {}
       )

From 16da9fdd739e19f61a1a40163c3f79d7526fae1e Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 20:44:05 +0500
Subject: [PATCH 5/6] curl refactor

---
 .../lowcoder/src/comps/queries/queryComp.tsx  |  69 +++--------
 .../pages/queryLibrary/QueryLibraryEditor.tsx |  60 +++------
 .../packages/lowcoder/src/util/curlUtils.ts   | 116 ++++++++++++++++++
 3 files changed, 148 insertions(+), 97 deletions(-)
 create mode 100644 client/packages/lowcoder/src/util/curlUtils.ts

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 0a674353b..e47694f96 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -64,6 +64,7 @@ import {
 import { QueryContext } from "../../util/context/QueryContext";
 import { useFixedDelay } from "../../util/hooks";
 import { JSONObject, JSONValue } from "../../util/jsonTypes";
+import { processCurlData } from "../../util/curlUtils";
 import { BoolPureControl } from "../controls/boolControl";
 import { millisecondsControl } from "../controls/millisecondControl";
 import { paramsMillisecondsControl } from "../controls/paramsControl";
@@ -744,11 +745,9 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
     const compType = extraInfo?.compType || "js";
     const dataSourceId = extraInfo?.dataSourceId;
     const curlData = extraInfo?.curlData;
-    console.log("CURL DATA", curlData)
+    console.log("CURL DATA", curlData);
 
-
-
-    // Build the payload that will be pushed to the list
+    // Build the basic payload
     let payload: any = {
       id: id,
       name: name,
@@ -761,55 +760,21 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
 
     // If this is a REST API created from cURL, pre-populate the HTTP query fields
     if (compType === "restApi" && curlData) {
-      // Normalize possible field names returned by different curl parsers
-      const rawHeaders: Record<string, any> | undefined =
-        curlData.header || curlData.headers;
-      const rawParams: Record<string, any> | undefined =
-        curlData.params || curlData.parameters || curlData.query;
-
-      // Convert headers & params objects to the key/value array expected by the UI controls
-      const headersArr = rawHeaders
-        ? Object.entries(rawHeaders).map(([key, value]) => ({ key, value }))
-        : [{ key: "", value: "" }];
-
-      const paramsArr = rawParams
-        ? Object.entries(rawParams).map(([key, value]) => ({ key, value }))
-        : [{ key: "", value: "" }];
-
-      // Detect request body – different parsers may expose it under various keys
-      const bodyContent: any =
-        curlData.body ?? curlData.data ?? curlData.postData ?? undefined;
-
-      // Determine body type – prefer the Content-Type header if present
-      let bodyType: string = "none";
-      if (bodyContent !== undefined && bodyContent !== "") {
-        const contentTypeHeader =
-          (rawHeaders && (rawHeaders["Content-Type"] || rawHeaders["content-type"])) ||
-          "";
-        if (contentTypeHeader) {
-          bodyType = contentTypeHeader;
-        } else if (typeof bodyContent === "object") {
-          bodyType = "application/json";
-        } else {
-          bodyType = "text/plain";
-        }
+      const curlConfig = processCurlData(curlData);
+      if (curlConfig) {
+        payload = {
+          ...payload,
+          comp: {
+            httpMethod: curlConfig.method,
+            path: curlConfig.url,
+            headers: curlConfig.headers,
+            params: curlConfig.params,
+            bodyType: curlConfig.bodyType,
+            body: curlConfig.body,
+            bodyFormData: curlConfig.bodyFormData,
+          },
+        };
       }
-
-      payload = {
-        ...payload,
-        comp: {
-          httpMethod: curlData.method || "GET",
-          path: curlData.url || curlData.path || "",
-          headers: headersArr,
-          params: paramsArr,
-          bodyType: bodyType,
-          body:
-            typeof bodyContent === "object"
-              ? JSON.stringify(bodyContent, null, 2)
-              : bodyContent || "",
-          bodyFormData: [{ key: "", value: "", type: "text" }],
-        },
-      };
     }
 
     this.dispatch(
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
index 855603c5b..6d861f735 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx
@@ -48,6 +48,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
 import { Helmet } from "react-helmet";
 import {fetchQLPaginationByOrg} from "@lowcoder-ee/util/pagination/axios";
 import { isEmpty } from "lodash";
+import { processCurlData } from "../../util/curlUtils";
 
 const Wrapper = styled.div`
   display: flex;
@@ -208,52 +209,21 @@ export const QueryLibraryEditor = () => {
 
     // If it is a REST API created from cURL, pre-populate the HTTP query fields
     if (extraInfo?.compType === "restApi" && extraInfo?.curlData) {
-      const curlData = extraInfo.curlData;
-
-      const rawHeaders: Record<string, any> | undefined =
-        curlData.header || curlData.headers;
-      const rawParams: Record<string, any> | undefined =
-        curlData.params || curlData.parameters || curlData.query;
-
-      const headersArr = rawHeaders
-        ? Object.entries(rawHeaders).map(([key, value]) => ({ key, value }))
-        : [{ key: "", value: "" }];
-
-      const paramsArr = rawParams
-        ? Object.entries(rawParams).map(([key, value]) => ({ key, value }))
-        : [{ key: "", value: "" }];
-
-      const bodyContent: any =
-        curlData.body ?? curlData.data ?? curlData.postData ?? undefined;
-
-      let bodyType: string = "none";
-      if (bodyContent !== undefined && bodyContent !== "") {
-        const contentTypeHeader =
-          (rawHeaders && (rawHeaders["Content-Type"] || rawHeaders["content-type"])) || "";
-        if (contentTypeHeader) {
-          bodyType = contentTypeHeader;
-        } else if (typeof bodyContent === "object") {
-          bodyType = "application/json";
-        } else {
-          bodyType = "text/plain";
-        }
+      const curlConfig = processCurlData(extraInfo.curlData);
+      if (curlConfig) {
+        queryDSL = {
+          ...queryDSL,
+          comp: {
+            httpMethod: curlConfig.method,
+            path: curlConfig.url,
+            headers: curlConfig.headers,
+            params: curlConfig.params,
+            bodyType: curlConfig.bodyType,
+            body: curlConfig.body,
+            bodyFormData: curlConfig.bodyFormData,
+          },
+        };
       }
-
-      queryDSL = {
-        ...queryDSL,
-        comp: {
-          httpMethod: curlData.method || "GET",
-          path: curlData.url || curlData.path || "",
-          headers: headersArr,
-          params: paramsArr,
-          bodyType: bodyType,
-          body:
-            typeof bodyContent === "object"
-              ? JSON.stringify(bodyContent, null, 2)
-              : bodyContent || "",
-          bodyFormData: [{ key: "", value: "", type: "text" }],
-        },
-      };
     }
 
     dispatch(
diff --git a/client/packages/lowcoder/src/util/curlUtils.ts b/client/packages/lowcoder/src/util/curlUtils.ts
new file mode 100644
index 000000000..08e0d5792
--- /dev/null
+++ b/client/packages/lowcoder/src/util/curlUtils.ts
@@ -0,0 +1,116 @@
+/**
+ * Utility to convert parsed cURL data from @bany/curl-to-json library
+ * to the format expected by REST API query components
+ */
+
+// Body type mapping to match the dropdown values in httpQuery.tsx
+const CONTENT_TYPE_TO_BODY_TYPE: Record<string, string> = {
+  "application/json": "application/json",
+  "text/plain": "text/plain", 
+  "text/html": "text/plain",
+  "text/xml": "text/plain",
+  "application/xml": "text/plain",
+  "application/x-www-form-urlencoded": "application/x-www-form-urlencoded",
+  "multipart/form-data": "multipart/form-data",
+};
+
+/**
+ * Parse URL-encoded form data - handles both string and object input
+ */
+function parseUrlEncodedData(data: string | object): Array<{ key: string; value: string; type: string }> {
+  if (!data) {
+    return [{ key: "", value: "", type: "text" }];
+  }
+
+  try {
+    let result: Array<{ key: string; value: string; type: string }> = [];
+
+    if (typeof data === 'object') {
+      // @bany/curl-to-json already parsed it into an object
+      Object.entries(data).forEach(([key, value]) => {
+        result.push({
+          key: key,
+          value: decodeURIComponent(String(value).replace(/\+/g, ' ')), // Handle URL encoding
+          type: "text"
+        });
+      });
+    } else if (typeof data === 'string') {
+      // Raw URL-encoded string - use URLSearchParams
+      const params = new URLSearchParams(data);
+      params.forEach((value, key) => {
+        result.push({
+          key: key,
+          value: value,
+          type: "text"
+        });
+      });
+    }
+
+    return result.length > 0 ? result : [{ key: "", value: "", type: "text" }];
+  } catch (error) {
+    console.warn('Failed to parse URL-encoded data:', error);
+    return [{ key: "", value: "", type: "text" }];
+  }
+}
+
+export function processCurlData(curlData: any) {
+  if (!curlData) return null;
+
+  console.log("Raw cURL data:", curlData); // Debug log
+
+  // Convert headers object to key-value array format expected by UI
+  const headers = curlData.header 
+    ? Object.entries(curlData.header).map(([key, value]) => ({ key, value }))
+    : [{ key: "", value: "" }];
+
+  // Convert query params object to key-value array format expected by UI
+  const params = curlData.params
+    ? Object.entries(curlData.params).map(([key, value]) => ({ key, value }))
+    : [{ key: "", value: "" }];
+
+  // Get request body - @bany/curl-to-json may use 'body' or 'data'
+  const bodyContent = curlData.body !== undefined ? curlData.body : curlData.data;
+
+  // Determine body type based on Content-Type header or content structure
+  let bodyType = "none";
+  let bodyFormData = [{ key: "", value: "", type: "text" }];
+  let processedBody = "";
+
+  if (bodyContent !== undefined && bodyContent !== "") {
+    const contentTypeHeader = curlData.header?.["Content-Type"] || curlData.header?.["content-type"];
+    
+    if (contentTypeHeader) {
+      // Extract base content type (remove charset, boundary, etc.)
+      const baseContentType = contentTypeHeader.split(';')[0].trim().toLowerCase();
+      bodyType = CONTENT_TYPE_TO_BODY_TYPE[baseContentType] || "text/plain";
+    } else {
+      // Fallback: infer from content structure
+      if (typeof bodyContent === "object") {
+        bodyType = "application/json";
+      } else {
+        bodyType = "text/plain";
+      }
+    }
+
+    // Handle different body types
+    if (bodyType === "application/x-www-form-urlencoded") {
+      bodyFormData = parseUrlEncodedData(bodyContent);
+      processedBody = ""; // Form data goes in bodyFormData, not body
+      console.log("Parsed form data:", bodyFormData); // Debug log
+    } else if (typeof bodyContent === "object") {
+      processedBody = JSON.stringify(bodyContent, null, 2);
+    } else {
+      processedBody = bodyContent;
+    }
+  }
+
+  return {
+    method: curlData.method || "GET",
+    url: curlData.url || "",
+    headers,
+    params,
+    bodyType,
+    body: processedBody,
+    bodyFormData,
+  };
+} 
\ No newline at end of file

From 12b4b41f15c8dc37351a19f2d0774dc5bc1b1709 Mon Sep 17 00:00:00 2001
From: Faran Javed <faran1997@outlook.com>
Date: Mon, 23 Jun 2025 22:48:48 +0500
Subject: [PATCH 6/6] [Feat] #1799 add simple examples on curl modal

---
 .../lowcoder/src/components/CurlImport.tsx    | 19 +++++++++++++------
 .../src/components/ResCreatePanel.tsx         |  5 -----
 .../packages/lowcoder/src/util/curlUtils.ts   |  2 --
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/client/packages/lowcoder/src/components/CurlImport.tsx b/client/packages/lowcoder/src/components/CurlImport.tsx
index e3b26936b..a15d54bbf 100644
--- a/client/packages/lowcoder/src/components/CurlImport.tsx
+++ b/client/packages/lowcoder/src/components/CurlImport.tsx
@@ -24,7 +24,6 @@ export function CurlImportModal(props: CurlImportModalProps) {
     try {
       // Parse the cURL command using the correct import
       const parsedData = parseCurl(curlCommand);
-      console.log("CURL JSON", parsedData)
 
       
       
@@ -72,15 +71,23 @@ export function CurlImportModal(props: CurlImportModalProps) {
           Paste cURL Command Here
         </div>
         <div style={{ marginBottom: 12, color: "#666", fontSize: "12px" }}>
-          Hint: Try typing in the following curl command and then click on the 'Import' button: 
-          curl -X GET https://mock-api.appsmith.com/users
+          <div style={{ marginBottom: 4 }}>
+            <strong>Examples:</strong>
+          </div>
+          <div style={{ marginBottom: 2 }}>
+            GET: <code>curl -X GET https://jsonplaceholder.typicode.com/posts/1</code>
+          </div>
+          <div style={{ marginBottom: 2 }}>
+            POST: <code>curl -X POST https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -d '&#123;"title":"foo","body":"bar","userId":1&#125;'</code>
+          </div>
+          <div>
+            Users: <code>curl -X GET https://jsonplaceholder.typicode.com/users</code>
+          </div>
         </div>
         <TextArea
           value={curlCommand}
           onChange={(e) => setCurlCommand(e.target.value)}
-          placeholder="curl -X POST \
--H 'Content-Type: application/json' \
-'https://generativelanguage.googleapis.com/v1beta/models/{MODEL_ID}:{GENERATE_CONTENT_API}?key={GEMINI_API_KEY}' -d '@request.json'"
+          placeholder="curl -X GET https://jsonplaceholder.typicode.com/posts/1"
           rows={8}
           style={{ fontFamily: "monospace" }}
         />
diff --git a/client/packages/lowcoder/src/components/ResCreatePanel.tsx b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
index 89a9f545e..04ed9fb79 100644
--- a/client/packages/lowcoder/src/components/ResCreatePanel.tsx
+++ b/client/packages/lowcoder/src/components/ResCreatePanel.tsx
@@ -247,11 +247,6 @@ export function ResCreatePanel(props: ResCreateModalProps) {
   }, 100);
 
   const handleCurlImportSuccess = (parsedData: any) => {
-    // For now just log the result as requested
-    console.log("cURL import successful:", parsedData);
-    
-    // Create a new REST API query with the parsed data
-    // We'll pass the parsed data as extra info to be used when creating the query
     onSelect(BottomResTypeEnum.Query, {
       compType: "restApi", 
       dataSourceId: QUICK_REST_API_ID,
diff --git a/client/packages/lowcoder/src/util/curlUtils.ts b/client/packages/lowcoder/src/util/curlUtils.ts
index 08e0d5792..8e2fd24b7 100644
--- a/client/packages/lowcoder/src/util/curlUtils.ts
+++ b/client/packages/lowcoder/src/util/curlUtils.ts
@@ -56,7 +56,6 @@ function parseUrlEncodedData(data: string | object): Array<{ key: string; value:
 export function processCurlData(curlData: any) {
   if (!curlData) return null;
 
-  console.log("Raw cURL data:", curlData); // Debug log
 
   // Convert headers object to key-value array format expected by UI
   const headers = curlData.header 
@@ -96,7 +95,6 @@ export function processCurlData(curlData: any) {
     if (bodyType === "application/x-www-form-urlencoded") {
       bodyFormData = parseUrlEncodedData(bodyContent);
       processedBody = ""; // Form data goes in bodyFormData, not body
-      console.log("Parsed form data:", bodyFormData); // Debug log
     } else if (typeof bodyContent === "object") {
       processedBody = JSON.stringify(bodyContent, null, 2);
     } else {