사람함께에이전트▾
사람 — 직접 정하고 책임지는 비즈니스 규칙과 흐름. 직접 읽어보세요.
함께 — 개념은 알아두고, 세부 규칙은 에이전트가 따릅니다.
에이전트 — 에이전트가 따르는 규칙과 레퍼런스. 필요할 때 찾아보세요.
CLI 레퍼런스▾
AkanJS 레퍼런스▾
akanjs/ui
akanjs/ui는 프레임워크가 제공하는 공용 UI 패키지입니다. 링크, 데이터 로딩, 모델 CRUD 셸, 폼 컨트롤, 표시 헬퍼, 오버레이, 인페이지 에이전트, 앱 셸이 모두 여기 있습니다. 이 레퍼런스의 모든 이름은 이 경로 하나에서 import합니다.페이지 안내
지금 작업하는 영역의 페이지를 여세요. 그 페이지에서는 컴포넌트마다 섹션 하나를 두고, props 표와 props만으로는 전할 수 없는 설명을 함께 싣습니다.
핵심 (Core)→
대부분의 페이지를 이루는 기본 부품입니다. 라우팅, 이미지, 페이지 셸, 데이터 로딩, 모델 CRUD를 다룹니다.Link, Image, Layout, Load, Model
표시 (Display)→
데이터와 피드백을 보여 줍니다. 관리자 목록, 상대 시각, 로딩·빈 상태, 배지, 표가 있습니다.Data, RecentTime, Loading, Empty, Table, Pagination, Badge
폼 (Forms)→
템플릿, 필터, 관리자 화면에서 쓰는 폼 컨트롤과 버튼입니다.Field, Input, Select, Switch, Radio, ToggleSelect, DatePicker, Button
오버레이 (Overlays)→
페이지 위에 뜨는 것들입니다. 모달, 확인 창, 시트, 메뉴, 힌트, 복사 버튼이 있습니다.Modal, Dialog, Popconfirm, Dropdown, BottomSheet, Tooltip, Menu, Portal, Copy
시스템 (System)→
앱 셸, 클라이언트 전용 경계, API 탐색기, 탭, 애니메이션입니다.System, ClientSide, Signal, Tab, animated
에이전트 (Agent)→
인페이지 에이전트입니다. 레이아웃의 채팅 하나, 자기 대화를 갖는 zone, 라우트 지침, 개발용 도크가 있습니다.Agent.Chat, Agent.Zone, Agent.Guide, Agent.History, Agent.Skip, Agent.Scope, Agent.Dock
커스터마이즈→
page/**/_overrides.tsx 파일 하나로 프레임워크 컴포넌트를 라우트 단위로 바꿉니다. 호출부는 그대로입니다._overrides.tsx, override(), 슬롯 46개레시피 (Recipe)→
className 팩토리입니다. 가져다 쓰거나,
apps/<app>/ui/Recipe/에 만들거나, recipes 키로 교체합니다.buttonRecipe, badgeRecipe, inputRecipe전체 export
akanjs/ui가 export하는 모든 값을 A부터 Z까지 모았습니다. 이름은 아는데 페이지를 모를 때 쓰세요.- 설명 앞의 이름표가 페이지입니다. 그 영역을 다루는 페이지 이름이 설명 맨 앞에 있고, 누르면 그 페이지로 갑니다.
- 자기 섹션이 있는 이름은 링크입니다. 이름을 누르면 그 섹션으로 바로 갑니다.
- 여기서만 표시는 따로 다루는 페이지가 없다는 뜻입니다. 그 한 줄이 문서의 전부입니다.
- 타입 전용 export는 뺐습니다. 타입은 자신이 설명하는 컴포넌트를 따라가고, props interface는 그 컴포넌트의 props 표에 있습니다.
이름설명
AgentAttachments
에이전트 · 첨부 파일 칩입니다. 입력창과 보낸 메시지에 붙습니다.
커스터마이즈 · 참조로 넘긴 핸들러의
data-akan-* 속성입니다. 직접 만든 컨트롤에 펼쳐 넣습니다.AgentProvider
에이전트 · 하위 트리에 세션 하나를 내려 줍니다. 세션은 직접 넘기거나
runner로 만들고, 그 안의 Agent.Chat이 이 세션을 씁니다.AgentReferences
에이전트 ·
@ 참조 칩입니다. 입력창과 보낸 메시지에 붙습니다.AgentSession
에이전트 · 브라우저에서 도는 대화 루프입니다. 대화 기록을 직접 소유하려면 이것을 만듭니다.
agentSessionOf
에이전트 ·
Agent.Chat이 받는 것과 같은 옵션으로 AgentSession을 만듭니다.커스터마이즈 · 배지의 className 팩토리이며, 레시피 슬롯이기도 합니다.
오버레이 · 모바일용 시트이며, 높이는
half와 full 두 가지입니다.커스터마이즈 · 버튼의 className 팩토리이며, 레시피 슬롯이기도 합니다.
ChatCommands
에이전트 · 채팅의 슬래시 명령 목록이며,
/ 메뉴 전체입니다.시스템 · 클라이언트 전용 콘텐츠를 감싸는 작은 Suspense 경계입니다.
Clipboard
오버레이 · 복사 아이콘 하나이며 누르면 체크 표시로 바뀝니다. 성공 토스트까지 띄우는 쪽은
Copy입니다.커스터마이즈 · 프레임워크 컴포넌트가 라우트의 override 슬롯을 거쳐 결정되게 만듭니다.
CsrImage
핵심 · 최적화를 거치지 않는
Image입니다. CSR 전용 번들을 위해 일반 img를 그립니다.폼 · 브라우저 기본 날짜 입력이며,
RangePicker와 TimePicker가 함께 있습니다.DefaultApprovalDefaultBubbleDefaultCodeDefaultComposerDefaultLauncherDefaultMarkdownDefaultAgentMenuDefaultQuestionDefaultQueuedDefaultStepsDefaultToolCardDefaultToastDefaultToastItem
커스터마이즈 · 각 슬롯의 기본 구현입니다. 교체 컴포넌트가 가져다 조합할 수 있게 공개되어 있습니다.
DragAction
여기서만 · 옆으로 밀면 왼쪽·오른쪽 동작이 드러나는 행입니다.
Body, Left, Right로 조립합니다.DraggableList
여기서만 · 끌어서 순서를 바꾸는 목록이며
Item과 Cursor가 있습니다. Field.TextList가 이것으로 만들어졌습니다.오버레이 ·
data-dropdown-keep-open 속성 이름입니다. 이 속성이 붙은 항목을 눌러도 메뉴가 닫히지 않습니다.에이전트 · 기본 러너입니다. 매 턴을 앱의
runAgentTurn 엔드포인트로 보냅니다.FontFace
여기서만 ·
ReactFont 하나의 @font-face 규칙을 브라우저에 넣습니다. .fonts()에 선언한 글꼴은 이미 처리됩니다.에이전트 · 매 턴을 지정한 URL로 POST하는 러너입니다. 스트리밍 응답과 일반 응답을 모두 받습니다.
InfiniteScroll
여기서만 · 감시 요소가 화면에 들어오면 다음 묶음을 불러옵니다.
reverse는 위쪽에 덧붙이면서 읽던 위치를 지킵니다.커스터마이즈 · 입력 필드 껍데기의 className 팩토리이며, 레시피 슬롯이기도 합니다.
KeyboardAvoiding
여기서만 · 자식 요소를 화면 키보드 위로 밀어 올립니다.
오버레이 · 이전 모달 스킨입니다. 스프링 전환과 끌어서 닫기가 있습니다.
maxAttachmentBytesmaxMessageAttachmentBytesmaxMessageAttachments
에이전트 · 입력창의 기본 첨부 한도입니다. 파일당 4MB, 메시지당 8MB와 5개입니다.
More
여기서만 · 목록 아래 붙는 푸터입니다. 모바일에서는 무한 스크롤, 그 밖에서는 페이지 버튼이며
Load.Units가 기본으로 씁니다.ObjectId
여기서만 · 문서 id를 앞뒤만 남겨 보여 줍니다. 전체 id는 툴팁으로 보이고 복사 버튼이 붙습니다.
OverlayOwnerProviderisOwnOverlayClickOVERLAY_LAYER_ATTRuseOverlayLayerPropsuseOverlayScope
오버레이 · 메뉴가 자기가 띄운 오버레이 안의 클릭과 바깥 클릭을 구분하는 장치입니다.
표시 · 페이지 번호를 prop으로 받는 페이지 버튼입니다.
오버레이 · 되돌리기 어려운 동작 앞에 띄우는 작은 확인 창입니다.
표시 · 상대 시각 라벨이며, 정확한 날짜는 툴팁에 나옵니다.
Reference
에이전트 ·
@ 참조를 다루는 헬퍼입니다. 입력창 속 토큰, 같은 참조인지 판단, 크기 상한을 맡습니다.Refresh
여기서만 · 스크롤되는 자식을 감싸 당겨서 새로고침을 붙입니다.
ScreenNavigator
여기서만 ·
Screen 사이를 스와이프로 넘기며 NavbarItem이 있습니다. namespace를 주면 에이전트에게 공개됩니다.SessionContext
에이전트 ·
Agent.Zone과 AgentProvider가 세션을 아래로 내려 주는 React context입니다.폼 · 버튼 한 줄로 고르는 선택이며,
Multi가 있습니다.tokenCount
에이전트 · 토큰 추정치를
950, 1.2k, 3.4M 같은 짧은 라벨로 바꿉니다.커스터마이즈 · 호출자가 넘긴 트리거를 복제해 aria 상태가 실제 컨트롤에 붙게 합니다.
커스터마이즈 · 모든
_overrides.tsx 뒤에 있는 provider입니다. 하위 트리 하나를 바꿀 때 직접 마운트합니다.표시 · 접근 권한이 없을 때 보이는 자리 표시자입니다.
Empty와 같은 모양이며 직접 렌더합니다.useAgent
에이전트 · 컴포넌트에서 자신을 감싼 세션을 읽습니다.
useAgentReference
에이전트 · 컴포넌트가 보여 주는 데이터를
@ 칩으로 입력창에 넣는 함수를 돌려줍니다.커스터마이즈 · 컴포넌트가 현재 라우트에서 자기 컴포넌트 슬롯과 레시피 슬롯을 찾는 훅입니다.