diff --git a/ui/lib/apps/DebugAPI/apilist/ApiForm.tsx b/ui/lib/apps/DebugAPI/apilist/ApiForm.tsx
index 18acf4edea..59fcdca21e 100644
--- a/ui/lib/apps/DebugAPI/apilist/ApiForm.tsx
+++ b/ui/lib/apps/DebugAPI/apilist/ApiForm.tsx
@@ -15,6 +15,7 @@ import {
   createFormWidget,
   ParamModelType,
 } from './widgets'
+import { distro } from '@lib/utils/i18n'
 
 export interface Topology {
   tidb: TopologyTiDBInfo[]
@@ -33,7 +34,10 @@ export default function ApiForm({
   const [form] = Form.useForm()
   const { t } = useTranslation()
   const { id, path_params, query_params, component } = endpoint
-  const endpointHostParamKey = useMemo(() => `${component}_host`, [component])
+  const endpointHostParamKey = useMemo(
+    () => `${distro[component!]?.toLowerCase()}_host`,
+    [component]
+  )
   const pathParams = (path_params ?? []).map((p) => {
     p.required = true
     return p
diff --git a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
index b62111e30f..e1605a3954 100644
--- a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
+++ b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
@@ -14,6 +14,7 @@ import client, { EndpointAPIModel } from '@lib/client'
 import style from './ApiList.module.less'
 import ApiForm, { Topology } from './ApiForm'
 import { buildQueryString } from './widgets'
+import { distro } from '@lib/utils/i18n'
 
 const getEndpointTranslationKey = (endpoint: EndpointAPIModel) =>
   `debug_api.${endpoint.component}.endpoints.${endpoint.id}`
@@ -211,7 +212,9 @@ function Schema({ endpoint }: { endpoint: EndpointAPIModel }) {
   const query = buildQueryString(endpoint.query_params ?? [])
   return (
     <p className={style.schema}>
-      {`http://{${endpoint.component}_host}${endpoint.path}${query}`}
+      {`http://{${distro[endpoint.component!]?.toLowerCase()}_host}${
+        endpoint.path
+      }${query}`}
     </p>
   )
 }
diff --git a/ui/lib/apps/DebugAPI/apilist/widgets/Host.tsx b/ui/lib/apps/DebugAPI/apilist/widgets/Host.tsx
index 14387a610f..b694986d93 100644
--- a/ui/lib/apps/DebugAPI/apilist/widgets/Host.tsx
+++ b/ui/lib/apps/DebugAPI/apilist/widgets/Host.tsx
@@ -3,6 +3,7 @@ import { Select } from 'antd'
 import { useTranslation } from 'react-i18next'
 
 import type { ApiFormWidget } from './index'
+import { distro } from '@lib/utils/i18n'
 
 const portKeys: { [k: string]: string } = {
   tidb: 'status_port',
@@ -20,7 +21,7 @@ export const HostSelectWidget: ApiFormWidget = ({ endpoint, topology }) => {
     <Select
       showSearch
       placeholder={t(`debug_api.widgets.host_select_placeholder`, {
-        endpointType: endpoint.component,
+        endpointType: distro[endpoint.component!]?.toLowerCase(),
       })}
     >
       {componentEndpoints.map((d) => {
diff --git a/ui/lib/utils/i18n.ts b/ui/lib/utils/i18n.ts
index 1a6e8ee24a..9f67a18041 100644
--- a/ui/lib/utils/i18n.ts
+++ b/ui/lib/utils/i18n.ts
@@ -59,3 +59,5 @@ i18next
       defaultVariables: { distro },
     },
   })
+
+export { distro }