From 84e165aa693ae9adf4fef0fa94624376abc4900a Mon Sep 17 00:00:00 2001 From: Chenglong Wang Date: Sun, 28 Jun 2026 16:42:22 -0700 Subject: [PATCH 1/5] Restore AI-era public title --- README.md | 2 +- site/index.html | 2 +- site/src/routes/Landing.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c144224..88a7092 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Flint: A Semantic Visualization Language for AI Agents and Humans +# Flint: A Visualization Language for the AI Era [![npm: flint-chart](https://img.shields.io/npm/v/flint-chart.svg?label=npm%3A%20flint-chart)](https://www.npmjs.com/package/flint-chart) [![npm: flint-chart-mcp](https://img.shields.io/npm/v/flint-chart-mcp.svg?label=npm%3A%20flint-chart-mcp)](https://www.npmjs.com/package/flint-chart-mcp) diff --git a/site/index.html b/site/index.html index 16a0ccc..a5b85a1 100644 --- a/site/index.html +++ b/site/index.html @@ -3,7 +3,7 @@ - Flint: A Semantic Visualization Language for AI Agents and Humans + Flint: A Visualization Language for the AI Era @@ -14,26 +19,34 @@ export function McpServer() {
{/* ---- Hero -------------------------------------------------- */}
-

Use Flint as a MCP server for your agent

+

Use Flint as an MCP server for your agent

Install flint-chart-mcp as a{' '} Model Context Protocol {' '} - server and your agent can create charts from the same conversation - where the question starts. By default it opens an interactive Flint + server and your agent can create charts as an interactive MCP app. By default it opens an interactive Flint chart view; when you need artifacts, it can also return static images or backend-native specs.

-
- - $ npx -y flint-chart-mcp - - - View on GitHub → +

+ + Quick start: + {' '} + paste this setup request into your agent and let it configure Flint for the current project. For manual setup, + see{' '} + {' '} + or the{' '} + + GitHub README -

+ . +

