PyTorchKR
ChatGPT 이후 AI가 제공하는 기능들에 대한 관심이 높아지고, 여러가지 서비스나 애플리케이션에 AI 기능을 통합하려는 시도들 또한 많아지고 있습니다. CopilotKit은 이러한 기능 개발을 위한 프레임워크로, 챗봇이나 에이전트, 자동 완성 텍스트 등의 기능 / 컴포넌트를 제공하는 프레임워크입니다.
CopilotKit: 애플리케이션 및 서비스에 AI 기능 통합을 위한 프레임워크
소개
CopilotKit은 애플리케이션이나 서비스 내에 AI 챗봇, AI 에이전트 및 AI 자동완성 텍스트 입력폼 등을 포함한 맞춤형 AI Copilot 기능을 추가할 수 있는 프레임워크입니다. 이 프레임워크는 사용자의 애플리케이션 상태를 인식하고 해당 상태에 따라 동작할 수 있는 AI 기능을 제공합니다.
CopilotKit은 애플리케이션의 상태를 인식하고 해당 상태에 따라 동작할 수 있는 AI 기능을 제공한다는 점에서 차별화됩니다. 특히, 외부 서비스와의 연동을 통해 더욱 다양한 환경에서 사용할 수 있는 강점을 가지고 있습니다.
주요 기능
CopilotChat
앱 인식 가능한 AI 챗봇으로, 애플리케이션의 현재 상태를 "보고" 앱 내에서 직접 조치를 취할 수 있습니다. Salesforce, Dropbox와 같은 제3자 서비스와의 플러그인을 통해 앞단과 뒷단, 그리고 제3자 서비스와 대화할 수 있습니다.
CopilotTextarea
기존 <textarea>를 대체할 수 있는 구성요소로, 자동 완성, AI 기반 편집 및 초기 생성을 지원합니다. 사용자 데이터 및 Copilot 애플리케이션 컨텍스트에 기반하여 동작합니다.
In-App Agents
실시간 애플리케이션 컨텍스트에 접근할 수 있는 에이전트로, 애플리케이션 내에서 동작할 수 있습니다. LangChain 기술을 기반으로 합니다.
LangChain AI 에이전트 통합
최근 추가된 기능 중 하나로, LangChainAI 에서 제공하는 에이전트를 자신의 애플리케이션에 통합할 수 있습니다. 이를 통해 보다 지능적이고 효율적인 AI 동작이 가능해집니다.
실시간 지식 기반 질문 처리
RAG 워크플로우를 사용하여 실시간으로 데이터를 처리하고 질문에 답변할 수 있는 시스템을 구축할 수 있습니다. 이 기능은 지식 기반 질문에 신속하고 정확하게 반응하는 데 큰 도움이 됩니다.
<CopilotTextarea /> 사용 예시
CopilotKit을 사용하기 위해 필요한 몇 가지 기본적인 진입점을 정의합니다. 예를 들어, 애플리케이션 상태(frontend + backend + 제3자)와 애플리케이션 상호작용(단순 TypeScript 코드를 통한 frontend + backend)을 설정해야 합니다. 설치는 npm을 통해 간단히 이루어집니다:
npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea
이후, 다음과 같은 예시 코드를 통해 <textarea />를 대체하여 사용할 수 있습니다.
import "@copilotkit/react-textarea/styles.css"; // add to the app-global css
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotKit } from "@copilotkit/react-core";
// call ANYWHERE in your app to provide external context (make sure you wrap the app with a <CopilotKit >):
// See below for more features (parent/child hierarchy, categories, etc.)
useCopilotReadable({
description: "The description of your data",
value: relevantInformation,
});
useMakeCopilotDocumentReadable(document);
return (
<CopilotKit url="/api/copilotkit/chat">
{" "}
{/* Global state & copilot logic. Put this around the entire app */}
<CopilotTextarea
className="p-4 w-1/2 aspect-square font-bold text-3xl bg-slate-800 text-white rounded-lg resize-none"
placeholder="A CopilotTextarea!"
autosuggestionsConfig={{
purposePrompt:
"A COOL & SMOOTH announcement post about CopilotTextarea. Be brief. Be clear. Be cool.",
forwardedParams: {
// additional arguments to customize autocompletions
max_tokens: 25,
stop: ["\n", ".", ","],
},
}}
/>
</CopilotKit>
);
CopilotKit을 활용한 데모 애플리케이션
ToDo App
PowerPoint + Copilot Demo
Spreadsheets + Copilot Demo
참고
CopilotKit GitHub 저장소
CopilotKit 문서 사이트
이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 