microsoft/flint-chart

🪄 Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.

Flint — AI 기반 차트 생성을 위한 시각화 언어

개요

오픈 소스 TypeScript/JavaScript 라이브러리 (flint-chart) 및 MCP (Microsoft Copilot Protocol) 서버 (flint-chart-mcp).
데이터, 의미론적 유형(semantic types), 차트 유형, 테마 및 상호작용을 설명하는 단일 선언적 사양 형식을 제공합니다.
이 사양은 5개의 렌더링 백엔드(Vega-Lite, ECharts, Chart.js, Plotly 및 네이티브 Excel)를 위한 네이티브 사양으로 컴파일됩니다.
52개의 차트 유형, 14개의 시각적 테마(예: Economist, NY Times), 23개의 상호작용 프리셋(브러시, 호버, 드릴다운 등)이 포함되어 있습니다.

AI 에이전트에게 중요한 이유

AI 어시스턴트(Copilot, Claude, Cursor 등)는 MCP 서버를 통해 Flint를 호출하여 자연어 요청을 채팅창에 직접 나타나는 대화형 차트로 변환할 수 있습니다.
컴파일러는 의미론적 유형(예: YearMonth, Quantity)을 사용하여 스케일, 서식 및 색상 선택을 추론하므로 에이전트가 저수준의 차트 옵션을 수동으로 작성할 필요가 없습니다.
동일한 사양이 지원되는 모든 백엔드에서 작동하므로, 에이전트는 PNG/SVG, 웹 삽입형 차트, 또는 보고서용 편집 가능한 Excel 차트를 생성할 수 있습니다.

사용 방법

MCP 서버 – npx -y flint-chart-mcp (로컬 stdio)를 실행하거나 호스팅된 서버 URL을 에이전트에 지정합니다. 에이전트는 일반 텍스트 프롬프트로 차트를 요청할 수 있습니다.
라이브러리 – npm i flint-chart를 설치합니다. React 컴포넌트 또는 바닐라 API를 가져와 ChartAssemblyInput 객체를 전달하면 Flint가 차트를 렌더링합니다.
```
import { FlintChart } from "flint-chart/react";
const spec = { /* data, semantic_types, chart_spec, theme_spec, interaction_spec */ };
<FlintChart spec={spec} />
```
사용자 지정 – Theme Lab을 통해 테마를 생성하거나 확장하고, 상호작용 API를 사용하여 사용자 지정 상호작용 사양을 작성합니다.

주요 구성 요소

문서 및 리소스

커뮤니티 및 기여

사용자 지원을 위한 Discord 및 WeChat 그룹.
오픈 기여 모델: 새로운 차트 템플릿, 백엔드 또는 테마 추가. npm run test, npm run build, npm run site로 빌드.
MIT 라이선스, Microsoft 유지 관리.

대상 사용자