diff --git a/frontend/src/components/PredefinedAgentsModal.tsx b/frontend/src/components/PredefinedAgentsModal.tsx
new file mode 100644
index 0000000..f0b92d1
--- /dev/null
+++ b/frontend/src/components/PredefinedAgentsModal.tsx
@@ -0,0 +1,429 @@
+import { useState, useMemo } from "react";
+import { 
+  PREDEFINED_AGENTS_LIBRARY, 
+  AgentCategory, 
+  PredefinedAgent,
+  getAgentsByCategory,
+  getAgentsByDifficulty,
+  searchAgents,
+  getPopularTags,
+  convertPredefinedToAgent
+} from "../config/predefinedAgents";
+
+interface PredefinedAgentsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelectAgent: (agent: PredefinedAgent, customEndpoint?: string) => void;
+}
+
+export function PredefinedAgentsModal({ isOpen, onClose, onSelectAgent }: PredefinedAgentsModalProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState<AgentCategory | "all">("all");
+  const [selectedDifficulty, setSelectedDifficulty] = useState<"all" | "beginner" | "intermediate" | "advanced">("all");
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const [customEndpoint, setCustomEndpoint] = useState("");
+  const [selectedAgent, setSelectedAgent] = useState<PredefinedAgent | null>(null);
+
+  const popularTags = useMemo(() => getPopularTags(), []);
+
+  const filteredAgents = useMemo(() => {
+    let agents = PREDEFINED_AGENTS_LIBRARY;
+
+    // Filter by search query and tags
+    if (searchQuery || selectedTags.length > 0) {
+      agents = searchAgents(searchQuery, selectedTags);
+    }
+
+    // Filter by category
+    if (selectedCategory !== "all") {
+      agents = agents.filter(agent => agent.category === selectedCategory);
+    }
+
+    // Filter by difficulty
+    if (selectedDifficulty !== "all") {
+      agents = agents.filter(agent => agent.difficulty === selectedDifficulty);
+    }
+
+    return agents;
+  }, [searchQuery, selectedCategory, selectedDifficulty, selectedTags]);
+
+  const categoryStats = useMemo(() => {
+    const stats: Record<string, number> = {};
+    Object.values(AgentCategory).forEach(category => {
+      stats[category] = getAgentsByCategory(category).length;
+    });
+    return stats;
+  }, []);
+
+  const difficultyStats = useMemo(() => {
+    return {
+      beginner: getAgentsByDifficulty("beginner").length,
+      intermediate: getAgentsByDifficulty("intermediate").length,
+      advanced: getAgentsByDifficulty("advanced").length,
+    };
+  }, []);
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags(prev => 
+      prev.includes(tag) 
+        ? prev.filter(t => t !== tag)
+        : [...prev, tag]
+    );
+  };
+
+  const clearFilters = () => {
+    setSearchQuery("");
+    setSelectedCategory("all");
+    setSelectedDifficulty("all");
+    setSelectedTags([]);
+  };
+
+  const handleSelectAgent = (agent: PredefinedAgent) => {
+    setSelectedAgent(agent);
+  };
+
+  const handleConfirmSelection = () => {
+    if (selectedAgent) {
+      onSelectAgent(selectedAgent, customEndpoint || undefined);
+      onClose();
+      setSelectedAgent(null);
+      setCustomEndpoint("");
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden">
+        {/* Header */}
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
+                Predefined Agents Library
+              </h2>
+              <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+                Choose from our curated collection of specialized AI agents
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar Filters */}
+          <div className="w-80 p-6 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
+            {/* Search */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Search Agents
+              </label>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search by name, description, or capabilities..."
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+              />
+            </div>
+
+            {/* Category Filter */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Category
+              </label>
+              <select
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value as AgentCategory | "all")}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+              >
+                <option value="all">All Categories ({PREDEFINED_AGENTS_LIBRARY.length})</option>
+                {Object.values(AgentCategory).map(category => (
+                  <option key={category} value={category}>
+                    {category.charAt(0).toUpperCase() + category.slice(1)} ({categoryStats[category]})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Difficulty Filter */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Difficulty Level
+              </label>
+              <select
+                value={selectedDifficulty}
+                onChange={(e) => setSelectedDifficulty(e.target.value as "all" | "beginner" | "intermediate" | "advanced")}
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+              >
+                <option value="all">All Levels</option>
+                <option value="beginner">Beginner ({difficultyStats.beginner})</option>
+                <option value="intermediate">Intermediate ({difficultyStats.intermediate})</option>
+                <option value="advanced">Advanced ({difficultyStats.advanced})</option>
+              </select>
+            </div>
+
+            {/* Popular Tags */}
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                Popular Tags
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {popularTags.slice(0, 12).map(tag => (
+                  <button
+                    key={tag}
+                    onClick={() => toggleTag(tag)}
+                    className={`px-2 py-1 text-xs rounded-md transition-colors ${
+                      selectedTags.includes(tag)
+                        ? "bg-blue-500 text-white"
+                        : "bg-gray-100 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-500"
+                    }`}
+                  >
+                    {tag}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Clear Filters */}
+            {(searchQuery || selectedCategory !== "all" || selectedDifficulty !== "all" || selectedTags.length > 0) && (
+              <button
+                onClick={clearFilters}
+                className="w-full px-3 py-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-200 dark:border-blue-600 rounded-md hover:bg-blue-50 dark:hover:bg-blue-900/20"
+              >
+                Clear All Filters
+              </button>
+            )}
+          </div>
+
+          {/* Main Content */}
+          <div className="flex-1 overflow-y-auto">
+            {selectedAgent ? (
+              /* Agent Details View */
+              <div className="p-6">
+                <div className="mb-6">
+                  <button
+                    onClick={() => setSelectedAgent(null)}
+                    className="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-4"
+                  >
+                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                    </svg>
+                    Back to library
+                  </button>
+
+                  <div className="flex items-start space-x-4">
+                    <div className={`text-4xl p-3 rounded-lg ${selectedAgent.color}`}>
+                      {selectedAgent.icon}
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                        {selectedAgent.name}
+                      </h3>
+                      <p className="text-gray-600 dark:text-gray-400 mb-4">
+                        {selectedAgent.description}
+                      </p>
+                      <div className="flex items-center space-x-4 text-sm">
+                        <span className={`px-2 py-1 rounded-md text-white ${
+                          selectedAgent.difficulty === "beginner" ? "bg-green-500" :
+                          selectedAgent.difficulty === "intermediate" ? "bg-yellow-500" : "bg-red-500"
+                        }`}>
+                          {selectedAgent.difficulty}
+                        </span>
+                        <span className="text-gray-500 dark:text-gray-400">
+                          {selectedAgent.category.charAt(0).toUpperCase() + selectedAgent.category.slice(1)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  <div>
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Specialization</h4>
+                    <p className="text-gray-600 dark:text-gray-400 mb-4">{selectedAgent.specialization}</p>
+
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Capabilities</h4>
+                    <div className="flex flex-wrap gap-2 mb-4">
+                      {selectedAgent.capabilities.map(capability => (
+                        <span 
+                          key={capability}
+                          className="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-md"
+                        >
+                          {capability}
+                        </span>
+                      ))}
+                    </div>
+
+                    <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Example Tasks</h4>
+                    <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+                      {selectedAgent.exampleTasks.map((task, index) => (
+                        <li key={index} className="flex items-start">
+                          <span className="text-blue-500 mr-2">•</span>
+                          {task}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <div>
+                    {selectedAgent.prerequisites && (
+                      <>
+                        <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Prerequisites</h4>
+                        <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 mb-4">
+                          {selectedAgent.prerequisites.map((prereq, index) => (
+                            <li key={index} className="flex items-start">
+                              <span className="text-orange-500 mr-2">⚠</span>
+                              {prereq}
+                            </li>
+                          ))}
+                        </ul>
+                      </>
+                    )}
+
+                    {selectedAgent.setupInstructions && (
+                      <>
+                        <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Setup Instructions</h4>
+                        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">{selectedAgent.setupInstructions}</p>
+                      </>
+                    )}
+
+                    {selectedAgent.usageNotes && (
+                      <>
+                        <h4 className="font-semibold text-gray-900 dark:text-white mb-2">Usage Notes</h4>
+                        <p className="text-sm text-gray-600 dark:text-gray-400">{selectedAgent.usageNotes}</p>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {/* Configuration */}
+                <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                  <h4 className="font-semibold text-gray-900 dark:text-white mb-3">Configuration</h4>
+                  <div className="space-y-3">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        API Endpoint (Optional)
+                      </label>
+                      <input
+                        type="text"
+                        value={customEndpoint}
+                        onChange={(e) => setCustomEndpoint(e.target.value)}
+                        placeholder={selectedAgent.defaultApiEndpoint}
+                        className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white text-sm"
+                      />
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        Leave empty to use default: {selectedAgent.defaultApiEndpoint}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Add Agent Button */}
+                <div className="mt-6 flex justify-end space-x-3">
+                  <button
+                    onClick={() => setSelectedAgent(null)}
+                    className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleConfirmSelection}
+                    className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md font-medium transition-colors"
+                  >
+                    Add Agent
+                  </button>
+                </div>
+              </div>
+            ) : (
+              /* Agent Grid View */
+              <div className="p-6">
+                <div className="mb-4">
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {filteredAgents.length} agent{filteredAgents.length !== 1 ? 's' : ''} found
+                  </p>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                  {filteredAgents.map(agent => (
+                    <div
+                      key={agent.id}
+                      onClick={() => handleSelectAgent(agent)}
+                      className="p-4 border border-gray-200 dark:border-gray-600 rounded-lg hover:border-blue-300 dark:hover:border-blue-500 cursor-pointer transition-colors hover:shadow-md"
+                    >
+                      <div className="flex items-start space-x-3">
+                        <div className={`text-2xl p-2 rounded-lg ${agent.color}`}>
+                          {agent.icon}
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <h3 className="font-semibold text-gray-900 dark:text-white truncate">
+                            {agent.name}
+                          </h3>
+                          <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mt-1">
+                            {agent.description}
+                          </p>
+                          <div className="flex items-center space-x-2 mt-2">
+                            <span className={`px-2 py-1 text-xs rounded-md text-white ${
+                              agent.difficulty === "beginner" ? "bg-green-500" :
+                              agent.difficulty === "intermediate" ? "bg-yellow-500" : "bg-red-500"
+                            }`}>
+                              {agent.difficulty}
+                            </span>
+                            <span className="text-xs text-gray-500 dark:text-gray-400">
+                              {agent.category}
+                            </span>
+                          </div>
+                          <div className="flex flex-wrap gap-1 mt-2">
+                            {agent.tags.slice(0, 3).map(tag => (
+                              <span 
+                                key={tag}
+                                className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded"
+                              >
+                                {tag}
+                              </span>
+                            ))}
+                            {agent.tags.length > 3 && (
+                              <span className="px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400">
+                                +{agent.tags.length - 3}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {filteredAgents.length === 0 && (
+                  <div className="text-center py-12">
+                    <div className="text-gray-400 dark:text-gray-500 text-4xl mb-4">🔍</div>
+                    <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+                      No agents found
+                    </h3>
+                    <p className="text-gray-600 dark:text-gray-400 mb-4">
+                      Try adjusting your search criteria or filters.
+                    </p>
+                    <button
+                      onClick={clearFilters}
+                      className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+                    >
+                      Clear all filters
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 1b2f346..a2a9558 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -1,8 +1,10 @@
-import { X, RotateCcw, Plus, Edit3, Trash2 } from "lucide-react";
+import { X, RotateCcw, Plus, Edit3, Trash2, Library } from "lucide-react";
 import { useState, useEffect } from "react";
 import { ThemeToggle } from "./chat/ThemeToggle";
 import { useTheme } from "../hooks/useTheme";
 import { useAgentConfig, type Agent } from "../hooks/useAgentConfig";
+import { PredefinedAgentsModal } from "./PredefinedAgentsModal";
+import { convertPredefinedToAgent, type PredefinedAgent } from "../config/predefinedAgents";
 
 interface SettingsModalProps {
   isOpen: boolean;
@@ -16,12 +18,14 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
   // Local state for modal management
   const [editingAgent, setEditingAgent] = useState<Agent | null>(null);
   const [showAddAgent, setShowAddAgent] = useState(false);
+  const [showPredefinedAgents, setShowPredefinedAgents] = useState(false);
 
   // Reset modal state when opened
   useEffect(() => {
     if (isOpen) {
       setEditingAgent(null);
       setShowAddAgent(false);
+      setShowPredefinedAgents(false);
     }
   }, [isOpen]);
 
@@ -51,6 +55,12 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
     }
   };
 
+  const handleAddPredefinedAgent = (predefinedAgent: PredefinedAgent, customEndpoint?: string) => {
+    const agent = convertPredefinedToAgent(predefinedAgent, customEndpoint);
+    addAgent(agent);
+    setShowPredefinedAgents(false);
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -185,26 +195,56 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
             >
               Agents
             </h3>
-            <button
-              onClick={() => setShowAddAgent(true)}
-              style={{
-                padding: "6px 12px",
-                borderRadius: "6px",
-                border: "1px solid var(--claude-border)",
-                background: "var(--claude-text-accent)",
-                color: "white",
-                fontSize: "12px",
-                fontWeight: 500,
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                gap: "4px",
-                transition: "all 0.15s ease"
-              }}
-            >
-              <Plus size={14} />
-              Add Agent
-            </button>
+            <div style={{ display: "flex", gap: "8px" }}>
+              <button
+                onClick={() => setShowPredefinedAgents(true)}
+                style={{
+                  padding: "6px 12px",
+                  borderRadius: "6px",
+                  border: "1px solid var(--claude-border)",
+                  background: "var(--claude-message-bg)",
+                  color: "var(--claude-text-accent)",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  transition: "all 0.15s ease"
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = "var(--claude-text-accent)";
+                  e.currentTarget.style.color = "white";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = "var(--claude-message-bg)";
+                  e.currentTarget.style.color = "var(--claude-text-accent)";
+                }}
+              >
+                <Library size={14} />
+                Add from Library
+              </button>
+              <button
+                onClick={() => setShowAddAgent(true)}
+                style={{
+                  padding: "6px 12px",
+                  borderRadius: "6px",
+                  border: "1px solid var(--claude-border)",
+                  background: "var(--claude-text-accent)",
+                  color: "white",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  transition: "all 0.15s ease"
+                }}
+              >
+                <Plus size={14} />
+                Add Custom
+              </button>
+            </div>
           </div>
 
           {/* Reset Button */}
@@ -370,6 +410,13 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
           }}
         />
       )}
+
+      {/* Predefined Agents Modal */}
+      <PredefinedAgentsModal
+        isOpen={showPredefinedAgents}
+        onClose={() => setShowPredefinedAgents(false)}
+        onSelectAgent={handleAddPredefinedAgent}
+      />
     </div>
   );
 }
diff --git a/frontend/src/config/predefinedAgents.ts b/frontend/src/config/predefinedAgents.ts
new file mode 100644
index 0000000..7004489
--- /dev/null
+++ b/frontend/src/config/predefinedAgents.ts
@@ -0,0 +1,372 @@
+export interface PredefinedAgent {
+  // Core Identity
+  id: string;
+  name: string;
+  description: string;
+  
+  // Specialization & Capabilities
+  specialization: string;
+  capabilities: string[];
+  category: AgentCategory;
+  
+  // Technical Configuration
+  workingDirectory: string;
+  defaultApiEndpoint: string;
+  isOrchestrator: boolean;
+  
+  // UI/UX Properties
+  color: string;
+  icon: string;
+  
+  // Metadata for Library
+  tags: string[];
+  difficulty: "beginner" | "intermediate" | "advanced";
+  prerequisites?: string[];
+  exampleTasks: string[];
+  
+  // Documentation
+  setupInstructions?: string;
+  usageNotes?: string;
+}
+
+export enum AgentCategory {
+  DEVELOPMENT = "development",
+  ANALYSIS = "analysis", 
+  TESTING = "testing",
+  DEVOPS = "devops",
+  DOCUMENTATION = "documentation",
+  ORCHESTRATION = "orchestration",
+  SPECIALIZED = "specialized"
+}
+
+export const PREDEFINED_AGENTS_LIBRARY: PredefinedAgent[] = [
+  // Orchestration Agents
+  {
+    id: "orchestrator-claude",
+    name: "Claude Code Orchestrator",
+    description: "Intelligent orchestrator that coordinates multi-agent workflows and manages complex projects",
+    specialization: "Multi-agent coordination and project management",
+    capabilities: ["Task planning", "Agent coordination", "Workflow orchestration", "Project management"],
+    category: AgentCategory.ORCHESTRATION,
+    workingDirectory: "/tmp/orchestrator",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: true,
+    color: "bg-gradient-to-r from-blue-500 to-purple-500",
+    icon: "🎭",
+    tags: ["orchestration", "coordination", "planning", "management"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Plan a multi-component feature across frontend and backend",
+      "Coordinate code reviews between multiple agents",
+      "Orchestrate deployment pipeline tasks"
+    ],
+    setupInstructions: "This agent requires access to all project contexts to effectively coordinate tasks.",
+    usageNotes: "Use @orchestrator to delegate complex multi-step tasks that require coordination."
+  },
+
+  // Development Agents
+  {
+    id: "fullstack-developer",
+    name: "Full-Stack Developer",
+    description: "Experienced full-stack developer specializing in modern web applications with React and Node.js",
+    specialization: "Full-stack web development",
+    capabilities: ["React", "TypeScript", "Node.js", "Express", "REST APIs", "Database design", "Authentication"],
+    category: AgentCategory.DEVELOPMENT,
+    workingDirectory: "/tmp/fullstack",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-green-500 to-blue-500",
+    icon: "⚡",
+    tags: ["react", "nodejs", "typescript", "fullstack", "web", "api"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Build a complete user authentication system",
+      "Create REST API endpoints with database integration",
+      "Implement responsive React components with TypeScript"
+    ],
+    prerequisites: ["Node.js", "npm/yarn", "Database (PostgreSQL/MongoDB)"],
+    setupInstructions: "Ensure Node.js and your preferred database are installed and configured.",
+    usageNotes: "Great for end-to-end feature development spanning frontend and backend."
+  },
+
+  {
+    id: "frontend-react-expert",
+    name: "React Frontend Expert",
+    description: "Frontend specialist focused on React, Next.js, and modern UI/UX development",
+    specialization: "Frontend development with React ecosystem",
+    capabilities: ["React", "Next.js", "TypeScript", "Tailwind CSS", "State management", "Testing", "Performance optimization"],
+    category: AgentCategory.DEVELOPMENT,
+    workingDirectory: "/tmp/frontend",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-cyan-500 to-blue-500",
+    icon: "⚛️",
+    tags: ["react", "nextjs", "frontend", "ui", "typescript", "tailwind"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Build responsive React components with TypeScript",
+      "Implement complex state management with Context/Redux",
+      "Optimize React app performance and bundle size"
+    ],
+    prerequisites: ["Node.js", "React knowledge"],
+    setupInstructions: "Works best with React 18+ and TypeScript projects.",
+    usageNotes: "Excellent for UI components, user experience, and frontend architecture."
+  },
+
+  {
+    id: "backend-api-specialist",
+    name: "Backend API Specialist",
+    description: "Backend expert specializing in scalable APIs, databases, and server-side architecture",
+    specialization: "Backend API development and architecture",
+    capabilities: ["Node.js", "Python", "REST APIs", "GraphQL", "Database design", "Authentication", "Microservices"],
+    category: AgentCategory.DEVELOPMENT,
+    workingDirectory: "/tmp/backend",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-orange-500 to-red-500",
+    icon: "🔧",
+    tags: ["backend", "api", "database", "nodejs", "python", "microservices"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Design and implement REST API endpoints",
+      "Set up database schemas and migrations",
+      "Implement authentication and authorization systems"
+    ],
+    prerequisites: ["Node.js or Python", "Database system"],
+    setupInstructions: "Requires backend runtime environment and database access.",
+    usageNotes: "Best for server-side logic, data modeling, and API development."
+  },
+
+  // Analysis Agents
+  {
+    id: "code-reviewer",
+    name: "Code Review Expert",
+    description: "Code quality specialist focusing on security, performance, and best practices",
+    specialization: "Code review and quality assurance",
+    capabilities: ["Static analysis", "Security review", "Performance analysis", "Best practices", "Code refactoring"],
+    category: AgentCategory.ANALYSIS,
+    workingDirectory: "/tmp/review",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-purple-500 to-pink-500",
+    icon: "🔍",
+    tags: ["review", "security", "performance", "quality", "refactoring"],
+    difficulty: "advanced",
+    exampleTasks: [
+      "Review code for security vulnerabilities",
+      "Analyze performance bottlenecks in applications",
+      "Suggest refactoring improvements for code quality"
+    ],
+    setupInstructions: "Works with any codebase. Best with access to static analysis tools.",
+    usageNotes: "Use for thorough code reviews and identifying improvement opportunities."
+  },
+
+  {
+    id: "performance-optimizer",
+    name: "Performance Optimizer",
+    description: "Performance specialist focused on application optimization, profiling, and benchmarking",
+    specialization: "Performance analysis and optimization",
+    capabilities: ["Performance profiling", "Benchmarking", "Memory optimization", "Database optimization", "Frontend performance"],
+    category: AgentCategory.ANALYSIS,
+    workingDirectory: "/tmp/performance",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-yellow-500 to-orange-500",
+    icon: "⚡",
+    tags: ["performance", "optimization", "profiling", "benchmarking", "speed"],
+    difficulty: "advanced",
+    exampleTasks: [
+      "Profile application performance bottlenecks",
+      "Optimize database queries and indexing",
+      "Improve frontend loading times and user experience"
+    ],
+    prerequisites: ["Profiling tools", "Performance monitoring setup"],
+    setupInstructions: "Best with access to profiling tools and performance monitoring.",
+    usageNotes: "Excellent for optimizing slow applications and improving scalability."
+  },
+
+  // Testing Agents
+  {
+    id: "test-automation-expert",
+    name: "Test Automation Expert",
+    description: "Testing specialist covering unit tests, integration tests, and end-to-end automation",
+    specialization: "Comprehensive test automation",
+    capabilities: ["Unit testing", "Integration testing", "E2E testing", "Test frameworks", "CI/CD testing", "Mock/stub creation"],
+    category: AgentCategory.TESTING,
+    workingDirectory: "/tmp/testing",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-indigo-500 to-purple-500",
+    icon: "🧪",
+    tags: ["testing", "automation", "unit-tests", "e2e", "ci-cd", "quality"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Create comprehensive unit test suites",
+      "Set up integration tests for API endpoints",
+      "Implement end-to-end testing with Playwright/Cypress"
+    ],
+    prerequisites: ["Testing framework (Jest, Vitest, etc.)", "E2E tools (Playwright, Cypress)"],
+    setupInstructions: "Requires testing frameworks and potentially browser automation tools.",
+    usageNotes: "Great for ensuring code quality and preventing regressions."
+  },
+
+  // DevOps Agents
+  {
+    id: "devops-automation",
+    name: "DevOps Automation Specialist",
+    description: "DevOps expert specializing in CI/CD, containerization, and infrastructure automation",
+    specialization: "DevOps and infrastructure automation",
+    capabilities: ["Docker", "Kubernetes", "CI/CD pipelines", "Infrastructure as Code", "Monitoring", "AWS/GCP/Azure"],
+    category: AgentCategory.DEVOPS,
+    workingDirectory: "/tmp/devops",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-gray-600 to-gray-800",
+    icon: "🚀",
+    tags: ["devops", "docker", "kubernetes", "cicd", "infrastructure", "cloud"],
+    difficulty: "advanced",
+    exampleTasks: [
+      "Set up CI/CD pipelines with GitHub Actions",
+      "Create Docker containers and Kubernetes deployments",
+      "Implement infrastructure monitoring and alerting"
+    ],
+    prerequisites: ["Docker", "Cloud provider access", "CI/CD platform"],
+    setupInstructions: "Requires access to cloud providers and container orchestration platforms.",
+    usageNotes: "Best for deployment automation and infrastructure management."
+  },
+
+  // Documentation Agents
+  {
+    id: "technical-writer",
+    name: "Technical Documentation Writer",
+    description: "Documentation specialist creating clear, comprehensive technical documentation",
+    specialization: "Technical writing and documentation",
+    capabilities: ["API documentation", "User guides", "Architecture docs", "README files", "Code comments", "Tutorial creation"],
+    category: AgentCategory.DOCUMENTATION,
+    workingDirectory: "/tmp/docs",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-emerald-500 to-teal-500",
+    icon: "📝",
+    tags: ["documentation", "writing", "api-docs", "guides", "tutorials"],
+    difficulty: "beginner",
+    exampleTasks: [
+      "Create comprehensive API documentation",
+      "Write user guides and tutorials",
+      "Document system architecture and design decisions"
+    ],
+    setupInstructions: "Works with any codebase. Best with access to documentation tools.",
+    usageNotes: "Excellent for creating clear, maintainable documentation."
+  },
+
+  // Specialized Agents
+  {
+    id: "security-auditor",
+    name: "Security Auditor",
+    description: "Cybersecurity specialist focused on vulnerability assessment and secure coding practices",
+    specialization: "Security analysis and vulnerability assessment",
+    capabilities: ["Security auditing", "Vulnerability scanning", "Secure coding", "Compliance checking", "Threat modeling"],
+    category: AgentCategory.SPECIALIZED,
+    workingDirectory: "/tmp/security",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-red-600 to-red-800",
+    icon: "🔒",
+    tags: ["security", "vulnerability", "audit", "compliance", "threats"],
+    difficulty: "advanced",
+    exampleTasks: [
+      "Audit codebase for security vulnerabilities",
+      "Review authentication and authorization implementations",
+      "Perform threat modeling for new features"
+    ],
+    prerequisites: ["Security scanning tools", "Understanding of threat landscape"],
+    setupInstructions: "Best with access to security scanning tools and compliance frameworks.",
+    usageNotes: "Critical for maintaining application security and compliance."
+  },
+
+  {
+    id: "data-analyst",
+    name: "Data Analyst",
+    description: "Data specialist focused on analysis, visualization, and insights from application data",
+    specialization: "Data analysis and business intelligence",
+    capabilities: ["Data analysis", "SQL queries", "Data visualization", "Statistical analysis", "Business intelligence"],
+    category: AgentCategory.SPECIALIZED,
+    workingDirectory: "/tmp/data",
+    defaultApiEndpoint: "http://agents.claudecode.run",
+    isOrchestrator: false,
+    color: "bg-gradient-to-r from-blue-600 to-indigo-600",
+    icon: "📊",
+    tags: ["data", "analytics", "sql", "visualization", "insights"],
+    difficulty: "intermediate",
+    exampleTasks: [
+      "Analyze user behavior data and create insights",
+      "Design and optimize database queries",
+      "Create data visualizations and dashboards"
+    ],
+    prerequisites: ["Database access", "Data visualization tools"],
+    setupInstructions: "Requires access to databases and data analysis tools.",
+    usageNotes: "Great for understanding user behavior and business metrics."
+  }
+];
+
+// Utility functions for predefined agents
+export const getAgentsByCategory = (category: AgentCategory): PredefinedAgent[] => {
+  return PREDEFINED_AGENTS_LIBRARY.filter(agent => agent.category === category);
+};
+
+export const getAgentsByDifficulty = (difficulty: "beginner" | "intermediate" | "advanced"): PredefinedAgent[] => {
+  return PREDEFINED_AGENTS_LIBRARY.filter(agent => agent.difficulty === difficulty);
+};
+
+export const searchAgents = (query: string, tags?: string[]): PredefinedAgent[] => {
+  const queryLower = query.toLowerCase();
+  
+  return PREDEFINED_AGENTS_LIBRARY.filter(agent => {
+    const matchesQuery = 
+      agent.name.toLowerCase().includes(queryLower) ||
+      agent.description.toLowerCase().includes(queryLower) ||
+      agent.specialization.toLowerCase().includes(queryLower) ||
+      agent.capabilities.some(cap => cap.toLowerCase().includes(queryLower)) ||
+      agent.tags.some(tag => tag.toLowerCase().includes(queryLower));
+    
+    const matchesTags = !tags || tags.length === 0 || 
+      tags.some(tag => agent.tags.includes(tag.toLowerCase()));
+    
+    return matchesQuery && matchesTags;
+  });
+};
+
+export const getPopularTags = (): string[] => {
+  const tagCounts = new Map<string, number>();
+  
+  PREDEFINED_AGENTS_LIBRARY.forEach(agent => {
+    agent.tags.forEach(tag => {
+      tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+    });
+  });
+  
+  return Array.from(tagCounts.entries())
+    .sort((a, b) => b[1] - a[1])
+    .map(([tag]) => tag)
+    .slice(0, 20); // Top 20 most popular tags
+};
+
+export const convertPredefinedToAgent = (predefined: PredefinedAgent, customEndpoint?: string): {
+  id: string;
+  name: string;
+  workingDirectory: string;
+  color: string;
+  description: string;
+  apiEndpoint: string;
+  isOrchestrator: boolean;
+} => {
+  return {
+    id: predefined.id,
+    name: predefined.name,
+    workingDirectory: predefined.workingDirectory,
+    color: predefined.color,
+    description: predefined.description,
+    apiEndpoint: customEndpoint || predefined.defaultApiEndpoint,
+    isOrchestrator: predefined.isOrchestrator,
+  };
+};
\ No newline at end of file
diff --git a/frontend/src/hooks/useAgentConfig.ts b/frontend/src/hooks/useAgentConfig.ts
index 3b41cfa..b45f65f 100644
--- a/frontend/src/hooks/useAgentConfig.ts
+++ b/frontend/src/hooks/useAgentConfig.ts
@@ -17,11 +17,11 @@ export interface AgentSystemConfig {
 const DEFAULT_AGENTS: Agent[] = [
   {
     id: "orchestrator",
-    name: "Orchestrator Agent",
+    name: "Claude Code Orchestrator",
     workingDirectory: "/tmp/orchestrator",
     color: "bg-gradient-to-r from-blue-500 to-purple-500",
-    description: "Intelligent orchestrator that coordinates multi-agent workflows",
-    apiEndpoint: "https://api.claudecode.run",
+    description: "Intelligent orchestrator that coordinates multi-agent workflows and manages complex projects",
+    apiEndpoint: "http://agents.claudecode.run",
     isOrchestrator: true
   }
 ];