Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
作者提供的说明(英文原文)
A Model Context Protocol (MCP) server and app for creating Datawrapper charts using AI assistants
这三项永远不会合并成一个分数:意见、测量和人气是不同的东西。
我们还没有为它写通俗的介绍。下面是我们从注册中心读取到的事实。
选择你使用的 AI 应用,然后复制设置。
DATAWRAPPER_ACCESS_TOKEN标为机密的值是你账户的钥匙。千万不要分享给别人,也不要粘贴到聊天里。
你需要
你用的是哪个应用?
在上方选择你的应用。我们会记住它,下次按钮会显示“安装到 …”。
打开 Claude Desktop → Settings → Developer → Edit Config,把下面的内容粘贴到 claude_desktop_config.json
{
"mcpServers": {
"datawrapper": {
"command": "uvx",
"args": [
"datawrapper-mcp"
],
"env": {
"DATAWRAPPER_ACCESS_TOKEN": "your-value"
}
}
}
}在终端中运行这条命令
claude mcp add datawrapper --env DATAWRAPPER_ACCESS_TOKEN=your-value -- uvx datawrapper-mcp运行前请先填写空着的值。
粘贴到项目中的 .cursor/mcp.json,或 ~/.cursor/mcp.json
{
"mcpServers": {
"datawrapper": {
"command": "uvx",
"args": [
"datawrapper-mcp"
],
"env": {
"DATAWRAPPER_ACCESS_TOKEN": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
粘贴到项目中的 .vscode/mcp.json
{
"servers": {
"datawrapper": {
"type": "stdio",
"command": "uvx",
"args": [
"datawrapper-mcp"
],
"env": {
"DATAWRAPPER_ACCESS_TOKEN": "your-value"
}
}
}
}浏览器会先询问是否打开应用,然后应用会显示设置并请你确认。密钥的值会留空,由你自己填写。
这个服务器在你的电脑上运行,而 ChatGPT 只能连接互联网上的服务器。请选择其他应用。
你的选择通过 Cookie 保存在这台设备上,无需账户。
这些设置是根据作者在注册中心的条目生成的。如果 README 的写法不同,请以 README 为准。
它在你的电脑上运行;安装后,工具列表会显示在你的 AI 应用中。
我们检查的是任何人都能看到的信息;我们没有阅读代码。不适用的检查项不计入总数。 · 检查于 2026年11月7日
注册名称已通过 GitHub 账户 palewire 验证,该账户拥有此仓库
我们还没有从 GitHub 读取这个仓库
我们还没有从 GitHub 读取这个仓库
它在你的电脑上运行,没有互联网端点
在你的电脑上运行,改用本地设置
它在你的电脑上运行;我们只能读取互联网端点的工具列表
与注册中心里这个分类中所有活跃的服务器比较。只有当发布者拥有该仓库时,星标数才计入。
它在 1 项适用的基础检查中通过了 1 项。我们没有阅读代码。在添加密钥或令牌之前,请先看看这个服务器要求哪些权限,并使用只具备所需权限的密钥。
你需要填写:DATAWRAPPER_ACCESS_TOKEN
它在你的电脑上运行。你的 AI 应用会在需要时启动它,数据不会经过作者的服务器(除非它自己调用在线服务)。
GitHub 仓库最后更新于–,最新版本(0.4.0)于2个月前进入注册中心。
支持 MCP 的应用,例如 Claude Desktop、Claude Code、Cursor 和 VS Code。你的电脑上还需要有 Python (uv)。
同一分类中有:Figma Context MCP, Claude Real Video, Figma MCP Server
同一分类中其他作者的服务器,按星标数排序。
如何看卡片:★ GitHub 星标i三大支柱:评价 · 检查 · 使用情况i更新 = 最新版本发布到注册中心的时间i
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
The Figma MCP server brings Figma design context directly into your AI workflow.
按原文从作者的仓库复制。PopNx MCP 没有审查或背书其内容。HTML、图片和脚本已被移除。链接会离开本站。
A Model Context Protocol (MCP) server and app for creating Datawrapper charts using AI assistants. Built on the datawrapper Python library.
Status: early and experimental. This project — including its Claude
Code/Desktop plugin and marketplace listing — is under active development,
and behavior can change between releases. In particular, the
plugin/marketplace install path has known gaps (see
issue #78) — don't
treat it yet as a finished, zero-maintenance install path for a wider
rollout.
You can provide a data file and simply ask for the chart you want. The draft will soon appear in the panel.
Here's a more complete example showing how to create, publish, update, and display a chart by chatting with the assistant:
"Create a datawrapper line chart showing temperature trends with this data:
2020, 15.5 2021, 16.0 2022, 16.5 2023, 17.0"
"Publish it."
"Update chart with new data for 2024: 17.2°C"
"Make the line color dodger blue."
"Show me the editor URL."
"Show me the PNG."
"Suggest five ways to improve the chart."
| Tool | Description |
|---|---|
list_chart_types | List available chart types with descriptions |
get_chart_schema | Get the full configuration schema for a chart type |
create_chart | Create a new chart with data and configuration |
update_chart | Update an existing chart's data or styling |
publish_chart | Publish a chart to make it publicly accessible |
get_chart | Retrieve a chart's configuration and metadata |
delete_chart | Permanently delete a chart |
export_chart_png | Export a chart as a PNG image |
bar, line, area, arrow, column, multiple column, scatter, stacked bar
Use list_chart_types to see descriptions, then get_chart_schema to explore configuration options for any type.
{
"mcpServers": { "datawrapper": { "command": "uvx", "args": ["datawrapper-mcp"], "env": { "DATAWRAPPER_ACCESS_TOKEN": "your-token-here" } } } }
For other clients (Claude Desktop, Claude.ai, Cursor, VS Code Copilot, ChatGPT, OpenAI Codex, OpenClaw) and Kubernetes deployment, see the installation guide.
**Installing via a plugin marketplace/directory (Claude Desktop's plugin
browser, ClawHub, etc.) is still experimental.** These interactive install
flows currently have no working way to collect required environment
variables like
DATAWRAPPER_ACCESS_TOKEN— see
issue #78 for
details. The manually-edited config shown above (and throughout the
installation guide) is the reliable path today.
When connecting to a hosted instance of the server over HTTP, you can authenticate with your own Datawrapper API token by sending it in the Authorization header:
Authorization: Bearer <your-datawrapper-api-token>
This ensures charts are created under your account instead of the server operator's. The token is read from the header automatically — no need to include it in every tool call.
You can also pass access_token directly as a tool argument, which takes precedence over the header. When neither is provided, the server falls back to its DATAWRAPPER_ACCESS_TOKEN environment variable.
Set DATAWRAPPER_MCP_INSTRUCTIONS to have the server hand your own free-text guidance to connecting MCP clients (many, including Claude, fold this into the model's context). Use it for house style rules — required fields, naming conventions, and the like — without forking the server:
"env": {
"DATAWRAPPER_ACCESS_TOKEN": "your-token-here", "DATAWRAPPER_MCP_INSTRUCTIONS": "Every chart needs alt text and a CMS slug in its notes field." }
| Client | Config file | Transport |
|---|---|---|
| Claude Desktop | claude_desktop_config.json | stdio or streamable-http |
| Claude.ai | Personal or org connector | streamable-http |
| Claude Code | Plugin marketplace or .mcp.json | stdio |
| VS Code Copilot | .vscode/mcp.json | stdio |
| Cursor | .cursor/mcp.json | stdio or streamable-http |
| ChatGPT | Dev Mode settings | streamable-http only |
| OpenAI Codex | ~/.codex/config.toml | stdio |
| OpenClaw | ClawHub plugin or openclaw.json | stdio |