AgentBoard: 에이전틱 AI 커뮤니티를 위한 디스커버리 플랫폼

Source: Dev.to

Introduction

이 글은 DEV Weekend Challenge: Community에 제출한 작품입니다. 저는 The Agentic Engineer라는 주간 뉴스레터에서 에이전트 AI 분야를 다루고 있습니다. 독자들은 자율 에이전트, 다중 에이전트 워크플로, AI 도구를 직접 개발·배포하는 빌더들입니다.

가장 많이 받는 질문은 “어떤 프레임워크를 써야 할까?” 입니다.
현재 주요 에이전트 프레임워크가 15개 이상이고, 매주 새로운 프레임워크가 등장합니다. GitHub 트렌딩을 살펴보거나, 트위터에 물어보거나, 이번 달에 비교 포스트가 나왔길 바랄 수밖에 없습니다. 한눈에 탐색·비교·발견할 수 있는 장소가 없습니다.

AgentBoard는 그 빈틈을 메워줍니다: 에이전트 AI 빌더들이 자신이 사용하고 있는 도구를 발견할 수 있는 첫 번째 입구입니다.

What is AgentBoard?

AgentBoard는 AI 에이전트, 프레임워크, 도구를 위한 오픈 디렉터리입니다—Product Hunt와 Awesome Lists가 결합된 형태지만, 에이전트 AI 커뮤니티에 특화되었습니다.

• Live site: https://natearcher-ai.github.io/agentboard
• 로그인도, 백엔드도 없습니다. 모든 것이 localStorage를 이용해 클라이언트 측에서 동작합니다.

Features

• Browse & search: 선별된 AI 에이전트 디렉터리를 탐색하고 검색합니다.
• Filter: 카테고리(개발 도구, 자동화, 연구, 인프라 등)별 필터링.
• Sort: GitHub 스타, 투표 수, 최신 순으로 정렬.
• Detailed agent profiles: 기술 스택, 제작자, 설명, 링크 등 상세 프로필 제공.
• Upvote and bookmark: 즐겨찾기와 투표를 로컬에 저장.
• Submit your own agent: 간단한 양식을 통해 직접 에이전트를 제출.
• Community stats dashboard: 메인 페이지에 커뮤니티 통계 대시보드 표시.
• Beautiful dark theme: 부드러운 애니메이션이 적용된 다크 테마.
• Fully responsive: 모바일·데스크톱 모두 지원.

Screenshots

Home

랜딩 페이지에는 히어로 섹션, 커뮤니티 통계, 추천 에이전트가 표시됩니다.

Discover

카테고리 탭과 정렬 옵션이 있는 필터·검색 가능한 디렉터리.

Submit

자신의 AI 에이전트를 디렉터리에 기여할 수 있는 깔끔한 양식.

(Screenshots omitted for brevity.)

Stack

• Framework: React 19
• Build tool: Vite
• Styling: Tailwind CSS v4
• Routing: React Router
• Icons: Lucide

이 프로젝트는 정적 싱글 페이지 애플리케이션입니다. 시드 데이터는 하나의 JavaScript 파일에 저장되어 있으며, 새 에이전트를 추가하려면 배열에 객체를 하나 추가하면 됩니다. UI는 보라·파랑 그라디언트 팔레트를 사용한 다크 테마와 카드 호버 애니메이션, Discover 페이지의 실시간 검색 기능을 제공합니다.

Deployment

• GitHub Actions를 통해 GitHub Pages에 배포됩니다.
• main 브랜치에 푸시하면 1분 이내에 사이트가 업데이트됩니다.

License

MIT 라이선스. 풀 리퀘스트를 환영합니다.

View on GitHub: https://github.com/natearcher-ai/agentboard