Bina klon Perplexity dengan LangGraph, CopilotKit, Tavily & Next.js

Aplikasi berkuasa AI berkembang melangkaui ejen autonomi yang menjalankan tugas. Pendekatan baharu yang melibatkan Human-in-the-Loop membolehkan pengguna memberikan maklum balas, menyemak keputusan dan memutuskan langkah seterusnya untuk AI. Ejen jangka masa ini dikenali sebagai CoAgents.

TL;DR

Dalam tutorial ini, anda akan belajar cara membina klon Perplexity menggunakan LangGraph, CopilotKit dan Tavily.

Masa untuk mula membina!

Apakah itu Agentik Copilot?

Kopilot agen ialah cara CopilotKit membawa ejen LangGraph ke dalam aplikasi anda.

CoAgents ialah pendekatan CopilotKit untuk membina pengalaman ejen!

Ringkasnya, ia akan mengendalikan permintaan pengguna dengan melakukan berbilang pertanyaan carian dan menstrim carian kembali dengan status dan hasil dalam masa nyata kepada pelanggan.

Checkout CopilotKit ⭐️

---

Prasyarat

Untuk memahami tutorial ini sepenuhnya, anda perlu mempunyai pemahaman asas tentang React atau Next.js.

Kami juga akan menggunakan perkara berikut:

• Python - bahasa pengaturcaraan popular untuk membina ejen AI dengan LangGraph; pastikan ia dipasang pada komputer anda.
• LangGraph - rangka kerja untuk mencipta dan menggunakan ejen AI. Ia juga membantu untuk menentukan aliran kawalan dan tindakan yang perlu dilakukan oleh ejen.
• Kunci API OpenAI - untuk membolehkan kami melaksanakan pelbagai tugas menggunakan model GPT; untuk tutorial ini, pastikan anda mempunyai akses kepada model GPT-4.
• Tavily AI - enjin carian yang membolehkan ejen AI menjalankan penyelidikan dan mengakses pengetahuan masa nyata dalam aplikasi.
• CopilotKit - rangka kerja copilot sumber terbuka untuk membina chatbot AI tersuai, ejen AI dalam apl dan kawasan teks.
• UI Shad Cn - menyediakan koleksi komponen UI boleh guna semula dalam aplikasi.

---

Cara Mencipta Ejen AI dengan LangGraph dan CopilotKit

Dalam bahagian ini, anda akan belajar cara mencipta ejen AI menggunakan LangGraph dan CopilotKit.

Mula-mula, klon repositori permulaan CopilotKit CoAgents. Direktori ui mengandungi bahagian hadapan untuk aplikasi Next.js dan direktori agen memegang CoAgent untuk aplikasi itu.

Di dalam direktori ejen, pasang kebergantungan projek menggunakan Puisi.

cd agent
poetry install

Buat fail .env dalam folder ejen dan salin kunci API OpenAI dan Tavily AI anda ke dalam fail:

OPENAI_API_KEY=
TAVILY_API_KEY=

Salin coretan kod di bawah ke dalam fail agent.py:

"""
This is the main entry point for the AI.
It defines the workflow graph and the entry point for the agent.
"""
# pylint: disable=line-too-long, unused-import
from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver

from ai_researcher.state import AgentState
from ai_researcher.steps import steps_node
from ai_researcher.search import search_node
from ai_researcher.summarize import summarize_node
from ai_researcher.extract import extract_node

def route(state):
    """Route to research nodes."""
    if not state.get("steps", None):
        return END

    current_step = next((step for step in state["steps"] if step["status"] == "pending"), None)

    if not current_step:
        return "summarize_node"

    if current_step["type"] == "search":
        return "search_node"

    raise ValueError(f"Unknown step type: {current_step['type']}")

# Define a new graph
workflow = StateGraph(AgentState)
workflow.add_node("steps_node", steps_node)
workflow.add_node("search_node", search_node)
workflow.add_node("summarize_node", summarize_node)
workflow.add_node("extract_node", extract_node)
# Chatbot
workflow.set_entry_point("steps_node")

workflow.add_conditional_edges(
    "steps_node", 
    route,
    ["summarize_node", "search_node", END]
)

workflow.add_edge("search_node", "extract_node")

workflow.add_conditional_edges(
    "extract_node",
    route,
    ["summarize_node", "search_node"]
)

workflow.add_edge("summarize_node", END)

memory = MemorySaver()
graph = workflow.compile(checkpointer=memory)

