open-intelligent-ui

Open Intelligent UI
ChatGPT에서 선보인 "Intelligent UI" 경험을 OpenUI 위에 구현한 오픈소스 버전입니다.

라이브 데모 체험하기

ChatGPT의 Intelligent UI에서는 "샌프란시스코에서 하루 일정을 짜줘" 같은 요청에 텍스트 대신 인터랙티브한 답변(지도, 사진, 편집 가능한 일정)이 돌아옵니다. 이 저장소는 오픈소스 컴포넌트로 그 경험을 재현하여, 같은 종류의 인터페이스를 어떤 애플리케이션 안에서든 구축하고 수정하고 배포할 수 있게 합니다.

OpenUI는 Generative UI를 위한 오픈 표준입니다.

이 프로젝트는 독립적이며 OpenAI와 제휴하거나 OpenAI의 승인을 받지 않았습니다. "Intelligent UI"는 이 데모가 재현하는 ChatGPT 기능을 가리킵니다.

데모 영상
같은 요청에 답하는 ChatGPT의 Intelligent UI(왼쪽)와 이 프로젝트(오른쪽). 이미지를 선택하면 영상이 재생됩니다.

데모에 포함된 것
모델이 OpenUI Lang 1.0을 스트리밍하고, 앱은 모델이 스스로 배치하는 프리미티브 라이브러리로 이를 렌더링합니다. 컴포넌트에 고정된 레이아웃은 없습니다. 라이브러리( src/lib/library.ts , 컴포넌트는 src/lib/components/ )는 Open Intelligent UI 디자인을 따릅니다. 컴포넌트에는 라이트 및 다크 토큰이 있지만, /gallery (그리고 벤치마크의 /preview )만 다크로 전환되며 채팅은 라이트 전용입니다:

레이아웃: Col , Row , Box (배경, 반경, 테두리, 크기, flex), Grid , Card , Carousel (스크롤 및 스냅되는 행), Popover , Divider , Spacer .

텍스트: Title , Text (인라인 bold , italic , code , 링크), Caption , Label , Badge , Link , List 및 ListItem (불릿, 숫자, 타임라인), Markdown .

입력: Button , IconButton , Pressable , Input , TextArea , Select , SegmentedControl , Slider , Checkbox , RadioGroup , DatePicker , Timer (카운트다운), Form . 각 입력의 첫 번째 인자는 그 값이며, 보통 다른 문장들이 읽는 $variable 입니다.

미디어 및 데이터: SearchImage (ChatGPT의 서버 해석 이미지처럼, 쿼리에 맞춰 앱이 찾아주는 사진), Image (주어진 URL), Icon (lucide 이름), Table (셀에 컴포넌트가 올 수 있음), Chart (bar, line, area, pie, donut, scatter), Map 과 MapMarker ( MapLibre GL , 카테고리 필터, 확장, 도로 경로), 그리고 YouTube .

텍스트와 재생 더 보기: Text 는 문자열과 인라인 컴포넌트를 섞은 목록을 받습니다. Quote , Code (복사 기능 포함), Math (KaTeX); Flashcard (뒤집기)와 Celebration (조건이 참이 되면 색종이).

드로잉: Svg 와 G , Circle , Ellipse , Rect , Line , Path , Polyline , Polygon , SvgText . 이들의 속성은 표현식을 받으므로 상태가 이들을 움직일 수 있습니다. HtmlView 는 HTML 페이지(게임, 캔버스)를 샌드박스 iframe에서 실행합니다.

함수: 1.0 내장 함수 옆에 59개의 범용 @functions ( src/lib/functions/ )가 있어, 답변이 자체 상태로 계산할 수 있습니다: 리스트( @Append , @Remove , @Update , @Toggle , @Includes , @Range , @Chunk , @Shuffle , ...), 숫자( @Pow , @Random , @Clamp , @Percent , 센트 단위까지 합이 맞는 분할을 위한 @Allocate , 대출을 위한 @Payment , 단위 변환을 위한 @Convert ), 텍스트( @Format , @Join , @Split , @Replace , @Capitalize , @Plural , @Duration , @Default ), 색상( @MixColor ), 날짜( @Today , @FormatDate , @AddDays , @AddMonths , @DaysBetween , @MonthsBetween , @StartOf ), 그리고 대시보드용 데이터( @GroupBy , @Pivot , @Top , @Between , @Bucket , @Cumulative , @MovingAvg , @Change , @Histogram , @Stats ). 잘못된 인자는 1.0에서처럼 호출을 null로 평가되게 만듭니다.

