Secrets manager
API keys and tokens an agent can use, masked by default and scoped per environment, plus a safe way to hand one over mid-run.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/secrets-manager-table.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/secrets-manager-table.json
Usage & API
Example
import { SecretsTable } from "@/components/ai/secrets-manager-table"
<SecretsTable
secrets={[]}
onAdd={() => {}}
onRotate={() => {}}
onDelete={() => {}}
/>Props SecretsTable
| Prop | Type & description | Required |
|---|---|---|
secrets | Secret[] | Required |
onAdd | (s: { name: string; value: string; envs: SecretEnv[] }) => void | Required |
onRotate | (name: string, value: string) => void | Required |
onDelete | (name: string) => void | Required |
revealFor | numberSeconds a revealed value stays visible. | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The table is titled Secrets, with Add secret, a search over names or tools, and environment chips. Columns cover the name, the masked value, the environments, last used and updated. Never used shows when no tool has read it. The row menu can reveal, copy, rotate or delete. Reveal hides itself again when the timer ends. Add asks for a name, a value and at least one environment. Rotate replaces the value and keeps the name. Delete asks you to confirm, then calls onDelete. The preview sits under project settings for a support-agent project. Search with no matches can be cleared.
Example
import { SecretRequest } from "@/components/ai/secrets-manager-request"
<SecretRequest
tool="…"
secretName="…"
environment="…"
can={[]}
status={status}
onProvide={() => {}}
onDecline={() => {}}
/>Props SecretRequest
| Prop | Type & description | Required |
|---|---|---|
tool | string | Required |
secretName | string | Required |
environment | string | Required |
can | string[]What the key lets the tool do. | Required |
cannot | string[] | Optional |
status | SecretRequestStatus | Required |
saved | booleanWhether the provided value was saved to project secrets. | Optional |
onProvide | (value: string, save: boolean) => void | Required |
onDecline | () => void | Required |
onReopen | () => void | Optional |
placeholder | string | Optional |
check | (value: string) => stringReturn a message to block or warn; prefix with "!" to block. | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The card says the tool needs the secret, and that the run is paused until you answer, naming the environment. Two lists show what it can do and what it cannot, with a check and a cross. The value field is a password input with a show and hide button, and a placeholder such as a key prefix. Under it, the idle line says the value goes to the vault. A check message replaces that line, in a warning colour, or in a blocking colour when it begins with an exclamation mark, and Provide key stays disabled while it blocks or while the field is empty. Save to project secrets is a checkbox. Decline is the other action. After a provide, the card collapses to a saved or a one-time confirmation. After a decline, it says so and can be reopened.
Choosing a layout
Use the table on the project settings page, where someone adds a key once and attaches it to environments. Use the request when a run has stopped because a key is missing, and the person should see what the tool will be allowed to do before pasting it. Saving from the request is optional. The checkbox is on by default and can be turned off so the value is only for this run.
A connected account with folders and a sync history is connector sync, not a secret. The secret is the credential. The sync screen is the account after the credential exists. Do not use the request card as a general password form. It is specifically a paused tool call that names the secret and the environment.
How long does a revealed secret stay on screen?
For the number of seconds in revealFor, which defaults to five. Then the cell masks again. The request card is different: Show value stays on until the person toggles it or the card leaves the pending state.
What is stored if Save to project secrets is off?
The request still calls onProvide with the value and false. The table is not updated by the card. Only your handler can write the secret, and only if you choose to when that flag is true.