From ff866aae7bf5964a61fc4ca5c81c9524ba83ea69 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Wed, 1 Oct 2025 18:30:34 -0700
Subject: [PATCH] feat(create_key_button.tsx): add tpm/rpm rate limit type
 options to UI

allows user to set the type of tpm/rpm limit they're trying to set
---
 .../organisms/create_key_button.tsx           | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
index dc523da7667..0ab8b25c1fe 100644
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@@ -810,6 +810,46 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
+                  <Form.Item
+                    label={
+                      <span>
+                        TPM Rate Limit Type {' '}
+                        <Tooltip title="Select 'guaranteed_throughput' to prevent overallocating TPM limit when the key belongs to a Team with specific TPM limits.">
+                          <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+                        </Tooltip>
+                      </span>
+                    }
+                    name="tpm_limit_type"
+                    initialValue="default"
+                    className="mt-4"
+                  >
+                    <Select 
+                      defaultValue="default" 
+                      placeholder="Select rate limit type" 
+                      style={{ width: "100%" }}
+                      optionLabelProp="label"
+                      onChange={(value) => {
+                        form.setFieldValue('tpm_limit_type', value);
+                      }}
+                    >
+                      <Option value="default" label="Default">
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ fontWeight: 500 }}>Default</div>
+                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                            Best effort throughput - no error if we're overallocating tpm (Team/Key Limits checked at runtim).
+                          </div>
+                        </div>
+                      </Option>
+                      <Option value="guaranteed_throughput" label="Guaranteed throughput">
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
+                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                            Guaranteed throughput - raise an error if we're overallocating tpm (also checks model-specific limits)
+                          </div>
+                        </div>
+                      </Option>
+                    </Select>
+                  </Form.Item>
                   <Form.Item
                     className="mt-4"
                     label={
@@ -841,6 +881,46 @@ const CreateKey: React.FC<CreateKeyProps> = ({
                   >
                     <NumericalInput step={1} width={400} />
                   </Form.Item>
+                  <Form.Item
+                    label={
+                      <span>
+                        RPM Rate Limit Type {' '}
+                        <Tooltip title="Select 'guaranteed_throughput' to prevent overallocating RPM limit when the key belongs to a Team with specific RPM limits.">
+                          <InfoCircleOutlined style={{ marginLeft: '4px' }} />
+                        </Tooltip>
+                      </span>
+                    }
+                    name="rpm_limit_type"
+                    initialValue="default"
+                    className="mt-4"
+                  >
+                    <Select 
+                      defaultValue="default" 
+                      placeholder="Select rate limit type" 
+                      style={{ width: "100%" }}
+                      optionLabelProp="label"
+                      onChange={(value) => {
+                        form.setFieldValue('rpm_limit_type', value);
+                      }}
+                    >
+                      <Option value="default" label="Default">
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ fontWeight: 500 }}>Default</div>
+                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                            Best effort throughput - no error if we're overallocating rpm (Team/Key Limits checked at runtim).
+                          </div>
+                        </div>
+                      </Option>
+                      <Option value="guaranteed_throughput" label="Guaranteed throughput">
+                        <div style={{ padding: '4px 0' }}>
+                          <div style={{ fontWeight: 500 }}>Guaranteed throughput</div>
+                          <div style={{ fontSize: '11px', color: '#6b7280', marginTop: '2px' }}>
+                            Guaranteed throughput - raise an error if we're overallocating rpm (also checks model-specific limits)
+                          </div>
+                        </div>
+                      </Option>
+                    </Select>
+                  </Form.Item>
                   <Form.Item 
                     label={
                       <span>