액션: @CopyToClipboard(text) , 장바구니 목록이나 분할 내역을 복사하기 위한 것입니다.

개발 전용 페이지 /gallery 는 직접 작성한 프로그램을 렌더링합니다: 16개 Intelligent UI 예시(7단 기어 자전거부터 아케이드 게임까지) 각각에 대한 동작하는 답변, 데모 데이터 위의 두 개의 대시보드, 프롬프트의 예시들, 그리고 모든 컴포넌트를 실행하는 프로그램들.

설정
Node 24가 필요합니다.

cp .env.example .env
npm install
npm run generate:apiKey # writes THESYS_API_KEY to .env
npm run dev
http://localhost:3000 을 열고 다음을 시도해 보세요: I'm in San Francisco for a day, plan a sightseeing route for me

변수
필수
용도

THESYS_API_KEY
직접 API를 사용하지 않는 한 필수
OpenUI Cloud (Gateway) 키, 서버에서만 사용됩니다.

THESYS_MODEL
아니오
{provider}/{model} id. 기본값은 openai/gpt-6.1-sol 입니다.

THESYS_BASE_URL
아니오
Gateway의 Responses 엔드포인트. 기본값은 https://api.thesys.dev/v1/embed 입니다.

LLM_BASE_URL
아니오
Cloud 대신 OpenAI 호환 Chat Completions API를 직접 사용합니다. 예: https://openrouter.ai/api/v1 ; OpenAI 호환 API 사용하기 참고.

LLM_API_KEY
LLM_BASE_URL 사용 시
해당 API의 키.

LLM_MODEL
LLM_BASE_URL 사용 시
해당 API가 제공하는 모델 id. 예: OpenRouter의 openai/gpt-6.1-sol .

LLM_REASONING_EFFORT
아니오
두 경로 모두에 대한 추론 노력. 기본값은 low (gpt-6.1-sol에서 첫 UI 라인까지 약 5배 빠르며 품질은 동일); 기본값은 아무것도 보내지 않습니다.

MODEL_PROVIDER
아니오
Gateway 대신 로컬 모델을 실행하려면 ollama 로 설정; 로컬 모델로 실행하기 참고.

OLLAMA_MODEL
아니오
사용할 Ollama 모델. 기본값은 qwen3.8:27b 입니다.

OLLAMA_BASE_URL
아니오
Ollama의 OpenAI 호환 엔드포인트. 기본값은 http://localhost:11434/v1 입니다.

OpenAI 호환 API 사용하기
LLM_BASE_URL , LLM_API_KEY , LLM_MODEL 을 설정하면 OpenUI Cloud를 건너뛰고 모델을 직접 호출합니다. 예를 들어 OpenRouter를 통해:

LLM_BASE_URL=https://openrouter.ai/api/v1
LLM_API_KEY=sk-or-...
LLM_MODEL=openai/gpt-6.1-sol
그러면 /api/chat 이 서버에서 동일한 라이브러리 스펙과 프롬프트 옵션( generateSystemPrompt )으로부터 전체 OpenUI 1.0 시스템 프롬프트를 구성하고, Chat Completions를 스트리밍하며 텍스트를 Responses 이벤트로 중계하므로 브라우저는 변경되지 않습니다. 아래의 Ollama 변수들은 같은 경로를 위한 단축키입니다. 출력은 작성된 그대로 렌더링됩니다: Cloud의 교정 단계는 없습니다.

로컬 모델로 실행하기 (Ollama)
이 데모는 API 키 없이 Ollama 를 통해 로컬 모델에서도 실행할 수 있습니다.

OLLAMA_BASE_URL 을 통해 모든 OpenAI 호환 로컬 서버(Ollama, LM Studio)와 함께 동작합니다.

Ollama를 설치하고 모델을 받으세요. 기본값은 qwen3.8:27b (약 18 GB, 메모리 32 GB 이상에서 최적); gpt-oss:20b 와 qwen3:8b 는 더 작은 대안입니다.

