생성형 AI 애플리케이션 개발자들에게 지난해는 엄청난 발전이 몰아친 한 해였습니다. 저희는 복잡한 작업을 추론, 계획, 실행할 수 있는 백엔드 에이전트 시스템의 놀라운 발전을 목도했습니다. 그러나 강력한 에이전트는 그 전체 이야기의 절반에 불과합니다. 어떻게 하면 그런 인텔리전스를 애플리케이션의 프런트엔드에 원활하게 연결할 수 있을까요? 어떻게 하면 사용자와 AI 간의 진정한 협업 경험을 구현할 수 있을까요?
오늘, 이러한 도전 과제를 직접적으로 해결하는 새로운 통합을 소개하게 되어 기쁩니다. 바로 풍부한 대화형 AI 사용자 환경을 개발하기 위한 개방형 프로토콜인 AG-UI와 ADK(에이전트 개발 키트)가 연동해 작동한다는 소식입니다. 이 조합을 통해 백엔드에서 정교한 AI 에이전트를 개발하고 최소한의 노력으로 프로덕션 환경에 바로 사용할 수 있는 협업적 프런트엔드를 제공할 수 있습니다.
ADK(에이전트 개발 키트)는 즉시 사용 가능한 기능을 완비한 오픈소스 툴킷으로, 단순히 채팅만 하는 것이 아니라 실제로 작업을 하는 AI 에이전트를 개발하기 위해 설계되었습니다. ADK는 에이전트 엔지니어링의 가장 어려운 부분을 추상화하여 개발자가 애플리케이션의 고유한 로직에 집중하도록 해줍니다.
ADK는 별도의 구성 없이 바로 에이전트에 다음 기능을 제공합니다.
ADK를 사용하면 몇 시간 만에 아이디어를 원하는 작업을 수행하는 에이전트 프로토타입으로 구현할 수 있으며, 에이전트의 역할과 에이전트가 액세스할 수 있는 도구를 정의하는 모든 제어 권한도 유지할 수 있습니다.
개발자는 ADK의 로컬 개발자용 테스트 환경과 디버깅 UI인 ADK 웹을 좋아합니다. 하지만 이는 사용자 대상 UI가 아닙니다. Flutter 개발자는 Flutter AI Toolkit을 선호하고, 시작할 수 있는 다른 에이전트 UI 프로젝트도 많습니다. 하지만 지금까지 UI와 에이전트의 통합은 모두 맞춤형으로 제공되었고 에이전트와 UI 간 통신에 대한 표준은 부재했습니다.
CopilotKit 팀은 에이전트가 풍부한 UI를 활용해 사용자와 직접 대화할 수 있도록 표준화하기 위해 AG-UI를 개방형 프로토콜이자 UI 레이어로 출시했습니다. AG UI는 백그라운드 에이전트가 아닌 직접 사용자를 상대하는 에이전트에 중점을 두고, 미들웨어와 클라이언트 통합을 사용하여 그 어떤 프런트엔드와 백엔드에서도 일반적으로 작동하도록 설계되었습니다. 백엔드 에이전트가 프런트엔드 애플리케이션과 통신하기 위한 표준화된 방법을 제공하여 AI와 인간 사용자 간의 실시간, 상태 저장 협업을 지원합니다.
또한 AG-UI 제작자는 CopilotKit도 제공합니다. CopilotKit는 AG UI와 연동하는 간편한 React 구성요소와 후크로 이루어진 오픈소스 라이브러리입니다. 이를 통해 앱에서 몇 분 안에 세련된 채팅 인터페이스, 사이드바, 기타 UI 요소를 실행할 수 있습니다.
강력한 백엔드(ADK)와 유연한 프런트엔드 프로토콜(AG-UI)을 결합하면 진정한 대화형 AI 애플리케이션을 개발할 수 있습니다. ADK는 에이전트의 '두뇌' 및 도구 조정을 실행하는 한편, AG-UI는 원활한 사용자 경험을 위해 UI 구성요소에 대한 통신 채널을 제공합니다.
이 통합은 즉시 새로운 차원의 기능을 제공합니다.
시작하기는 명령어 하나를 실행하는 것만큼 간단합니다. 이 명령어를 실행하면 사전 구성된 ADK 백엔드와 CopilotKit을 사용하는 Next.js 프런트엔드를 포함한 전체 풀스택 스타터 저장소가 복제됩니다.
npx copilotkit@latest create -f adk스타터 프로젝트에서 핵심 논리는 간단합니다.
/backend/agent.ts)ADK 백엔드에서 에이전트의 지침을 정의하고 에이전트가 작업에 사용할 도구를 제공합니다.
// backend/agent.ts
import { adk } from "@copilotkit/adk";
adk.setSystemMessage(
"You are a helpful assistant that can fetch stock prices."
);
// 에이전트가 사용할 수 있는 도구 정의
adk.addTool("getStockPrice", {
description: "Get the current stock price for a given ticker symbol.",
parameters: {
type: "object",
properties: {
ticker: {
type: "string",
description: "The stock ticker symbol (e.g., GOOGL).",
},
},
required: ["ticker"],
},
handler: async ({ ticker }) => {
console.log(`Fetching stock price for ${ticker}...`);
// 실제 앱에서는 여기서 금융 API를 호출합니다.
const price = (Math.random() * 1000).toFixed(2);
return `The current price of ${ticker} is $${price}.`;
},
});
export default adk;2. 프런트엔드 연결(/frontend/src/app/page.tsx)
React/Next.js 프런트엔드에서 애플리케이션을 CopilotKit 공급자로 래핑하고 UI 구성요소를 사용합니다.
// frontend/src/app/page.tsx
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
export default function Home() {
return (
<CopilotKit url="http://localhost:5001/api/adk"> {/* URL to your ADK backend */}
<main>
<h1>Welcome to Your ADK + AG-UI App!</h1>
<p>Ask me to get a stock price.</p>
</main>
<CopilotChat />
</CopilotKit>
);
}이렇게만 하면 됩니다! 이제 세련된 프런트엔드를 갖추고 완벽한 기능을 발휘하는 AI 에이전트가 생겼습니다. 이를 자유롭게 맞춤 설정하고 확장할 수도 있습니다. 미리 구축된 UI 구성요소 라이브러리를 사용하고 자신만의 위젯으로 확장하세요. 단, 모든 통신 레이어는 자동으로 처리됩니다.
에이전트의 로직을 사용자 인터페이스에 연결하는 복잡한 문제와 씨름하지 마세요. ADK와 AG-UI 통합을 사용하면 가장 중요한 점, 즉 강력하고 지능적이며 협업적인 AI 애플리케이션 개발 및 배포에 집중할 수 있습니다.
리소스:
npx copilotkit@latest create -f adk
