Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Open Intelligent UI는 질문이나 아이디어를 설명, 비교, 또는 작동하는 도구로 변환할 수 있는 오픈 소스 채팅 인터페이스입니다. 이 에이전트는 사용자의 작업 흐름에 맞춰 텍스트 답변 외에도 네이티브 컴포넌트나 사용자 지정 대화형 UI를 제공하여 복잡한 상호작용을 지원합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub Trending TypeScript (weekly)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기질문을 설명, 비교, 그리고 작동하는 도구로 변환하는 오픈 소스 채팅 인터페이스입니다.
CopilotKit과 AG-UI를 사용하여 구축되었습니다. · 시작하기 · 개요 · 데모 · 아키텍처 · 기여하기
GitHub Trending: #5 Repository Of The Day
Trendshift: #3 TypeScript Repository Of The Day
프로젝트를 클론하고, 모델과 시각화 라우터를 연결하며, 인터페이스와 에이전트를 사용자의 워크플로우에 맞게 조정하세요.
Open Intelligent UI로 구축하시나요? 엔지니어와 이야기하기 →
</div>54초 분량의 런칭 필름: 질문하고, 3D 설명을 탐색하며, 옵션을 비교하고, 계산기를 사용하고, 해안 일정을 따라갑니다. 이들은 렌더링된 런칭 장면이며; 앱은 각 요청에 대해 에이전트를 실행합니다.
질문을 하거나, 아이디어를 탐색하거나, 옵션을 비교하거나, 순간을 위한 도구를 만들 수 있습니다. 에이전트는 사용자가 작업을 완료하는 데 도움이 되는 것에 따라 직접적인 텍스트 답변, 네이티브 컴포넌트 또는 사용자 지정 대화형 UI를 선택합니다.
인터페이스는 바로 채팅으로 열립니다. 요청을 입력하거나 시작 제안 중 하나를 선택하여 에이전트 실행을 시작할 수 있습니다. 텍스트, 네이티브 컴포넌트, 생성된 인터랙티브 답변이 대화창에 나타납니다. 샘플 숫자는 실제 비즈니스 또는 날씨 데이터가 아닌 예시입니다.
런칭 필름에서: 설명, 비교, 작동 도구, 지도가 하나의 대화에서 가능합니다.
라벨이 지정된 피치(pitch), 롤(roll), 요(yaw) 축을 가진 비행기를 회전시켜 보세요. 각도를 변경하거나, 부드러운 시연을 재생하거나, 보기 설정을 초기화할 수 있습니다.
<div align="center"> <table><tr ><td> </td></tr ></table> </div> _3D 비행기 · 4초._테이블에서 정확한 값을 비교한 다음, 후속 질문을 통해 차이점을 시각화할 수 있습니다. Jev는 기본 테이블에는 A2UI를, 차트 및 더 복잡한 비주얼에는 Open Generative UI를 선택합니다.
<div align="center"> <table><tr ><td> </td></tr ></table> </div> _테이블과 차트 · 8초. 계획 이름 및 가격은 예시입니다._총액, 팁, 인원수에 대한 컨트롤이 있는 청구서를 분할하세요. 입력을 변경함에 따라 계산 결과가 업데이트됩니다.
<div align="center"> <table><tr ><td> </td></tr ></table> </div> _청구서 분할기 · 5초._번호가 매겨진 핀과 목적지 사진이 있는 해안 일정을 탐색합니다. 이 앱은 실시간 USGS 타일을 사용하고, 사진에 대한 출처를 명시하며, 일시 정지하거나, 다시 재생하거나, 정류장을 선택할 수 있게 합니다. 연결선들은 일정을 보여주지만, 검증된 운전 경로가 아닙니다.
<div align="center"> <table><tr ><td> </td></tr ></table> </div> _해안 지도 · 4초._ <details> <summary>장면 갤러리</summary>| 3D 설명 | 테이블 → 차트 |
|---|---|
| 라벨이 지정된 축과 슬라이더로 비행기 회전 탐색. | 정확한 값을 비교한 후, 후속 질문으로 시각화합니다. |
| 지도 |
| :--- | :--- |
| Bill splitter recalculating the share per person | California coastal itinerary with numbered map pins and photo cards |
| 그룹 크기와 팁을 변경하면 계산이 업데이트됩니다. | 핀과 목적지 사진으로 해안 여행 일정을 따라가 보세요. |
이 시작 기능들은 에이전트를 실행합니다. 미리 녹화된 응답이 아닙니다. Jev가 프레젠테이션을 선택하므로 출력은 달라질 수 있습니다. 지도 타일과 목적지 사진에는 네트워크 접속이 필요합니다. 스트리밍 답변은 읽기 위치를 유지하고, 텍스트가 보이는 대로 나타나게 하며, 마우스 오버 또는 키보드 포커스 시 복사 기능을 표시합니다 (터치에서도 항상 사용 가능).
<a id="run-locally"></a>
전제 조건: Node.js 22+, pnpm 9+, Python 3.12+, 그리고 uv.
git clone https://github.com/CopilotKit/OpenIntelligentUI.git
cd OpenIntelligentUI
make setup
...
앱을 엽니다. 에이전트 상태 엔드포인트를 통해 에이전트 서비스가 실행 중인지 확인할 수 있습니다. 구성 및 검증은 시작하기 가이드를 참조하세요.
기본 모델은 chat-latest이며, 이는 OpenAI가 최신 ChatGPT Instant 모델에 대해 문서화한 별칭(alias)으로, OPENAI_API_KEY를 필요로 합니다. Jev(jev-latest, TYPESAFE_API_KEY 필요)는 각 사용자 턴마다 렌더러와 시각화를 선택합니다. 기본 표는 A2UI를 사용하고, 차트, 다이어그램, 계산기, 지도는 Open Generative UI를 사용합니다. 제공자 실패는 다른 라우터나 모델로 조용히 대체되는 대신 표시됩니다. 시각화 라우팅을 참조하세요.
채팅은 첫 메시지 또는 예제 프롬프트를 보내기 전에 두 개의 키를 요청하며, 사용자가 설정하는 동안 초안을 유지합니다. 채팅 헤더에서 API 키를 열고 OpenAI 키와 Jev 키를 입력한 다음, 연결 테스트(Test connection) 및 **키 저장(Save keys)**을 선택하세요. 연결 테스트는 각 제공자에게 작은 요청을 보냅니다. 사용자의 키는 답변에 chat-latest를, 시각화 라우팅에 jev-latest를 사용하여, 사용량은 제공자 계정에 청구됩니다.
키는 새로고침하거나 키 지우기(Clear keys) 전까지 브라우저 메모리에 유지되며, 앱은 이를 브라우저 스토리지에 저장하지 않습니다. 요청은 애플리케이션 서버를 통해 해당 제공자에게 전송됩니다. 이 키들은 채팅 상태나 체크포인트에서 제외되며, 사용자의 키를 사용하는 요청에 대해서는 호스팅된 LangSmith 추적이 비활성화됩니다. 신뢰하는 운영자가 있는 배포 환경에서만 이 기능을 사용하세요. 키 저장 또는 지우기는 새로운 채팅을 시작하며, **새 채팅(New chat)**은 현재 세션의 키를 유지합니다.
이 에이전트는 공유 제공자 키 없이도 실행될 수 있습니다. 방문자는 채팅하기 전에 두 개의 키를 공급해야 합니다. 구성된 서버 자격 증명은 방문자가 키를 생략하는 직접 API 클라이언트에게 계속 사용할 수 있으며, 채팅 인터페이스는 방문자에게 자체 키를 추가하도록 요구합니다.
Python Deep Agent는 작업 우선(task-first) 시스템 프롬프트와 집중된 스킬을 사용합니다. CopilotKit은 에이전트 스트림을 Next.js 앱으로 전달합니다. 네이티브 컴포넌트는 지원되는 구조화된 작업을 처리하며, generateSandboxedUi는 사용자 지정 HTML, CSS 및 JavaScript를 격리된 iframe에 스트리밍합니다.
사용자 정의 UI 파라미터는 다음 순서로 전달되어야 합니다:
initialHeight → placeholderMessages → css → html → jsFunctions → jsExpressions
로컬 컨트롤은 샌드박스(sandbox) 내부에서 실행됩니다. 사용자가 클릭한 후속 조치는 선택된 값을 검증된 호스트 브릿지(host bridge)를 통해 전송하여 또 다른 에이전트 턴(agent turn)을 시작할 수 있습니다. 이전 출력 결과는 별도의 대화 아티팩트(conversation artifacts)로 유지되며, 크로스콜 패치 API(cross-call patch API)는 없습니다. Product and agent behavior와 Architecture를 참조하십시오.
apps/app/ Next.js + CopilotKit 프론트엔드
apps/agent/ Python Deep Agent + FastAPI
apps/mcp/ 선택적 독립형 MCP 서버
...
make dev-app # 프론트엔드
make dev-agent # 에이전트
make dev-mcp # 선택적 MCP 서버
...
실행 워크플로우에는 브라우저 확인 및 실제 제공업체 스모크 테스트(smoke test)가 포함됩니다. 테스트와 빌드만으로는 모델 접근성이나 배포를 검증할 수 없습니다.
선택적 MCP 서버는 스킬 리소스, 프롬프트 템플릿 및 assemble_document를 노출합니다. 어셈블러(assembler)는 HTML 문서를 텍스트로 반환하며, 호환되는 호스트는 이를 렌더링하고 자체 브릿지(bridge)를 구현해야 합니다. 이는 웹 앱의 스트리밍 Websandbox 통합과는 별개입니다.
HTTP, stdio 및 Docker 구성에 대한 자세한 내용은 MCP 서버 가이드를 참조하십시오.
CopilotKit으로 구축되었습니다. openGenerativeUI 런타임 API와 generateSandboxedUi 도구가 스트리밍 경험을 구동합니다.
개발 워크플로우는 Contributing를, 에이전트, 렌더링 및 배포에 대한 가이드는 문서 색인을 참조하십시오.
MIT.