Sieameek/a2ui-adk

a2ui-adk은(는) 무엇을 하나요?

A2UI와 Tailwind CSS, shadcn/ui 디자인 시스템을 사용하여 동적이고 상호작용 가능한 Google ADK 에이전트 UI를 구축합니다.

개요

이 스킬은 Google ADK(Agent Development Kit) 에이전트에 풍부한 사용자 인터페이스를 추가하는 방법을 제공합니다. A2UI를 UI 레이어로 사용하며, Tailwind CSS와 shadcn/ui 디자인 시스템을 통합하여 일관된 디자인과 빠른 개발을 지원합니다.

주요 기능

• 동적 UI 렌더링: A2UI를 사용하여 에이전트 응답에 동적 컴포넌트를 포함시킵니다.
• 디자인 시스템 통합: shadcn/ui와 Tailwind CSS를 기본 디자인 시스템으로 사용합니다.
• 상호작용성: 버튼, 폼, 모달 등 다양한 상호작용 요소를 지원합니다.

설치 및 설정

1. 프로젝트에 A2UI를 설치합니다:

npm install @a2ui/core @a2ui/react

2. Tailwind CSS를 설정합니다:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. shadcn/ui를 초기화합니다:

npx shadcn-ui@latest init

사용 예시

기본 A2UI 컴포넌트 생성

import { A2UIProvider } from '@a2ui/react';
import { Button } from '@a2ui/components';

function AgentUI() {
  return (
    <A2UIProvider>
      <Button onClick={() => alert('에이전트 응답!')}>
        클릭하여 상호작용
      </Button>
    </A2UIProvider>
  );
}

shadcn/ui 컴포넌트 사용

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function AgentCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>에이전트 입력</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="메시지를 입력하세요..." />
      </CardContent>
    </Card>
  );
}

환경 변수

변수명	설명	필수 여부
GOOGLE_API_KEY	Google API 키	예
A2UI_THEME	A2UI 테마 설정 (기본값: light)	아니요

링크

• A2UI 문서
• Google ADK 문서
• shadcn/ui 문서
• Tailwind CSS 문서