# AI Node Config Panel

Agent workflow editor: selecting an LLM node edits the model, temperature, prompts and JSON output.

- id: `ai-node-config-panel`
- Page: https://agentic-ui-kit.com/components/ai-node-config-panel
- Live preview: https://agentic-ui-kit.com/live/component/ai-node-config-panel

## Install

```bash
agentic-ui add ai-node-config-panel
npx shadcn@4.17.0 add @agentic-ui/ai-node-config-panel
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** schema-generated-form, per-kind-configuration, grouped-fieldsets, conditional-fields, inline-validation, validation-summary, dirty-state, save-reset, async-save-error, read-only-mode, keyboard-shortcuts, empty-state, loading-state, error-state
- **Intents:** configure, create-edit, orchestrate-agents
- **Suits domains:** ai-agents, ai-workspace, devtools, operations, saas
- **Interaction:** schema-form, inline-validation, conditional-fields, keyboard-save, close-on-escape
- **Screen role:** detail
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** agent workflow editor: selecting an LLM node edits the model, temperature, prompts and JSON output, automation builder where each plugin registers its schema and the panel generates the form without new code, configuring a webhook or cron trigger with pattern validation and conditional fields, human approval node with a list of approvers and an expiration policy
- **Avoid when:** the configuration is a fixed single-screen form with no variation by type (use a settings form), editing deeply nested structures or arbitrary objects is required (use a JSON editor or code-json-viewer), the goal is the canvas with nodes and connections (use ai-workflow-canvas / ai-workflow-node-set)
- **Preserve when adapting:** schema-to-widget-mapping, validation-and-summary-contract, dirty-save-reset-lifecycle, keyboard-contract, focus-management
- **Replace when adapting:** node-schemas, domain-copy, model-and-tool-options, persistence-adapter
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9.2/10
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** badge, button, input, label, switch, textarea
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** form-validation-summary, lib-primitives