ollama pull qwen3.8:27b

모델에 더 큰 컨텍스트 윈도우를 부여하세요. 이 앱의 OpenUI 프롬프트는 약 8,000 토큰이고 Ollama의 기본 윈도우는 4,096이라, 프롬프트를 조용히 잘라내고 깨진 출력을 만들어냅니다. 더 큰 기본값으로 Ollama를 시작하거나:

OLLAMA_CONTEXT_LENGTH=32768 ollama serve
더 큰 윈도우를 가진 모델 변형을 만들어 그 이름을 OLLAMA_MODEL 로 사용하세요:

printf ' FROM qwen3.8:27b\nPARAMETER num_ctx 32768\n ' > Modelfile
ollama create qwen3.8-32k -f Modelfile

.env 에서 MODEL_PROVIDER=ollama 를 설정하고(다른 모델을 쓰려면 OLLAMA_MODEL 도), npm run dev 를 실행하세요.

로컬 모델에서 달라지는 점:

출력 교정 없음. Gateway는 생성된 OpenUI Lang을 검증하고 교정하지만, 로컬에서는 모델의 출력이 작성된 그대로 렌더링되므로 더 큰 모델이 더 나은 결과를 냅니다.
속도는 하드웨어에 따라 다릅니다. Ollama가 모델을 로드한 뒤의 첫 요청은 전체 프롬프트를 읽어야 하고, 이후 요청은 이를 재사용하므로 훨씬 빠릅니다. 추론 모델의 경우 LLM_REASONING_EFFORT=low 가 대기 시간을 상당히 줄여줍니다.

동작 방식

생성. /api/chat 은 generateSystemPrompt({ cloud: true }) 로 OpenUI Gateway의 Responses API를 호출하므로, Gateway가 생성된 OpenUI Lang을 이 앱의 컴포넌트 라이브러리에 대해 검증하고 교정합니다. 검색 도구는 보내지 않습니다: SearchImage 가 자체적으로 사진을 찾으므로(아래 사진 참고), 모델이 아무것도 보여주지 않는 검색을 알리는 일이 없습니다. 요청은 낮은 추론 노력( LLM_REASONING_EFFORT )을 요구합니다.
Chat Completions. OpenUI Gateway는 Chat Completions API도 지원하며, OpenUI는 둘 다와 동작합니다. 이 예제는 Gateway의 호스팅 도구가 Responses API에서만 사용 가능하기 때문에 Responses API를 사용합니다. 이미 Chat Completions로 구축된 애플리케이션은 그 프로토콜을 유지하고 브라우저에서 openAIReadableStreamAdapter 또는 openAIAdapter 와 함께 사용할 수 있습니다.
상태. 입력은 $variables 에 바인딩되며( Slider($price, 0, 100) ), 이를 읽는 모든 문장은 사용자가 상호작용할 때 갱신됩니다. Button과 Pressable은 @Set , @Reset , @ToAssistant , @OpenUrl , @CopyToClipboard 단계를 실행합니다.
동작하는 도구. src/lib/prompt-options.ts 의 프롬프트 옵션(규칙과 예시)은 모델이 페이지에서 동작하는 도구로 답하도록 가르칩니다: 리스트와 입력은 $variables 에 살고, 보이는 모든 것은 @functions 로 그것들로부터 계산되며, 버튼은 양식을 어시스턴트에게 되돌려 보내는 대신 @Set 으로 그것들을 변경합니다. @Each 는 리스트를 행으로 매핑합니다. 예: @Each(@Range(0, $years + 1), "y", {year: y, balance: $p * @Pow(1 + $r / 100, y)}) .
사진. SearchImage (그리고 URL이 실패할 때의 Image )는 /api/wiki 에 쿼리와 같은 제목의 Wikipedia 문서의 대표 사진을 요청한 다음, /api/image-search 에 제목이 일치하는 Wikipedia 및 Wikimedia Commons 결과를 요청합니다.
스레드. 스레드와 메시지(사용자가 답변에서 입력하거나 체크한 내용 포함)는 브라우저의 localStorage( src/lib/chat-storage.tsx )에 보관되므로, 스레드를 전환하거나 새로고침해도 유지됩니다.
지도 데이터. 거리 형상은 /api/street-route 에서 오며, 입력을 검증하고 공개 OSRM 데모 서버의 운전 프로필 결과를 캐시합니다: 도로 개요이며, 도보나 대중교통 경로가 아닙니다. 사용할 수 없을 때는 라벨이 붙은 직선 연결이 대신 그려집니다.
테마. 색상, 타이포그래피, 반경, 간격은 src/lib/components/theme.css 의 토큰이며, data-theme="dark" 아래에 다크 세트가 있어 /gallery 와 /preview 만 사용합니다. 채팅 셸은 src/lib/response-theme.ts 의 AgentInterface 테마를 유지합니다.

