From 1ceb7d8e29aa543522118ada992467d31d4f9a55 Mon Sep 17 00:00:00 2001
From: Sameer Kankute <sameer@berri.ai>
Date: Thu, 19 Feb 2026 12:48:27 +0530
Subject: [PATCH] Add default query param in UI

---
 .../src/components/add_pass_through.tsx       | 29 ++++++++++
 .../src/components/pass_through_settings.tsx  |  1 +
 .../src/components/query_param_input.tsx      | 57 +++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/query_param_input.tsx

diff --git a/ui/litellm-dashboard/src/components/add_pass_through.tsx b/ui/litellm-dashboard/src/components/add_pass_through.tsx
index 07850bca087..af55a7919a9 100644
--- a/ui/litellm-dashboard/src/components/add_pass_through.tsx
+++ b/ui/litellm-dashboard/src/components/add_pass_through.tsx
@@ -23,6 +23,7 @@ import {
   ApiOutlined,
 } from "@ant-design/icons";
 import KeyValueInput from "./key_value_input";
+import QueryParamInput from "./query_param_input";
 import { passThroughItem } from "./pass_through_settings";
 import RoutePreview from "./route_preview";
 import NotificationsManager from "./molecules/notifications_manager";
@@ -295,6 +296,34 @@ const AddPassThroughEndpoint: React.FC<AddFallbacksProps> = ({
               </Form.Item>
             </Card>
 
+            {/* Default Query Parameters Section */}
+            <Card className="p-6">
+              <Title className="text-lg font-semibold text-gray-900 mb-2">Default Query Parameters</Title>
+              <Subtitle className="text-gray-600 mb-6">
+                Add query parameters that will be automatically sent with every request to the target API
+              </Subtitle>
+
+              <Form.Item
+                label={
+                  <span className="text-sm font-medium text-gray-700 flex items-center">
+                    Default Query Parameters (Optional)
+                    <Tooltip title="Query parameters that will be added to all requests. Clients can override these by providing their own values.">
+                      <InfoCircleOutlined className="ml-2 text-blue-400 hover:text-blue-600 cursor-help" />
+                    </Tooltip>
+                  </span>
+                }
+                name="default_query_params"
+                extra={
+                  <div className="text-xs text-gray-500 mt-2">
+                    <div className="font-medium mb-1">Parameters are sent with all GET, POST, PUT, PATCH requests</div>
+                    <div>Client parameters override defaults. Examples: version=v1, format=json, key=default</div>
+                  </div>
+                }
+              >
+                <QueryParamInput />
+              </Form.Item>
+            </Card>
+
             {/* Security Section */}
             <PassThroughSecuritySection
               premiumUser={premiumUser}
diff --git a/ui/litellm-dashboard/src/components/pass_through_settings.tsx b/ui/litellm-dashboard/src/components/pass_through_settings.tsx
index 4c2de266384..d60caa54667 100644
--- a/ui/litellm-dashboard/src/components/pass_through_settings.tsx
+++ b/ui/litellm-dashboard/src/components/pass_through_settings.tsx
@@ -41,6 +41,7 @@ export interface passThroughItem {
   auth?: boolean;
   methods?: string[];
   guardrails?: Record<string, { request_fields?: string[]; response_fields?: string[] } | null>;
+  default_query_params?: Record<string, string>;
 }
 
 // Password field component for headers
diff --git a/ui/litellm-dashboard/src/components/query_param_input.tsx b/ui/litellm-dashboard/src/components/query_param_input.tsx
new file mode 100644
index 00000000000..4a98ab48bca
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/query_param_input.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { Button, Space } from "antd";
+import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
+import { TextInput } from "@tremor/react";
+
+interface QueryParamInputProps {
+  value?: Record<string, string>;
+  onChange?: (value: Record<string, string>) => void;
+}
+
+const QueryParamInput: React.FC<QueryParamInputProps> = ({ value = {}, onChange }) => {
+  const [pairs, setPairs] = useState<[string, string][]>(Object.entries(value));
+
+  const handleAdd = () => {
+    setPairs([...pairs, ["", ""]]);
+  };
+
+  const handleRemove = (index: number) => {
+    const newPairs = pairs.filter((_, i) => i !== index);
+    setPairs(newPairs);
+    onChange?.(Object.fromEntries(newPairs));
+  };
+
+  const handleChange = (index: number, key: string, val: string) => {
+    const newPairs = [...pairs];
+    newPairs[index] = [key, val];
+    setPairs(newPairs);
+    onChange?.(Object.fromEntries(newPairs));
+  };
+
+  return (
+    <div>
+      {pairs.map(([key, val], index) => (
+        <Space key={index} style={{ display: "flex", marginBottom: 8 }} align="center">
+          <TextInput
+            placeholder="Parameter Name (e.g., version)"
+            value={key}
+            onChange={(e) => handleChange(index, e.target.value, val)}
+          />
+          <TextInput
+            placeholder="Parameter Value (e.g., v1)"
+            value={val}
+            onChange={(e) => handleChange(index, key, e.target.value)}
+          />
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
+            <MinusCircleOutlined onClick={() => handleRemove(index)} style={{ cursor: "pointer" }} />
+          </div>
+        </Space>
+      ))}
+      <Button type="dashed" onClick={handleAdd} icon={<PlusOutlined />}>
+        Add Query Parameter
+      </Button>
+    </div>
+  );
+};
+
+export default QueryParamInput;
\ No newline at end of file