🔌 Add MCP ecosystem, API routes, and agent UI components

- MCP integration framework with custom and pre-built MCPs
- Updated API routes for multi-agent system
- Agent UI with task visualization
- Task state management hooks

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: sheikhcoders

src/app/agent/page.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useAgent } from "@/hooks/use-agent";
+import { TaskInput } from "@/components/agent/task-input";
+import { TaskProgress } from "@/components/agent/task-progress";
+import { Header } from "@/components/layout/header";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+
+export default function AgentPage() {
+  const {
+    task,
+    isRunning,
+    currentSubTask,
+    progress,
+    error,
+    executeTask,
+    reset,
+  } = useAgent();
+
+  return (
+    <div className="flex min-h-screen flex-col">
+      <Header />
+      <main
+        id="main-content"
+        className="flex-1 px-4 py-8 safe-area-inset"
+        role="main"
+        aria-label="Multi-Agent Task Execution"
+      >
+        <div className="mx-auto max-w-4xl space-y-6">
+          {/* Page title */}
+          <div className="text-center">
+            <h1 className="text-3xl font-bold tracking-tight">Multi-Agent System</h1>
+            <p className="mt-2 text-muted-foreground">
+              Describe a complex task and let specialized AI agents work together to complete it.
+            </p>
+          </div>
+
+          {/* Show input or progress based on state */}
+          {!task ? (
+            <TaskInput
+              onSubmit={executeTask}
+              isLoading={isRunning}
+            />
+          ) : (
+            <div className="space-y-4">
+              <TaskProgress
+                task={task}
+                currentSubTask={currentSubTask}
+                progress={progress}
+              />
+
+              {/* Actions */}
+              {!isRunning && (
+                <div className="flex justify-center">
+                  <Button onClick={reset} variant="outline">
+                    <RefreshCw className="mr-2 h-4 w-4" aria-hidden="true" />
+                    New Task
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Error display */}
+          {error && (
+            <div
+              className="rounded-lg border border-destructive bg-destructive/10 p-4 text-destructive"
+              role="alert"
+            >
+              <p className="font-medium">Error</p>
+              <p className="text-sm">{error}</p>
+            </div>
+          )}
+
+          {/* Agent capabilities info */}
+          {!task && (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              {[
+                {
+                  title: "Code Agent",
+                  description: "Full-stack development with auth, database, and testing",
+                  color: "text-blue-500",
+                },
+                {
+                  title: "Research Agent",
+                  description: "Deep research with search, analysis, and charts",
+                  color: "text-green-500",
+                },
+                {
+                  title: "PPT Agent",
+                  description: "Beautiful presentations with flexible layouts",
+                  color: "text-orange-500",
+                },
+                {
+                  title: "Multimodal Agent",
+                  description: "Process and generate images, audio, and video",
+                  color: "text-purple-500",
+                },
+              ].map((agent) => (
+                <div
+                  key={agent.title}
+                  className="rounded-lg border bg-card p-4 text-card-foreground"
+                >
+                  <h3 className={`font-medium ${agent.color}`}>{agent.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {agent.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}

src/app/api/agent/route.ts

@@ -0,0 +1,179 @@
+/**
+ * Multi-Agent API Route
+ * 
+ * Handles complex tasks through the multi-agent orchestration system:
+ * 1. Receives task description
+ * 2. Decomposes into sub-tasks
+ * 3. Routes to specialized agents
+ * 4. Streams progress and results
+ */
+
+import { NextRequest } from "next/server";
+import { executeTask, decomposeTask } from "@/lib/agents/orchestrator";
+import type { Task } from "@/lib/agents/types";
+
+// Allow long-running agent tasks
+export const maxDuration = 120; // 2 minutes
+
+/**
+ * POST /api/agent
+ * Execute a complex task through the multi-agent system
+ */
+export async function POST(req: NextRequest) {
+  try {
+    const { title, description, stream = true } = await req.json();
+
+    if (!title || !description) {
+      return new Response(
+        JSON.stringify({ error: "Title and description are required" }),
+        { status: 400, headers: { "Content-Type": "application/json" } }
+      );
+    }
+
+    // Create task
+    const task: Task = {
+      id: `task-${Date.now()}`,
+      title,
+      description,
+      status: "pending",
+      subTasks: [],
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    if (stream) {
+      // Stream progress using SSE
+      const encoder = new TextEncoder();
+      const stream = new ReadableStream({
+        async start(controller) {
+          const send = (data: Record<string, unknown>) => {
+            controller.enqueue(
+              encoder.encode(`data: ${JSON.stringify(data)}\n\n`)
+            );
+          };
+
+          try {
+            // Send initial task
+            send({ type: "task_created", task: { id: task.id, title, status: "pending" } });
+
+            // Execute with progress callback
+            const result = await executeTask(task, ({ subTask, status }) => {
+              send({
+                type: "subtask_update",
+                subTask: {
+                  id: subTask.id,
+                  title: subTask.title,
+                  agent: subTask.assignedAgent,
+                  status,
+                },
+              });
+            });
+
+            // Send final result
+            send({
+              type: "task_complete",
+              task: {
+                id: result.id,
+                status: result.status,
+                result: result.result,
+                subTasks: result.subTasks.map((st) => ({
+                  id: st.id,
+                  title: st.title,
+                  agent: st.assignedAgent,
+                  status: st.status,
+                  result: st.result,
+                })),
+              },
+            });
+
+            controller.close();
+          } catch (error) {
+            send({
+              type: "error",
+              error: error instanceof Error ? error.message : "Unknown error",
+            });
+            controller.close();
+          }
+        },
+      });
+
+      return new Response(stream, {
+        headers: {
+          "Content-Type": "text/event-stream",
+          "Cache-Control": "no-cache",
+          Connection: "keep-alive",
+        },
+      });
+    } else {
+      // Non-streaming response
+      const result = await executeTask(task);
+
+      return new Response(JSON.stringify(result), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+  } catch (error) {
+    console.error("Agent API error:", error);
+
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "An error occurred",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}
+
+/**
+ * POST /api/agent/decompose
+ * Preview task decomposition without executing
+ */
+export async function PUT(req: NextRequest) {
+  try {
+    const { title, description } = await req.json();
+
+    if (!title || !description) {
+      return new Response(
+        JSON.stringify({ error: "Title and description are required" }),
+        { status: 400, headers: { "Content-Type": "application/json" } }
+      );
+    }
+
+    const task: Task = {
+      id: `preview-${Date.now()}`,
+      title,
+      description,
+      status: "pending",
+      subTasks: [],
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+
+    const subTasks = await decomposeTask(task);
+
+    return new Response(
+      JSON.stringify({
+        task: { id: task.id, title, description },
+        subTasks: subTasks.map((st) => ({
+          title: st.title,
+          description: st.description,
+          agent: st.assignedAgent,
+          priority: st.priority,
+          dependencies: st.dependencies,
+        })),
+      }),
+      { headers: { "Content-Type": "application/json" } }
+    );
+  } catch (error) {
+    console.error("Decompose API error:", error);
+
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : "An error occurred",
+      }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}