Coretan kod di atas mentakrifkan aliran kerja ejen LangGraph. Ia bermula dari nod_langkah, mencari keputusan, meringkaskannya dan mengekstrak perkara utama.

Seterusnya buat fail demo.py dengan coretan kod di bawah:

cd agent
poetry install

Kod di atas mencipta titik akhir FastAPI yang mengehos ejen LangGraph dan menyambungkannya ke SDK CopilotKit.

Anda boleh menyalin kod yang tinggal untuk mencipta CoAgent daripada repositori GitHub. Dalam bahagian berikut, anda akan belajar cara membina antara muka pengguna untuk klon Perplexity dan mengendalikan permintaan carian menggunakan CopilotKit.

---

Membina antara muka aplikasi dengan Next.js

Dalam bahagian ini, saya akan membimbing anda melalui proses membina antara muka pengguna untuk aplikasi.

Mula-mula, buat projek Next.js Typescript dengan menjalankan coretan kod di bawah:

OPENAI_API_KEY=
TAVILY_API_KEY=

Pasang perpustakaan UI ShadCn pada projek yang baru dibuat dengan menjalankan coretan kod di bawah:

"""
This is the main entry point for the AI.
It defines the workflow graph and the entry point for the agent.
"""
# pylint: disable=line-too-long, unused-import
from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver

from ai_researcher.state import AgentState
from ai_researcher.steps import steps_node
from ai_researcher.search import search_node
from ai_researcher.summarize import summarize_node
from ai_researcher.extract import extract_node

def route(state):
    """Route to research nodes."""
    if not state.get("steps", None):
        return END

    current_step = next((step for step in state["steps"] if step["status"] == "pending"), None)

    if not current_step:
        return "summarize_node"

    if current_step["type"] == "search":
        return "search_node"

    raise ValueError(f"Unknown step type: {current_step['type']}")

# Define a new graph
workflow = StateGraph(AgentState)
workflow.add_node("steps_node", steps_node)
workflow.add_node("search_node", search_node)
workflow.add_node("summarize_node", summarize_node)
workflow.add_node("extract_node", extract_node)
# Chatbot
workflow.set_entry_point("steps_node")

workflow.add_conditional_edges(
    "steps_node", 
    route,
    ["summarize_node", "search_node", END]
)

workflow.add_edge("search_node", "extract_node")

workflow.add_conditional_edges(
    "extract_node",
    route,
    ["summarize_node", "search_node"]
)

workflow.add_edge("summarize_node", END)

memory = MemorySaver()
graph = workflow.compile(checkpointer=memory)

Seterusnya, cipta folder komponen di akar projek Next.js, kemudian salin folder ui daripada repositori GitHub ini ke dalam folder itu. Shadcn membolehkan anda menambah pelbagai komponen pada aplikasi anda dengan mudah dengan memasangnya melalui baris arahan.

Selain komponen Shadcn, anda perlu mencipta beberapa komponen yang mewakili bahagian berlainan antara muka aplikasi. Jalankan coretan kod berikut di dalam folder komponen untuk menambahkan komponen ini pada projek Next.js:

"""Demo"""

import os
from dotenv import load_dotenv
load_dotenv()

from fastapi import FastAPI
import uvicorn
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from ai_researcher.agent import graph

