ساختن یک عامل AI با Langgraph ، TypeScript ، Next.js ، tailwindcss و pinecone – قسمت 2

import { OpenAI } from "openai";
import { Pinecone } from "@pinecone-database/pinecone";
import { Graph, Node, Edge } from "langgraph";

type AIContext = { query: string; response: string; memory: string[] };

const openai = new OpenAI(process.env.NEXT_PUBLIC_OPENAI_API_KEY!);
const pinecone = new Pinecone({
  apiKey: process.env.NEXT_PUBLIC_PINECONE_API_KEY!,
  environment: process.env.NEXT_PUBLIC_PINECONE_ENVIRONMENT!,
});

const aiGraph = new Graph<AIContext>();

// General Query Agent
const generalAgent = new Node(async (ctx) => {
  const response = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [{ role: "user", content: ctx.query }],
  });
  ctx.response = response.choices[0].message.content;
});

// Memory Storage Agent
const memoryAgent = new Node(async (ctx) => {
  const vectorStore = pinecone.index(process.env.NEXT_PUBLIC_PINECONE_INDEX!);
  await vectorStore.upsert([{ id: Date.now().toString(), values: ctx.query }]);
  ctx.memory.push(ctx.query);
});

aiGraph.addNode("General Query Agent", generalAgent);
aiGraph.addNode("Memory Agent", memoryAgent);
aiGraph.addEdge(new Edge("Start", "General Query Agent"));
aiGraph.addEdge(new Edge("General Query Agent", "Memory Agent"));

export { aiGraph };

import { NextApiRequest, NextApiResponse } from "next";
import { aiGraph } from "../../lib/multiAgentGraph";
import { Pinecone } from "@pinecone-database/pinecone";

const pinecone = new Pinecone({
  apiKey: process.env.NEXT_PUBLIC_PINECONE_API_KEY!,
  environment: process.env.NEXT_PUBLIC_PINECONE_ENVIRONMENT!,
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { query } = req.body;
  if (!query) return res.status(400).json({ error: "Missing query" });

  const vectorStore = pinecone.index(process.env.NEXT_PUBLIC_PINECONE_INDEX!);
  const previousContext = await vectorStore.query({ topK: 5, query });
  const memory = previousContext.matches.map((match) => match.id);

  const context = { query, response: "", memory };
  await aiGraph.run(context);

  return res.json({ response: context.response });
}

import { useState } from "react";

export default function Home() {
  const [query, setQuery] = useState("");
  const [conversation, setConversation] = useState<{ user: string; ai: string }[]>([]);

  const handleSubmit = async () => {
    const res = await fetch("/api/ask", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query }),
    });
    const data = await res.json();
    setConversation([...conversation, { user: query, ai: data.response }]);
    setQuery("");
  };

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-2xl font-bold">AI Agent Chat</h1>
      <div className="chat-box mt-4 p-4 border rounded">
        {conversation.map((msg, index) => (
          <div key={index} className="mt-2">
            <p className="text-blue-600">User: {msg.user}</p>
            <p className="text-gray-700">AI: {msg.ai}</p>
          </div>
        ))}
      </div>
      <input
        type="text"
        placeholder="Ask something..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        className="w-full p-2 border rounded mt-4"
      />
      <button onClick={handleSubmit} className="mt-4 bg-blue-500 text-white p-2 rounded">Ask</button>
    </div>
  );
}