+ + {setupPrompt}
{/* ---- Article body ----------------------------------------- */} @@ -43,9 +56,13 @@ export function McpServer() {

The experience

Using Flint through MCP is a simple loop: connect the server, ask - for the chart you want, and work with the rendered result in the - same chat. + for the chart you want, and work with a visualization with dynamic widgets provided by the MCP server.

+ + + + +
  1. Connect Flint MCP server. Add the stdio server to your @@ -66,17 +83,6 @@ export function McpServer() {
- - - -

- The embedded chart is genuinely Flint-rendered, using the same path - as the MCP App. The frame and toolbar mirror the real{' '} - create_chart_view UI: a live - preview with chart options and a Copy spec to chat action. -

- - {/* ---- What it provides ------------------------------------- */}

What it provides

@@ -133,20 +139,13 @@ export function McpServer() { {/* ---- Install ---------------------------------------------- */} -

Install & configure

+

Install & configure

- The server speaks stdio and runs zero-install with{' '} - npx. If your MCP client can - edit its own configuration, you can ask your agent to set it up: + For manual setup, the server speaks stdio and runs zero-install with{' '} + npx. Point your MCP client at the package:

- {setupPrompt} - - -

Or point your MCP client at the package manually:

- - {clientConfig} @@ -308,10 +307,24 @@ function SurfaceCard(props: { tag: string; name: string; desc: string; highlight ); } -function CodeBlock({ children }: { children: string }) { +function CodeBlock({ children, copyable = false }: { children: string; copyable?: boolean }) { + const [copied, setCopied] = useState(false); + + async function copyCode() { + await navigator.clipboard.writeText(children); + setCopied(true); + window.setTimeout(() => setCopied(false), 1600); + } + return (
- 
{children}
+ {copyable ? ( + + ) : null} + 
{children}
); } @@ -394,35 +407,37 @@ const leadStyle: CSSProperties = { fontWeight: 400, }; -const installRowStyle: CSSProperties = { - display: 'flex', - alignItems: 'center', - gap: 16, - marginTop: 32, - flexWrap: 'wrap', +const setupLeadStyle: CSSProperties = { + ...leadStyle, + marginTop: 24, + marginBottom: 16, }; -const installCodeStyle: CSSProperties = { - fontFamily: siteTheme.fontMono, - fontSize: 14, +const setupLabelStyle: CSSProperties = { color: siteTheme.text, - background: 'rgba(0,0,0,0.04)', - border: `1px solid ${HAIRLINE}`, - borderRadius: siteTheme.radius, - padding: '9px 14px', + fontWeight: 700, }; -const promptMarkStyle: CSSProperties = { - color: siteTheme.textMuted, - userSelect: 'none', - marginRight: 8, +const setupLabelIconStyle: CSSProperties = { + marginRight: 6, }; -const ghLinkStyle: CSSProperties = { +const setupInlineLinkStyle: CSSProperties = { color: siteTheme.accent, - fontSize: 14, - fontWeight: 500, textDecoration: 'none', + fontWeight: 500, +}; + +const setupInlineButtonStyle: CSSProperties = { + color: siteTheme.accent, + background: 'none', + border: 0, + padding: 0, + cursor: 'pointer', + fontFamily: 'inherit', + fontSize: 'inherit', + fontWeight: 500, + lineHeight: 'inherit', }; const articleStyle: CSSProperties = { @@ -464,7 +479,7 @@ const captionStyle: CSSProperties = { }; const stepListStyle: CSSProperties = { - margin: '14px 0 0', + margin: '32px 0 0', padding: '0 0 0 22px', display: 'flex', flexDirection: 'column', @@ -855,6 +870,7 @@ const codeBlockWrapStyle: CSSProperties = { borderRadius: 8, background: 'rgba(0,0,0,0.025)', overflow: 'auto', + position: 'relative', }; const codeBlockStyle: CSSProperties = { @@ -866,6 +882,33 @@ const codeBlockStyle: CSSProperties = { color: siteTheme.text, }; +const codeBlockCopyableStyle: CSSProperties = { + paddingRight: 128, +}; + +const copyButtonStyle: CSSProperties = { + position: 'absolute', + top: 8, + right: 8, + display: 'inline-flex', + alignItems: 'center', + gap: 6, + border: `1px solid rgba(0, 102, 204, 0.24)`, + borderRadius: 7, + background: 'rgba(0, 102, 204, 0.08)', + color: siteTheme.accent, + fontFamily: siteTheme.fontSans, + fontSize: 12.5, + fontWeight: 600, + padding: '5px 10px', + cursor: 'pointer', +}; + +const copyIconStyle: CSSProperties = { + fontSize: 13, + lineHeight: 1, +}; + /* ---- next actions ---- */ const nextRowStyle: CSSProperties = { From 13bbff179241c6a3b288966e540101fa08b8841d Mon Sep 17 00:00:00 2001 From: Chenglong Wang Date: Mon, 29 Jun 2026 19:02:25 -0700 Subject: [PATCH 5/5] Bump flint-chart and flint-chart-mcp to 0.1.3 --- package-lock.json | 4 ++-- packages/flint-js/package.json | 2 +- packages/flint-mcp/package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index b4a7233..7e0bc3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9911,7 +9911,7 @@ }, "packages/flint-js": { "name": "flint-chart", - "version": "0.1.2", + "version": "0.1.3", "license": "MIT", "devDependencies": { "@types/node": "^20.14.10", @@ -9952,7 +9952,7 @@ }, "packages/flint-mcp": { "name": "flint-chart-mcp", - "version": "0.1.2", + "version": "0.1.3", "license": "MIT", "dependencies": { "@modelcontextprotocol/ext-apps": "^1.7.4", diff --git a/packages/flint-js/package.json b/packages/flint-js/package.json index a6962e6..f4678db 100644 --- a/packages/flint-js/package.json +++ b/packages/flint-js/package.json @@ -1,6 +1,6 @@ { "name": "flint-chart", - "version": "0.1.2", + "version": "0.1.3", "description": "Semantic-level visualization library that compiles data + semantic types into chart specs for Vega-Lite, ECharts, and Chart.js.", "keywords": [ "visualization", diff --git a/packages/flint-mcp/package.json b/packages/flint-mcp/package.json index 00eb777..61bfe0f 100644 --- a/packages/flint-mcp/package.json +++ b/packages/flint-mcp/package.json @@ -1,6 +1,6 @@ { "name": "flint-chart-mcp", - "version": "0.1.2", + "version": "0.1.3", "description": "Model Context Protocol server for Flint — compile, validate, and render semantic chart specs to Vega-Lite, ECharts, or Chart.js artifacts (PNG/SVG) in-process.", "keywords": [ "mcp",