app = FastAPI()
sdk = CopilotKitSDK(
    agents=[
        LangGraphAgent(
            name="ai_researcher",
            description="Search agent.",
            graph=graph,
        )
    ],
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

# add new route for health check
@app.get("/health")
def health():
    """Health check."""
    return {"status": "ok"}

def main():
    """Run the uvicorn server."""
    port = int(os.getenv("PORT", "8000"))
    uvicorn.run("ai_researcher.demo:app", host="0.0.0.0", port=port, reload=True)

Salin coretan kod di bawah ke dalam fail app/page.tsx:

# ?? Navigate into the ui folder
npx create-next-app ./

Dalam coretan kod di atas, ResearchProvider ialah penyedia konteks React tersuai yang berkongsi pertanyaan carian dan hasil carian pengguna, menjadikannya boleh diakses oleh semua komponen dalam aplikasi. Komponen ResearchWrapper mengandungi elemen aplikasi teras dan mengurus UI.

Buat folder lib yang mengandungi fail research-provider.tsx di akar projek Next.js dan salin kod di bawah ke dalam fail:

npx shadcn@latest init

Keadaan diisytiharkan dan disimpan ke ResearchContext untuk memastikan ia diuruskan dengan betul merentas berbilang komponen dalam aplikasi.

Buat komponen ResearchWrapper seperti yang ditunjukkan di bawah:

cd agent
poetry install

Komponen ResearchWrapper menjadikan komponen HomeView sebagai paparan lalai dan memaparkan ResultView apabila pertanyaan carian disediakan. Cangkuk useResearchContext membolehkan kami mengakses keadaan researchQuery dan mengemas kini paparan dengan sewajarnya.

Akhir sekali, cipta komponen HomeView untuk memaparkan antara muka halaman utama aplikasi.

OPENAI_API_KEY=
TAVILY_API_KEY=

---

Cara Menyambungkan CoAgent anda kepada Aplikasi Next.js

Dalam bahagian ini, anda akan belajar cara menyambungkan CoAgent CopilotKit ke aplikasi Next.js anda untuk membolehkan pengguna melakukan operasi carian dalam aplikasi.

Pasang pakej CopilotKit berikut dan SDK OpenAI Node.js. Pakej CopilotKit membenarkan ejen bersama berinteraksi dengan nilai keadaan React dan membuat keputusan dalam aplikasi.

"""
This is the main entry point for the AI.
It defines the workflow graph and the entry point for the agent.
"""
# pylint: disable=line-too-long, unused-import
from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver

from ai_researcher.state import AgentState
from ai_researcher.steps import steps_node
from ai_researcher.search import search_node
from ai_researcher.summarize import summarize_node
from ai_researcher.extract import extract_node

def route(state):
    """Route to research nodes."""
    if not state.get("steps", None):
        return END

    current_step = next((step for step in state["steps"] if step["status"] == "pending"), None)

    if not current_step:
        return "summarize_node"

    if current_step["type"] == "search":
        return "search_node"

    raise ValueError(f"Unknown step type: {current_step['type']}")

# Define a new graph
workflow = StateGraph(AgentState)
workflow.add_node("steps_node", steps_node)
workflow.add_node("search_node", search_node)
workflow.add_node("summarize_node", summarize_node)
workflow.add_node("extract_node", extract_node)
# Chatbot
workflow.set_entry_point("steps_node")

workflow.add_conditional_edges(
    "steps_node", 
    route,
    ["summarize_node", "search_node", END]
)

workflow.add_edge("search_node", "extract_node")

workflow.add_conditional_edges(
    "extract_node",
    route,
    ["summarize_node", "search_node"]
)

workflow.add_edge("summarize_node", END)

memory = MemorySaver()
graph = workflow.compile(checkpointer=memory)

Buat folder api dalam folder Next.js app. Di dalam folder api, cipta direktori kopilotkit yang mengandungi fail route.ts. Ini akan mencipta titik akhir API (/api/copilotkit) yang menghubungkan aplikasi bahagian hadapan kepada CoAgent CopilotKit.

"""Demo"""

import os
from dotenv import load_dotenv
load_dotenv()

from fastapi import FastAPI
import uvicorn
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from ai_researcher.agent import graph

app = FastAPI()
sdk = CopilotKitSDK(
    agents=[
        LangGraphAgent(
            name="ai_researcher",
            description="Search agent.",
            graph=graph,
        )
    ],
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

# add new route for health check
@app.get("/health")
def health():
    """Health check."""
    return {"status": "ok"}

def main():
    """Run the uvicorn server."""
    port = int(os.getenv("PORT", "8000"))
    uvicorn.run("ai_researcher.demo:app", host="0.0.0.0", port=port, reload=True)

Salin coretan kod di bawah ke dalam fail api/copilotkit/route.ts:

# ?? Navigate into the ui folder
npx create-next-app ./

Coretan kod di atas menyediakan masa jalan CopilotKit pada titik akhir API /api/copilotkit, membenarkan CopilotKit memproses permintaan pengguna melalui ejen bersama AI.

Akhir sekali, kemas kini app/page.tsx dengan membalut keseluruhan aplikasi dengan komponen CopilotKit yang menyediakan konteks copilot kepada semua komponen aplikasi.

npx shadcn@latest init

Komponen CopilotKit membalut keseluruhan aplikasi dan menerima dua prop - runtimeUrl dan ejen. runtimeUrl ialah laluan API bahagian belakang yang mengehoskan ejen AI dan ejen ialah nama ejen yang melakukan tindakan itu.

Menerima Permintaan dan Menstrim Respons ke Frontend

Untuk membolehkan CopilotKit mengakses dan memproses input pengguna, ia menyediakan cangkuk useCoAgent, yang membenarkan akses kepada keadaan ejen dari mana-mana sahaja dalam aplikasi.

Sebagai contoh, coretan kod di bawah menunjukkan cara menggunakan cangkuk useCoAgent. Pembolehubah keadaan membenarkan akses kepada keadaan semasa ejen, setState digunakan untuk mengubah suai keadaan dan fungsi run melaksanakan arahan menggunakan ejen. Fungsi mula dan berhenti memulakan dan menghentikan pelaksanaan ejen.

cd agent
poetry install

Kemas kini komponen HomeView untuk melaksanakan ejen apabila pertanyaan carian disediakan.

OPENAI_API_KEY=
TAVILY_API_KEY=

Seterusnya, anda boleh menstrim hasil carian ke ResultsView dengan mengakses pembolehubah keadaan dalam cangkuk useCoAgent. Salin coretan kod di bawah ke dalam komponen ResultsView.

"""
This is the main entry point for the AI.
It defines the workflow graph and the entry point for the agent.
"""
# pylint: disable=line-too-long, unused-import
from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver

from ai_researcher.state import AgentState
from ai_researcher.steps import steps_node
from ai_researcher.search import search_node
from ai_researcher.summarize import summarize_node
from ai_researcher.extract import extract_node

def route(state):
    """Route to research nodes."""
    if not state.get("steps", None):
        return END

    current_step = next((step for step in state["steps"] if step["status"] == "pending"), None)

    if not current_step:
        return "summarize_node"

    if current_step["type"] == "search":
        return "search_node"

    raise ValueError(f"Unknown step type: {current_step['type']}")

# Define a new graph
workflow = StateGraph(AgentState)
workflow.add_node("steps_node", steps_node)
workflow.add_node("search_node", search_node)
workflow.add_node("summarize_node", summarize_node)
workflow.add_node("extract_node", extract_node)
# Chatbot
workflow.set_entry_point("steps_node")

workflow.add_conditional_edges(
    "steps_node", 
    route,
    ["summarize_node", "search_node", END]
)

workflow.add_edge("search_node", "extract_node")

workflow.add_conditional_edges(
    "extract_node",
    route,
    ["summarize_node", "search_node"]
)

workflow.add_edge("summarize_node", END)

memory = MemorySaver()
graph = workflow.compile(checkpointer=memory)

Coretan kod di atas mendapatkan semula hasil carian daripada keadaan ejen dan menstrimnya ke bahagian hadapan menggunakan cangkuk useCoAgent. Hasil carian dikembalikan dalam format penurunan nilai dan dihantar ke komponen AnswerMarkdown, yang memaparkan kandungan pada halaman.

Akhir sekali, salin coretan kod di bawah ke dalam komponen AnswerMarkdown. Ini akan menjadikan kandungan turun nilai sebagai teks berformat menggunakan pustaka React Markdown.

"""Demo"""

import os
from dotenv import load_dotenv
load_dotenv()

from fastapi import FastAPI
import uvicorn
from copilotkit.integrations.fastapi import add_fastapi_endpoint
from copilotkit import CopilotKitSDK, LangGraphAgent
from ai_researcher.agent import graph

app = FastAPI()
sdk = CopilotKitSDK(
    agents=[
        LangGraphAgent(
            name="ai_researcher",
            description="Search agent.",
            graph=graph,
        )
    ],
)

add_fastapi_endpoint(app, sdk, "/copilotkit")

# add new route for health check
@app.get("/health")
def health():
    """Health check."""
    return {"status": "ok"}

def main():
    """Run the uvicorn server."""
    port = int(os.getenv("PORT", "8000"))
    uvicorn.run("ai_researcher.demo:app", host="0.0.0.0", port=port, reload=True)

Tahniah! Anda telah menyelesaikan projek untuk tutorial ini. Anda juga boleh menonton rakaman video di sini:

Rakaman Webinar Lengkap

---

Membungkusnya

Kepintaran LLM adalah yang paling berkesan apabila ia berfungsi bersama kecerdasan manusia, dan CopilotKit CoAgents membolehkan anda menyepadukan ejen AI, copilot dan pelbagai jenis pembantu ke dalam aplikasi perisian anda dalam beberapa minit sahaja.

Jika anda perlu membina produk AI atau menyepadukan ejen AI ke dalam apl anda, anda harus mempertimbangkan CopilotKit.

Kod sumber untuk tutorial ini tersedia di GitHub:

https://github.com/CopilotKit/CopilotKit/tree/main/examples/coagents-ai-researcher

Terima kasih kerana membaca!

Atas ialah kandungan terperinci Bina klon Perplexity dengan LangGraph, CopilotKit, Tavily & Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!