Cookbook B0 Context Primer

Cookbook B0 — The Context Primer

Why a primer is needed

When you ask Claude (or any AI assistant) to generate a chart, it has no way of knowing what flexcharts expects as input. Without context, Claude typically produces JavaScript files with import statements, full HTML pages, or code wrapped in const option = {...} — none of which can be pasted directly into an ioBroker state.

A context primer is a short text you paste at the beginning of a new conversation. It tells Claude exactly what flexcharts needs, so the output is ready to use with no manual cleanup.

---

The primer

Copy the text below and paste it as your first message in a new Claude conversation, before describing the chart you want.

I use ioBroker with the flexcharts adapter. It reads an Apache ECharts v6 option
from an ioBroker state and renders it in the browser.

Please follow these output rules:
1. Output ONLY the ECharts option as a valid JSON object — no code wrapper,
   no imports, no HTML, no explanatory text inside the JSON.
2. The JSON must be ready to paste directly as an ioBroker state value.
3. For charts that need a browser-side event handler (e.g. interactive updates),
   use a two-element JSON array instead:
   ["<option as JS object notation>", "<event handler as JS string>"]
   In the array format the option string may use JavaScript syntax
   (unquoted keys, single quotes).

For reference — the chart URL pattern:
http://localhost:8082/flexcharts/echarts.html?source=state&id=0_userdata.0.flexcharts.mychart&sse

The &sse parameter auto-updates the chart in the browser whenever the state value changes.

---

How to use it

1. Open a new conversation in Claude (claude.ai)
2. Paste the primer above as your first message and send it
3. Claude will confirm it understood — then describe the chart you want in your next message

Which model? The primer works with any Claude version available on the free plan (currently Claude Sonnet). Select Sonnet explicitly if your account offers a choice.

---

What the primer tells Claude

Rule	Why it matters
"ONLY the ECharts option as JSON"	Prevents Claude from wrapping output in const option = ..., functions, or HTML
"no explanatory text inside the JSON"	Prevents inline comments that break JSON parsing
"ready to paste as a state value"	Sets the mental model: the output goes directly into ioBroker, not into code
Array format for event handlers	Teaches Claude the flexcharts-specific format used in Cookbook A3
URL pattern with &sse	Gives Claude context for SSE-related questions

---

Quick verification

After Claude confirms the primer, send this short test message:

Generate a minimal bar chart with three bars: values 10, 20, 15 with labels A, B, C.

The response should be a clean JSON object starting with { — nothing else. If Claude wraps it in code or adds const option =, repeat the primer or add: "Output only the raw JSON, no wrapper."

---

What's next

• Cookbook B1 — First chart session: a bar chart from a natural language description