Bagi developer yang membangun aplikasi AI generatif, tahun lalu merupakan tahun yang penuh dengan progres. Kita telah melihat kemajuan luar biasa dalam sistem agentik backend yang bisa melakukan penalaran, perencanaan, dan mengeksekusi tugas-tugas kompleks. Namun, agen yang kuat hanyalah separuh dari cerita. Bagaimana Anda menghubungkan kecerdasan tersebut dengan mulus ke frontend aplikasi Anda? Bagaimana Anda menciptakan pengalaman yang benar-benar kolaboratif antara pengguna dan AI Anda?
Hari ini, kami sangat senang bisa menyoroti integrasi baru yang secara langsung menjawab tantangan ini: Agent Development Kit (ADK) kini dapat digunakan bersama AG-UI, sebuah protokol terbuka untuk membangun pengalaman pengguna AI yang kaya dan interaktif. Kombinasi ini memberdayakan Anda untuk membangun agen AI mutakhir di backend dan memberikan frontend kolaboratif yang siap produksi dengan upaya minimal.
Agent Development Kit (ADK) adalah toolkit open source yang sudah termasuk baterai untuk membangun agen AI yang melakukan berbagai hal, bukan hanya chat. Toolkit ini mengabstraksikan bagian tersulit dari rekayasa agen, sehingga Anda bisa fokus pada logika unik aplikasi Anda.
Secara langsung, ADK menyediakan agen Anda dengan:
Dengan ADK, Anda bisa mengubah ide menjadi prototipe agen yang berfungsi dalam hitungan jam, semuanya dengan tetap memegang kontrol penuh untuk menentukan peran agen dan alat yang dapat diaksesnya.
Developer menyukai tempat bermain developer lokal ADK dan proses debug UI adk web, tetapi ini bukanlah UI yang ditampilkan kepada pengguna. Developer Flutter menyukai Flutter AI Toolkit dan ada banyak project UI agen lain untuk memulai, tetapi sejauh ini semua integrasi UI dan agen telah dipesan lebih dahulu, tidak ada standar untuk komunikasi antara Agen dan UI.
Tim CopilotKit merilis AG-UI sebagai protokol terbuka dan lapisan UI yang dirancang untuk menstandarkan agen yang berbicara langsung dengan pengguna menggunakan UI yang kaya. AG-UI berfokus pada agen yang langsung ditampilkan kepada pengguna (bukan agen latar belakang) dan menggunakan integrasi middleware dan klien untuk menggeneralisasi setiap front end dan back end. AG-UI menyediakan cara terstandardisasi bagi agen backend untuk berkomunikasi dengan aplikasi frontend, memungkinkan kolaborasi stateful secara real-time antara AI dan pengguna manusia.
Pembuat AG-UI juga menyediakan CopilotKit, sebuah library open source yang terdiri dari komponen React dan hook yang dapat digunakan bersama AG-UI. Ini berarti Anda bisa mendapatkan antarmuka chat yang disempurnakan, sidebar, dan elemen UI lainnya yang berjalan di aplikasi Anda dalam hitungan menit.
Dengan menggabungkan backend yang kuat (ADK) dengan protokol frontend yang fleksibel (AG-UI), Anda sekarang bisa membangun aplikasi AI yang benar-benar interaktif. ADK menjalankan “otak” agen dan orkestrasi alat, sementara AG-UI menyediakan saluran komunikasi ke komponen UI untuk pengalaman pengguna yang mulus.
Integrasi ini membuka kelas fitur baru, langsung dari kotaknya:
Memulainya semudah menjalankan satu perintah. Ini akan mengkloning repositori starter full-stack dengan backend ADK yang sudah dikonfigurasi dan frontend Next.js menggunakan CopilotKit.
npx copilotkit@latest create -f adkSetelah Anda memiliki project starter, logika intinya sederhana.
/backend/agent.ts)Dalam backend ADK Anda, tentukan petunjuk agen Anda dan berikan alat untuk bekerja.
// backend/agent.ts
import { adk } from "@copilotkit/adk";
adk.setSystemMessage(
"You are a helpful assistant that can fetch stock prices."
);
// Define a tool the agent can use
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}...`);
// In a real app, you would call a financial API here.
const price = (Math.random() * 1000).toFixed(2);
return `The current price of ${ticker} is $${price}.`;
},
});
export default adk;2. Hubungkan ke Frontend (/frontend/src/app/page.tsx)
Dalam frontend React/Next.js, Anda mengemas aplikasi Anda dengan penyedia CopilotKit dan menggunakan komponen 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>
);
}Selesai! Kini Anda memiliki agen AI yang berfungsi penuh dengan frontend yang disempurnakan, siap untuk Anda sesuaikan dan kembangkan. Gunakan library komponen UI yang sudah dibuat sebelumnya, dan kembangkan dengan widget Anda sendiri, tetapi semua lapisan komunikasi ditangani untuk Anda.
Berhentilah bergulat dengan kompleksitas menghubungkan logika agen ke antarmuka pengguna Anda. Dengan integrasi ADK dan AG-UI, Anda bisa fokus pada hal yang paling penting: mengirimkan aplikasi AI yang kuat, cerdas, dan kolaboratif.
Referensi:
npx copilotkit@latest create -f adk
