بناء مساعد ذكاء اصطناعي داخل الصفحة باستخدام Alibaba Page Agent وTypeScript

npx create-next-app@latest page-agent-demo --typescript --app --tailwind
cd page-agent-demo

npm install page-agent

NEXT_PUBLIC_LLM_API_KEY=مفتاحك_هنا
NEXT_PUBLIC_LLM_BASE_URL=https://api.openai.com/v1
NEXT_PUBLIC_LLM_MODEL=gpt-4o-mini

"use client";
 
import { useState } from "react";
 
type Priority = "low" | "medium" | "high";
 
interface Task {
  id: string;
  title: string;
  dueDate: string;
  priority: Priority;
  done: boolean;
}
 
export default function Dashboard() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [title, setTitle] = useState("");
  const [dueDate, setDueDate] = useState("");
  const [priority, setPriority] = useState<Priority>("medium");
 
  function addTask() {
    if (!title.trim()) return;
    setTasks((prev) => [
      ...prev,
      { id: crypto.randomUUID(), title, dueDate, priority, done: false },
    ]);
    setTitle("");
    setDueDate("");
    setPriority("medium");
  }
 
  function toggleDone(id: string) {
    setTasks((prev) =>
      prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }
 
  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-6">مدير المهام</h1>
 
      <section id="task-form" className="bg-gray-50 p-4 rounded-lg mb-8">
        <input
          id="task-title"
          placeholder="عنوان المهمة"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="w-full border rounded p-2 mb-2"
        />
        <input
          id="task-due-date"
          type="date"
          value={dueDate}
          onChange={(e) => setDueDate(e.target.value)}
          className="w-full border rounded p-2 mb-2"
        />
        <select
          id="task-priority"
          value={priority}
          onChange={(e) => setPriority(e.target.value as Priority)}
          className="w-full border rounded p-2 mb-2"
        >
          <option value="low">منخفضة</option>
          <option value="medium">متوسطة</option>
          <option value="high">عالية</option>
        </select>
        <button
          id="add-task-btn"
          onClick={addTask}
          className="w-full bg-blue-600 text-white rounded p-2"
        >
          إضافة مهمة
        </button>
      </section>
 
      <ul className="space-y-2">
        {tasks.map((task) => (
          <li key={task.id} className="border rounded p-3 flex items-center gap-3">
            <input
              type="checkbox"
              checked={task.done}
              onChange={() => toggleDone(task.id)}
            />
            <div className="flex-1">
              <p className={task.done ? "line-through text-gray-400" : ""}>
                {task.title}
              </p>
              <p className="text-xs text-gray-500">
                {task.dueDate} · {task.priority}
              </p>
            </div>
          </li>
        ))}
      </ul>
    </main>
  );
}

"use client";
 
import { useState, useCallback } from "react";
import { PageAgent } from "page-agent";
 
let agentInstance: PageAgent | null = null;
 
function getAgent(): PageAgent {
  if (!agentInstance) {
    agentInstance = new PageAgent({
      model: process.env.NEXT_PUBLIC_LLM_MODEL ?? "gpt-4o-mini",
      baseURL: process.env.NEXT_PUBLIC_LLM_BASE_URL ?? "https://api.openai.com/v1",
      apiKey: process.env.NEXT_PUBLIC_LLM_API_KEY ?? "",
      language: "ar-SA",
    });
  }
  return agentInstance;
}
 
type Status = "idle" | "running" | "done" | "error";
 
export function Copilot() {
  const [input, setInput] = useState("");
  const [status, setStatus] = useState<Status>("idle");
  const [lastTask, setLastTask] = useState("");
 
  const runTask = useCallback(async () => {
    const task = input.trim();
    if (!task || status === "running") return;
 
    setStatus("running");
    setLastTask(task);
    setInput("");
 
    try {
      const agent = getAgent();
      await agent.execute(task);
      setStatus("done");
    } catch {
      setStatus("error");
    }
  }, [input, status]);
 
  const statusText =
    status === "idle"
      ? "جاهز"
      : status === "running"
      ? "يعمل…"
      : status === "done"
      ? `تم: ${lastTask}`
      : "حدث خطأ — حاول إعادة صياغة المهمة";
 
  return (
    <div className="fixed bottom-4 left-4 w-80 bg-white shadow-xl rounded-xl p-4 border" dir="rtl">
      <p className="text-xs font-semibold text-gray-500 mb-2">المساعد الذكي</p>
      <textarea
        rows={2}
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="أخبر المساعد بما تريد…"
        className="w-full border rounded p-2 text-sm resize-none mb-2"
        onKeyDown={(e) => {
          if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            runTask();
          }
        }}
      />
      <button
        onClick={runTask}
        disabled={status === "running"}
        className="w-full bg-indigo-600 text-white rounded p-2 text-sm disabled:opacity-50"
      >
        {status === "running" ? "يعمل…" : "تشغيل"}
      </button>
      <p className="text-xs text-gray-400 mt-2">{statusText}</p>
    </div>
  );
}

import { Copilot } from "@/components/Copilot";

  return (
    <>
      <main className="max-w-2xl mx-auto p-8">
        {/* محتوى اللوحة الحالي */}
      </main>
      <Copilot />
    </>
  );

ollama pull qwen2.5:7b

NEXT_PUBLIC_LLM_BASE_URL=http://localhost:11434/v1
NEXT_PUBLIC_LLM_API_KEY=ollama
NEXT_PUBLIC_LLM_MODEL=qwen2.5:7b

npm run dev

const formEl = document.getElementById("task-form");
 
await agent.execute("املأ النموذج بتفاصيل المهمة", {
  context: formEl ?? undefined,
});

import { NextRequest, NextResponse } from "next/server";
 
export async function POST(req: NextRequest) {
  const body = await req.json();
  const res = await fetch(
    `${process.env.LLM_BASE_URL}/chat/completions`,
    {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.LLM_API_KEY}`,
      },
      body: JSON.stringify(body),
    }
  );
  const data = await res.json();
  return NextResponse.json(data);
}

LLM_BASE_URL=https://api.openai.com/v1
LLM_API_KEY=مفتاحك_الحقيقي

NEXT_PUBLIC_LLM_BASE_URL=/api/llm
NEXT_PUBLIC_LLM_API_KEY=proxy
NEXT_PUBLIC_LLM_MODEL=gpt-4o-mini