프로젝트 구조

파일
용도

src/app/layout.tsx
루트 레이아웃: 페이지 메타데이터, Inter 폰트, globals.css .

src/app/page.tsx
채팅 페이지. 컴포넌트 라이브러리, 테마, 환영 화면, 시작 프롬프트로 AgentInterface를 렌더링하고 /api/chat 에 연결합니다.

src/app/globals.css
전역 CSS 리셋.

src/app/shell.css
AgentInterface 셸(사이드바, 컴포저, 시작 프롬프트, 메시지 버블)을 재스타일링하며, 존재하는 경우 테마 토큰을 사용합니다.

src/app/api/chat/route.ts
채팅 엔드포인트. 요청을 검증하고, 대화를 OpenUI Cloud로(또는 LLM_BASE_URL 이나 Ollama 변수를 사용하면 여기서 구성한 프롬프트로 모든 OpenAI 호환 API로) 전달하고, 응답을 스트리밍으로 되돌려 보냅니다.

src/app/api/street-route/route.ts
OSRM에서 정류장 간 거리 형상을 가져오며, 서버에서 캐시합니다.

src/app/api/wiki/route.ts
Wikipedia 조회: 문서의 대표 사진(및 좌표), 서버에서 캐시.

src/app/api/image-search/route.ts
SearchImage 를 위한 사진 검색: 일치하는 Wikipedia 대표 이미지, 그다음 Wikimedia Commons, 서버에서 캐시.

src/app/gallery/
개발 전용 /gallery 페이지와 그 OpenUI Lang 프로그램들; tool-programs.ts 에 16개 예시와 대시보드가 있습니다.

src/app/preview/
스크립트가 넘긴 하나의 프로그램을 렌더링하는 개발 전용 페이지로, 벤치마크의 스크린샷용입니다.

src/lib/library.ts
OpenUI 컴포넌트 라이브러리: 프리미티브, 그 그룹, 프롬프트 노트.

src/lib/functions/
라이브러리의 @functions ( defineFunction ), 1.0 파서와 평가기를 통해 실행하는 테스트 포함.

src/lib/actions.ts
@CopyToClipboard 액션과 그 핸들러.

src/lib/demo-data.ts
Query 기반 대시보드를 위한 데모 데이터 도구( get_orders , get_tickets , get_traffic ): 프롬프트용 스펙과 함수 맵 도구 제공자.

src/lib/prompt-options.ts
프롬프트 옵션: 동작하는 도구 규칙과 예시, 그리고 데모 데이터 도구가 있는 대시보드 변형.

src/lib/response-theme.ts
AgentInterface 셸(색상, 폰트, 반경, 채팅 버블)을 위한 테마 토큰으로, createTheme() 로 구성됩니다.

src/lib/components/
컴포넌트(각각 defineComponent + Zod 스키마), 그 스타일과 토큰, 그리고 map/ 의 지도.

src/generated/spec.json
시스템 프롬프트에서 Gateway로 보내는 라이브러리 스펙. 컴포넌트 스키마를 변경한 후 npm run generate 로 재생성하세요.

src/generated/system-prompt.txt
라이브러리의 전체 시스템 프롬프트; dashboard-system-prompt.txt 는 데모 데이터 도구를 추가합니다. npm run prompt 로 재생성하세요.

scripts/bench/
벤치마크: 16개 예시 프롬프트와 8개 대시보드 프롬프트를 모델에 대해 실행하고 검사합니다; Benchmark 참고.

docs/openui-chatgpt-comparison.mp4
ChatGPT와 이 …의 나란히 비교 영상