Agent create
Set up a new agent, by describing it in a sentence or filling in its name, instructions, model and tools, with a preview to try it as you go.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/agent-create-form.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/agent-create-form.json
Usage & API
Example
import { AgentAvatar } from "@/components/ai/agent-create-form"
<AgentAvatar
tone={tone}
icon={icon}
/>Props AgentAvatar
| Prop | Type & description | Required |
|---|---|---|
tone | AgentTone | Required |
icon | AgentIconId | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The form is a long page with a sticky bar: the workspace context you pass, an unsaved-changes note, and Create agent, which becomes Creating, then Saved or Save changes. Name and the short description are required in the sense that an empty name blocks the button, and instructions under 40 characters say how many are left. Over the maximum, they say so too. Change avatar opens colour and icon choices. The model is a list with a note per option. Tools are toggles grouped by app. Conversation starters show a count against the cap, a field whose placeholder asks for a question someone would ask, and Alt plus arrow keys to reorder. Knowledge has an attach action. Preview is a chat with the agent's mark, a restart control, and send. Improve sits on the instructions, with Stop while it types and Undo after.
Example
import { AgentAvatar } from "@/components/ai/agent-create-describe"
<AgentAvatar
tone={tone}
icon={icon}
/>Props AgentAvatar
| Prop | Type & description | Required |
|---|---|---|
tone | DescribeTone | Required |
icon | DescribeIcon | Required |
size | number | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Describe opens on a prompt, with example chips that fill it, and Ctrl to submit. While generate runs, the draft appears in steps and the field says it is writing. The result shows the name, the instructions, the tools or a line that it can only write text, and how often it runs. A tool can be removed. The schedule control sets the frequency and, when it is weekly, the days. A follow-up box asks for a change, and hints under it apply in one click. Apply change is disabled until there is text. The summary of a revision says what moved. Create agent waits on your promise. Run now then shows Running and the line you resolve with. The header says who the agent runs as, when you pass that.
Choosing a layout
Use the form when the person already knows the name, the model and the tools, and wants to try a message before saving. Use describe when the person can say the job in a sentence and would rather edit the draft than start from empty fields. The revise box is for the second sentence, not for a blank form.
Changing one step of a workflow that already exists is the step inspector. Choosing which files an existing project may read is knowledge sources. Create is the first screen, before there is a run to recover or an inbox entry to open.
Does Improve call a model from this file?
It calls onImprove with the current instructions and types whatever string you return. Stop cuts the typing short. Undo restores the text from before that rewrite. The preview chat is the same idea: reply is your function, not a network call inside the component.
What does describe change when someone asks for a follow-up?
Revise receives the request and the current draft and must return the next draft, the fields that changed among name, instructions, tools and schedule, and a summary line. The screen applies that draft and shows the summary. It does not merge the sentence in itself.