aicanvas-me/aicanvas

헤드리스 프리미티브가 아닌 완성된 컴포넌트

애니메이션 React 컴포넌트와 조합 가능한 페이지 블록의 성장하는 컬렉션으로, 종속성(dependency)으로 설치되는 것이 아니라 프로젝트에 실제 소스 코드로 설치됩니다.

설치 · 컴포넌트 · 블록 · MCP · 레포 레이아웃 · FAQ · 라이선스

단 하나의 명령어로 프로젝트에 모든 컴포넌트를 추가할 수 있습니다:

npx shadcn@latest add @aicanvas/task-cards

새로운 프로젝트를 시작하는 경우, 먼저 초기화한 후 추가합니다:

npx shadcn@latest init # 새로운 프로젝트에만 해당
npx shadcn@latest add @aicanvas/task-cards

설치는 무료 AI Canvas 계정에 연결됩니다. 로그아웃된 상태에서는 CLI가 컴포넌트 대신 작은 플레이스홀더 파일(placeholder file)을 작성하므로, 먼저 한 번 인증해야 합니다:

• 무료로 가입하고 계정 설정에서 토큰을 복사합니다.
• .env.local에 AICANVAS_TOKEN으로 붙여넣습니다.

프로젝트의 components.json에 다음 레지스트리를 한 번 추가합니다:

`{

MIT 라이선스. 무료 라이브러리는 MIT이므로 개인 및 상업 프로젝트에 사용할 수 있고, 자유롭게 수정할 수 있으며, 출처 표기 없이 배포할 수 있습니다. 프리미엄 컴포넌트, 디자인 시스템, 템플릿은 독점적입니다.전체 소스 코드, 당신의 것. 모든 컴포넌트는 블랙박스 종속성이 아닌 실제 React 및 TypeScript 코드로 여러분의 코드베이스에 도착합니다. 스타일을 변경하거나, 확장하거나, 그대로 배포할 수 있습니다. 이것은 당신의 것입니다.AI 워크플로우를 위해 구축됨. shadcn CLI로 설치하고, MCP를 연결하여 에이전트가 대신 설치하도록 하거나, 모든 AI 코딩 도구에서 작동하는 리믹스 프롬프트를 제공하세요.기본적으로 애니메이션 적용. Framer Motion과 Tailwind CSS로 구축되어 Next.js App Router 또는 모든 최신 React 설정에 준비되어 있습니다. 3D 요소는 Three.js를 사용합니다.

컴포넌트가 조합된 다중 컴포넌트 페이지 섹션: 카드 덱, 작업 보드, 갤러리. 설치는 동일하고 MIT 라이선스도 같지만, 단일 컴포넌트보다 더 큰 단위의 작업입니다.

AI Canvas를 AI 에디터에 연결하여 에이전트가 컴포넌트를 검색하고, 검사하고, 대신 설치하도록 하세요. 토큰을 절약하세요. 처음부터 시작하지 마세요.

claude mcp add aicanvas -- npx -y @aicanvas/mcp

또는 MCP 설정에 추가합니다:

{
"mcpServers": {
"aicanvas": {
...

Claude Code, Codex, Cursor 및 기타 MCP 호환 에디터에서 작동합니다. 서버는 읽기 전용이며 런타임에 라이브 레지스트리를 가져오므로, 새로운 컴포넌트는 배포된 직후 곧바로 여러분의 에이전트에게 도달합니다. 이는 게시된 컴포넌트 메타데이터와 소스 코드를 반환합니다.

이 저장소는 AI Canvas 소스를 담고 있습니다: 웹사이트 및 무료 컴포넌트 라이브러리입니다. 컴포넌트 소스는 여기에 있으며, 사이트만 있는 것이 아닙니다.

@aicanvas

레지스트리 파일은 /r/*.json에서 제공됩니다.

이 레지스트리는 components-workspace/와 design-systems/에서 빌드 시점에 생성되므로, 커밋된 registry/ 폴더는 없습니다. 로컬에서 이를 생성하려면 node scripts/generate-registry.mjs를 실행하세요.

React 및 TypeScript, Tailwind CSS, Framer Motion을 사용합니다. Next.js App Router용으로 구축되었으며 모든 최신 React 설정에서 작동합니다. 3D 컴포넌트는 Three.js를 사용합니다.

계정이 필요한가요?
코드를 읽는 것은 필요하지 않습니다. 모든 컴포넌트 페이지는 전체 소스 코드를 보여주며, 자유롭게 읽고 복사할 수 있습니다. 무료 라이브러리의 대부분도 이 저장소에 바로 존재합니다. 무료 계정은 오직 한 번의 명령어인 npx shadcn add 설치 시에만 필요하며, 이때 로그아웃 상태일 경우 플레이스홀더 파일이 작성됩니다.

Next.js 외부에서도 작동하나요?
예. 컴포넌트는 Tailwind와 Framer Motion을 사용한 순수 React 및 TypeScript입니다. App Router가 기본 대상이지만 필수 사항은 아닙니다. 몇몇 컴포넌트는 next/font/google를 통해 표시 폰트를 로드합니다. Next.js 외부에서는 해당 임포트문을 자체 폰트 로더로 교체하세요.

의존성을 받나요, 아니면 실제 코드를 받나요?
실제 코드입니다. 설치는 소스를 프로젝트에 복사하므로 사용자가 소유하며 무엇이든 변경할 수 있습니다. 동기화해야 하는 AI Canvas 패키지는 없습니다.

상업적으로 사용할 수 있나요?
예, 무료 라이브러리는 MIT 라이선스입니다. 상업적 프로젝트에서 사용하고 수정하여 출처 표기 없이 배포할 수 있습니다. Premium은 별도로 라이선스가 부여되므로 [License]를 확인하세요.

리믹스 프롬프트란 무엇인가요?
모든 컴포넌트는 하나 이상의 포괄적이고 플랫폼에 구애받지 않는 프롬프트를 가지고 제공됩니다. 이 프롬프트를 모든 AI 코딩 도구에 붙여넣어 해당 컴포넌트를 복사하는 대신 원하는 방식으로 재구축할 수 있습니다.

컴포넌트를 최신 상태로 유지하려면 어떻게 해야 하나요?
그럴 필요가 없습니다. 한 번 설치하면 코드는 사용자의 것이며 결코 변경되지 않습니다. 최신 버전의 컴포넌트가 필요한 경우 설치 명령을 다시 실행하세요.

AI Canvas는 활발하게 유지 관리되고 있으며 새로운 컴포넌트가 정기적으로 제공됩니다. 이슈, 아이디어 및 풀 리퀘스트를 환영합니다: 컴포넌트를 제안하거나 버그를 보고하려면 이슈를 여세요.

AI Canvas가 시간을 절약해 준다면, 별표(star)는 더 많은 빌더들이 이 라이브러리를 찾도록 돕습니다.

이 무료 라이브러리는 MIT 라이선스를 따릅니다. 개인 및 상업 프로젝트에 사용하고, 자유롭게 수정하며, 출처 표기 없이 배포할 수 있습니다. LICENSE를 확인하세요. 프리미엄 컴포넌트, 디자인 시스템, 템플릿은 AI Canvas Premium License 하의 독점(proprietary) 콘텐츠입니다.