Components / AI Agents

AI Agent Configuration

A configuration form for setting up AI agents with model selection, temperature, and behavior presets.

Live Preview — ai-agent-config-01

Agent Configuration

0.7
PRECISECREATIVE

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-agent-config-01.tsx 
"use client";

import React, { useState } from "react";
import { Settings, Sliders, Shield, Brain } from "lucide-react";

export default function AIAgentConfig() {
    const [temp, setTemp] = useState(0.7);
    const [model, setModel] = useState("gpt-4o");

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-sm mx-auto">
            <div className="flex items-center gap-2 mb-8">
                <Settings className="h-4 w-4 text-zinc-500" />
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100">Agent Configuration</h3>
            </div>

            <div className="space-y-6">
                <div>
                    <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 mb-3 block">Base Model</label>
                    <div className="grid grid-cols-2 gap-2">
                        <button
                            onClick={() => setModel("gpt-4o")}
                            className={`p-2 rounded-lg border text-xs font-bold transition-all ${model === "gpt-4o" ? "bg-zinc-900 text-white border-zinc-900" : "bg-white text-zinc-600 border-zinc-200 hover:border-zinc-300"
                                }`}
                        >
                            GPT-4o
                        </button>
                        <button
                            onClick={() => setModel("claude-3")}
                            className={`p-2 rounded-lg border text-xs font-bold transition-all ${model === "claude-3" ? "bg-zinc-900 text-white border-zinc-900" : "bg-white text-zinc-600 border-zinc-200 hover:border-zinc-300"
                                }`}
                        >
                            Claude 3.5
                        </button>
                    </div>
                </div>

                <div>
                    <div className="flex items-center justify-between mb-3">
                        <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500">Creativity (Temp)</label>
                        <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{temp}</span>
                    </div>
                    <input
                        type="range"
                        min="0"
                        max="1"
                        step="0.1"
                        value={temp}
                        onChange={(e) => setTemp(parseFloat(e.target.value))}
                        className="w-full h-1.5 bg-zinc-100 dark:bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-zinc-900"
                    />
                    <div className="flex justify-between mt-2 text-[9px] text-zinc-400 font-bold">
                        <span>PRECISE</span>
                        <span>CREATIVE</span>
                    </div>
                </div>

                <div className="space-y-2">
                    <label className="text-[10px] font-black uppercase tracking-widest text-zinc-500 block">Behavior Presets</label>
                    <div className="space-y-1.5">
                        {[
                            { icon: <Shield className="h-3.5 w-3.5" />, label: "Safety First" },
                            { icon: <Brain className="h-3.5 w-3.5" />, label: "Logical Reasoning" },
                            { icon: <Sliders className="h-3.5 w-3.5" />, label: "Maximum Verbosity" },
                        ].map((p, i) => (
                            <button key={i} className="w-full flex items-center gap-3 px-3 py-2 rounded-lg border border-zinc-100 dark:border-zinc-800 text-xs text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 transition-colors">
                                {p.icon}
                                <span className="font-medium">{p.label}</span>
                            </button>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIAgentConfig() None

State Management

React state variables managed within this component.

Variable Initial Value
temp 0.7
model "gpt-4o"

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<Brain> 1× Library lucide-react
<Settings> 1× Library lucide-react
<Shield> 1× Library lucide-react
<Sliders> 1× Library lucide-react
<button> 3× Native Native HTML
<div> 10× Native Native HTML
<h3> 1× Native Native HTML
<input> 1× Native Native HTML
<label> 3× Native Native HTML
<span> 4× Native Native HTML

Related Components

  • AI Agent Card — A card displaying an AI agent's profile with capabilities, status indicator, and quick-action buttons.
  • AI Agent Workflow — A step-by-step workflow visualization showing AI agent task execution with progress and status updates.
  • AI Tool Selector — A tool selection interface for configuring AI agent capabilities with toggle switches and descriptions.
  • AI Agent Execution Log — A detailed execution log showing AI agent reasoning steps, tool calls, and decision traces.
  • AI Agent Memory Panel — A memory management panel showing stored context, conversation history, and knowledge base entries.
  • AI Task Queue — A priority task queue showing pending, active, and completed AI agent tasks with progress indicators.