> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tako.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualize Your Data

> Turn your own data into an embeddable Tako chart via the MCP server

<Note>
  This skill depends on the Tako MCP server. See the [MCP Server](/documentation/integrations/mcp-server) page for more details.
</Note>

This skill teaches your coding agent to turn data it already has — a pasted table, query output, a metric it just computed — into a polished, embeddable Tako chart.

<Tabs>
  <Tab title="Claude Code">
    ## Copy and Paste in Claude Code

    Click the copy button on the code block below and paste it into Claude Code. Claude will set up both the Tako MCP connection and the skill for you.

    ```text theme={null}
    Set up Tako's "visualize your data" skill for me.

    1) Ensure the Tako MCP server is connected — install it, or update it if it already exists (set $TAKO_API_TOKEN first, or paste your tako_sk_… token in place of it). Run:
    claude mcp add --transport http tako https://mcp.tako.com/mcp --header "Authorization: Bearer ${TAKO_API_TOKEN}"

    2) Create the skill at .claude/skills/visualize-your-data/SKILL.md with exactly this content:

    ---
    name: visualize-your-data
    description: Use when the user has their own numbers/rows and wants a chart, dashboard card, or embeddable visualization. Triggers on "chart this", "visualize", "make a graph of my data", "turn this into a card".
    ---
    Use the Tako MCP `tako_visualize` tool to build an embeddable card from the user's data.

    - Pick the `component_type` that fits the data: `generic_timeseries` (dates -> values), `categorical_bar` (categories -> values), `table`, `financial_boxes`, `pie`, `scatter`, `sankey`, `top_level_metric`, and more. Add a `header` component for a title.
    - Put the data in each component's `config` object. The exact `config` fields differ per `component_type` — when unsure of a component's shape, or for a chart type not listed, fetch the Thin-Viz reference: https://docs.tako.com/documentation/integrating-tako/guides/chart-creation
    - After the call, share the card by linking the response's `embed_url`, e.g. [Open in Tako](EMBED_URL).
    - To embed the card live in a web page (not just link it), drop `embed_url` into an `<iframe>` and add the resize-listener script so it auto-sizes to the card's content — copy the snippet from the embedding guide: https://docs.tako.com/documentation/integrating-tako/guides/embedding-knowledge-cards#example-dynamic-resizing-script
    - person_card must be the ONLY component when used.
    - Each successful call creates a card and consumes credits.

    3) Confirm the tako_visualize tool is available — I may need to restart Claude Code to load the new MCP server.
    ```
  </Tab>

  <Tab title="Codex">
    ## Copy and Paste in Codex

    Click the copy button on the code block below and paste it into Codex. It will set up both the Tako MCP connection and the skill for you.

    <Note>
      A Tako API token must be set in your shell — Codex stores only the variable name (`--bearer-token-env-var TAKO_API_TOKEN`) and reads `TAKO_API_TOKEN` from your environment each time it connects. Run `export TAKO_API_TOKEN=tako_sk_…` first (get a token from the [API keys console](https://developer.tako.com/console/api-keys)), and add it to your shell profile so it persists.
    </Note>

    ```text theme={null}
    Set up Tako's "visualize your data" skill for me.

    1) Ensure the Tako MCP server is connected — install it, or update it if it already exists (with your Tako token in $TAKO_API_TOKEN). Run:
    codex mcp add tako --url https://mcp.tako.com/mcp --bearer-token-env-var TAKO_API_TOKEN

    2) Create the skill at .claude/skills/visualize-your-data/SKILL.md with exactly this content:

    ---
    name: visualize-your-data
    description: Use when the user has their own numbers/rows and wants a chart, dashboard card, or embeddable visualization. Triggers on "chart this", "visualize", "make a graph of my data", "turn this into a card".
    ---
    Use the Tako MCP `tako_visualize` tool to build an embeddable card from the user's data.

    - Pick the `component_type` that fits the data: `generic_timeseries` (dates -> values), `categorical_bar` (categories -> values), `table`, `financial_boxes`, `pie`, `scatter`, `sankey`, `top_level_metric`, and more. Add a `header` component for a title.
    - Put the data in each component's `config` object. The exact `config` fields differ per `component_type` — when unsure of a component's shape, or for a chart type not listed, fetch the Thin-Viz reference: https://docs.tako.com/documentation/integrating-tako/guides/chart-creation
    - After the call, share the card by linking the response's `embed_url`, e.g. [Open in Tako](EMBED_URL).
    - To embed the card live in a web page (not just link it), drop `embed_url` into an `<iframe>` and add the resize-listener script so it auto-sizes to the card's content — copy the snippet from the embedding guide: https://docs.tako.com/documentation/integrating-tako/guides/embedding-knowledge-cards#example-dynamic-resizing-script
    - person_card must be the ONLY component when used.
    - Each successful call creates a card and consumes credits.

    3) Also create .claude/skills/visualize-your-data/agents/openai.yaml so Codex auto-triggers the skill:

    interface:
      display_name: "Visualize Your Data"
      short_description: "Turn your own data into an embeddable Tako chart"
      default_prompt: "Use $visualize-your-data to chart the data I give you."
    policy:
      allow_implicit_invocation: true

    Then symlink it for discovery: ln -s ../../.claude/skills/visualize-your-data .agents/skills/visualize-your-data

    4) Confirm the tako_visualize tool is available.
    ```
  </Tab>
</Tabs>