thesysdev/open-intelligent-ui

An open-source take on ChatGPT's Intelligent UI: answers stream as interactive UI (maps, photos, charts, drawings and working tools). Built with OpenUI.

Open Intelligent UI – 개요

Open Intelligent UI는 ChatGPT에서 보여준 "지능형 UI" 경험을 재현하는 오픈소스 데모입니다. 예를 들어 "샌프란시스코에서 하루를 계획해 줘"와 같은 사용자 쿼리에 대해 일반 텍스트 대신 지도, 사진, 편집 가능한 일정표 등 풍부한 대화형 답변을 반환합니다. 이 프로젝트는 언어 모델이 UI 컴포넌트(OpenUI Lang 1.0)에 대한 설명을 스트리밍하고 프론트엔드가 이를 렌더링하는 생성형 UI의 오픈 표준인 OpenUI를 기반으로 구축되었습니다.

핵심 아이디어

모델 기반 UI – LLM이 UI 기본 요소(레이아웃, 텍스트, 입력, 미디어, 차트, 지도 등)를 조합하는 OpenUI Lang 프로그램을 생성합니다. 정적 레이아웃은 하드코딩되지 않으며, 모델이 사용할 컴포넌트를 결정합니다.
컴포넌트 라이브러리 – TypeScript 라이브러리(src/lib/components/)는 30개 이상의 재사용 가능한 기본 요소(예: Col, Row, Map, Chart, SearchImage)를 정의합니다. 각 컴포넌트에는 스키마, 스타일링 토큰, 다크 모드 지원이 있습니다.
내장 함수 – 59개의 일반적인 @functions(목록, 수학, 날짜, 색상, 집계 등)를 통해 생성된 프로그램이 값을 계산하고, 상태를 업데이트하고, 대화형 위젯을 구동할 수 있습니다.
상태 및 동작 – UI 입력은 $variables에 바인딩되며, @Set, @CopyToClipboard, @OpenUrl 등의 동작은 서버 왕복 없이 상태를 변경합니다.
플러그 가능한 백엔드 – 기본적으로 앱은 OpenUI Cloud 게이트웨이와 통신하지만, OpenAI 호환 API(OpenRouter, 로컬 Ollama 등)를 지정할 수 있습니다.

작동 방식(높은 수준의 흐름)

사용자가 요청을 입력 → 프론트엔드가 /api/chat으로 전송합니다.
서버가 시스템 프롬프트를 구축 하고(컴포넌트 사양과 프롬프트 옵션 포함) 선택한 LLM(OpenAI, Ollama 등)을 호출합니다.
LLM이 UI를 설명하는 OpenUI Lang을 스트리밍 합니다.
프론트엔드가 스트림을 구문 분석 하고 설명된 컴포넌트를 실시간으로 렌더링합니다. 상태 변경(슬라이더, 체크박스)은 클라이언트에서 동일한 함수를 트리거합니다.
선택적 도구 – SearchImage는 Wikipedia의 리드 이미지를 가져오고, /api/street-route는 OSRM에서 도로 형상을 가져옵니다.

기본 제공 기능

데모 채팅 UI(http://localhost:3000)는 여행 계획, 대시보드 및 기타 "지능형 UI" 프롬프트에 응답할 수 있습니다.
디자인 서피스(/gallery)는 16개의 공식 예제와 2개의 대시보드에 대한 손으로 작성한 프로그램을 보여주며, UI 디자이너가 컴포넌트 세트를 탐색하는 데 유용합니다.
벤치마크 스크립트는 16개의 예제와 8개의 대시보드 프롬프트를 모든 모델에 대해 실행하고, 생성된 UI를 검증하고, 스크린샷을 캡처할 수 있습니다.

시작하기(빠른 단계)

cp .env.example .env
npm install
npm run generate:apiKey   # THESYS_API_KEY를 .env에 기록 (자체 API를 사용하는 경우 건너뛸 수 있음)
npm run dev               # 개발 서버 시작

브라우저를 열고 다음과 같은 요청을 입력합니다.

I'm in San Francisco for a day, plan a sightseeing route for me

지도, 사진, 편집 가능한 일정이 포함된 UI가 나타납니다.

Ollama로 로컬 실행(클라우드 키 불필요)

Ollama를 설치하고 모델을 pull합니다(기본값 qwen3.8:27b).
큰 컨텍스트 창을 보장합니다(OLLAMA_CONTEXT_LENGTH=32768).
.env에서 MODEL_PROVIDER=ollama를 설정하고 npm run dev를 실행합니다.
- 출력 보정 단계가 없으므로 더 큰 모델이 더 나은 결과를 제공합니다.

사용 대상

개발자 – AI 증강 제품을 구축하고 즉시 사용 가능한 UI 생성 스택을 원하는 분.
디자이너 – LLM 기반 인터페이스가 재사용 가능한 기본 요소로 구성되는 방식을 탐구하는 분.
연구자 – 생성형 UI 모델을 평가하는 분(벤치마크 스크립트를 통해 체계적인 테스트가 쉬워집니다).

제한 사항

데모는 상당히 큰 프롬프트(약 8k 토큰)에 의존하므로 로컬 모델에는 큰 컨텍스트 창이 필요합니다.
로컬 모델을 사용할 때 OpenUI 게이트웨이의 검증/수정이 생략되므로 잘못된 UI 코드가 UI를 손상시킬 수 있습니다.
OpenUI 1.0의 일부 컴포넌트/함수만 구현되어 있으며, 라이브러리를 확장하려면 스키마 추가 및 재생성 단계가 필요합니다.

요약: Open Intelligent UI는 ChatGPT 스타일의 "지능형 UI"를 OpenUI 생성형 UI 표준을 사용하여 구체적으로 구현한 오픈소스로, 완전한 컴포넌트 라이브러리, 상태 저장 함수, 모든 OpenAI 호환 모델에 대한 유연한 백엔드 옵션을 갖추고 있습니다.