공동 에이전트 Agent-Native 애플리케이션을 구축하기 위해 LanGraph 에이전트를 React 앱에 통합하는 데 필요한 툴킷을 제공합니다. 이번 포스팅에서는 이 도구에 대해 이야기하고 어떻게 할 수 있는지 알아보겠습니다. Copilot으로 구동되는 AI CoAgent 또는 앱을 구축하세요.
CoAgent란 무엇입니까?
앞서 언급했듯이 CoAgent는 AI 에이전트를 앱에 통합하여 에이전트 네이티브 애플리케이션을 만들 수 있는 도구 키트입니다. 이제 그 기능에 대해 이야기하겠습니다.
- CoAgents에는 다음과 같은 기능이 있습니다. 공유 상태 이로 인해 단 한 줄의 코드로도 애플리케이션이 에이전트의 인사이트를 가져올 수 있고, 에이전트는 동기화되어 실시간으로 상호 작용할 수 있으므로 인사이트 애플리케이션을 가져올 수 있습니다.
- 그것은 또한 당신에게 제공합니다 실시간 프런트엔드 사용자가 제공한 컨텍스트와 애플리케이션 상태에 따라 프런트엔드 및 백엔드 작업을 모두 수행할 수 있는 에이전트는 생성 UI이므로 이러한 도구 호출은 요구 사항에 따라 자동으로 전파됩니다.
- 인간 참여형 인간의 감독과 개입을 AI 워크플로에 원활하게 통합하고 입력 또는 승인을 위한 중단점을 지정하여 안전성과 성능을 향상시킵니다.
- 우리는 또한 스트림 중간 에이전트 상태, 상담원의 사고 프로세스를 실시간으로 시각화하여 투명성과 매력적인 사용자 경험을 제공합니다. 이는 상담원 성과와 사용자 기대에 부응하는 UX에 매우 중요합니다.
- CoAgent의 에이전트 생성 UI 사용자 요구와 에이전트 출력에 맞게 조정되는 동적 AI 생성 인터페이스를 생성하여 에이전트 상태에 대한 가시성을 제공하고 신뢰를 구축합니다.
앞서 언급한 기능이 마음에 든다면 비즈니스에 CoAgent를 사용하는 것을 고려할 수 있습니다. 그 방법을 살펴보겠습니다.
Copilot으로 구동되는 AI CoAgent 또는 앱 구축
Copilot에서 제공하는 AI CoAgent 또는 앱을 구축하려면 아래 단계를 따르세요.
- CopilotKit 설치
- 원격 백엔드 끝점 구성
- LangGraph 에이전트 추가
그들에 대해 자세히 이야기합시다.
1] CopilotKit 설치
CoAgent를 시작하기 전에 먼저 장치에 CopilotKit을 설치해야 합니다. 우리는 당신이 이미 Node.js와 npm을 설치했습니다. 컴퓨터에 React 애플리케이션용 폴더를 생성했지만 이 단계의 마지막 부분은 선택 사항입니다. CopilotKit은 오픈 소스 LLM 모델을 사용합니다. 이 튜토리얼에서는 OpenAI API 키. 더 이상 고민하지 말고 시작해 보겠습니다.
- 열려 있는 윈도우 터미널 다음을 사용하여 React 앱을 만든 위치로 이동합니다. CD(디렉토리 변경) 명령.
cd C:\React\myapplication
- 이제 다음 명령을 실행하십시오.
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
- 그런 다음 아래 언급된 명령을 실행하여 OpenAI를 설치합니다.
npm install openai
- 프로젝트에서 .이브 파일의 경우 루트에 위치하며 다음 줄을 추가합니다.
OPENAI_API_KEY=your_api_key_here
파일을 변경한 후 다음으로 이동하는 것이 좋습니다. docs.copilot.ai/quickstart 프로젝트에서 끝점을 구성하고 CopilotKit 공급자를 구성하는 방법을 알아봅니다.
2] 원격 백엔드 끝점 구성
핫메일 첨부 제한
Python 기반 서비스(또는 다른 Node.js 대안)를 통합하려면 Copilot 앱을 원격 백엔드 엔드포인트에 연결해야 합니다. 이를 위해 먼저 다음 쿼리를 사용하여 Windows 터미널에 Copilot 종속성을 설치하겠습니다.
pip install copilotkit fastapi uvicorn --extra-index-url https://copilotkit.gateway.scarf.sh/simple/
이제 FastAI 서버를 설정해야 합니다. 이를 위해 아래에 언급된 명령을 실행하세요.
mkdir my_copilotkit_remote_endpoint
cd my_copilotkit_remote_endpoint
echo. > server.py
만약 에코 작동하지 않으면 Visual Studio Code에서 폴더를 열고 다음을 만들 수 있습니다. server.py 파일.
열기 server.py 파일을 VSCode에 저장한 후 다음 코드 줄을 붙여넣습니다.
from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"}
이제 다음으로 돌아가세요. 윈도우 터미널 FastAPI와 Uvicorn을 설치하세요.
pip install fastapi uvicorn
이 작업이 끝나면 다음으로 이동하세요. docs.copilot.ai 자세한 내용을 안내합니다.
3] LangGraph 에이전트 추가
다음으로 LangGraph 에이전트를 server.py 파일에 통합해야 합니다. 먼저, 일반적으로 server.py에 있는 Python 원격 엔드포인트 내에서 CopilotKitSDK 인스턴스를 찾으세요. 다음으로 LangGraph 에이전트를 수용하도록 CopilotKitSDK 인스턴스(이전 단계에서 설정)를 조정합니다. 다음 코드 줄을 추가해야 합니다.
agents=[
LangGraphAgent(
name="basic_agent",
description="Agent that answers questions about the weather",
graph=the_langraph_graph,
# copilotkit_config={ # if you use Google Gemini, uncomment this code (and import `copilotkit_messages_to_langchain`, see above)
# "convert_messages": copilotkit_messages_to_langchain(use_function_call=True)
# }
)
],
이는 CopilotKitSDK 태그 아래에 포함되어야 합니다.
watermark.ws
자세한 내용은 다음에 언급된 가이드를 따르는 것이 좋습니다. docs.copilotkit.ai/coagents.
읽다: Visual Studio Code용 최고의 무료 AI 확장은 무엇입니까?
나만의 Copilot을 구축하려면 어떻게 해야 합니까?
새 부조종사를 만들려면 Copilot Studio 홈 페이지(/copilotstudio.microsoft.com)로 이동하여 만들다 왼쪽 탐색 메뉴에서 부조종사 페이지. 또는 다음을 선택할 수 있습니다. + 새로운 부조종사 Copilots 페이지에서. 제공된 질문에 따라 채팅을 통해 부조종사를 설명하거나 선택하세요. 구성으로 건너뛰기 그리고 양식을 작성하세요. 마지막으로 '만들기'를 선택하여 프로세스를 완료합니다.
Copilot이 코드를 생성할 수 있나요?
예, Copilot은 코드를 생성할 수 있습니다. 그러나 완벽할 수는 없습니다. 여러 가지 결함과 버그가 있을 수 있습니다. 따라서 철저한 수동 검사 없이 AI 챗봇이 제공하는 코드를 통합해서는 안 됩니다. 내장 앱인 Edge에서 Microsoft의 Copilot을 사용할 수 있습니다. 확장을 사용하여 Visual Studio에서 GitHub Copilot을 사용합니다.
또한 읽어보세요: Copilot을 사용하여 굴절기 코드를 사용하세요.