Claude 4.5/4.6: Advanced Features and Canvas

Master Claude 4.5/4.6's most powerful capabilities: Canvas artifact generation, extended thinking for complex reasoning, vision-based document analysis, and production-ready integration patterns.

Level: AvancéDuration: half-day3 modules

Canvas Artifacts: Code Generation and Interactive Outputs

Canvas is Claude's artifact system for generating structured, runnable outputs — code files, React components, SVGs, and full HTML apps — in a dedicated side panel inside Claude.ai. With Claude 4.5/4.6, Canvas handles multi-file projects correctly and understands import graphs without hallucinating module paths. Via the API, you replicate this with structured prompting and multi-turn refinement loops.

Claude 4.5/4.6 produces dramatically better code artifacts than earlier model families — particularly for TypeScript React components, Python data pipelines, and SQL query generation. The key improvement: the model now maintains a consistent internal representation of the project's file structure across multiple turns. In practice, this means you can ask Claude to add a feature to a component generated three messages ago and it will reference the correct import paths, prop types, and style conventions — without you repeating context. For API integrations, structure your conversation as a generation loop: generate → test → send test output → iterate. Use tool_use blocks to pass real test results back into the conversation.

Real-World Example: Automated Code Review with Claude 4.6

This script submits a git diff to Claude and receives structured review comments with severity levels, file references, and specific fix suggestions. The output is machine-readable JSON — ready to post as pull request annotations in GitHub Actions or GitLab CI.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import anthropic
import json
import subprocess

client = anthropic.Anthropic()

def get_git_diff(base_branch: str = "main") -> str:
    """Get the diff of current branch vs base branch."""
    result = subprocess.run(
        ["git", "diff", base_branch, "--unified=3"],
        capture_output=True, text=True, check=True
    )
    return result.stdout

def review_code_with_claude(diff: str) -> list[dict]:
    """
    Send a diff to Claude 4.6 and get structured review comments.
    Returns a list of annotations ready for GitHub's PR review API.
    """
    response = client.messages.create(
        model="claude-sonnet-4-6",
        max_tokens=4096,
        messages=[
            {
                "role": "user",
                "content": f"""Review the following git diff and return a JSON array of review comments.
Each comment must have:
- "file": the file path
- "line": the line number in the diff (or null for general comments)
- "severity": "error" | "warning" | "suggestion"
- "message": concise explanation (max 120 chars)
- "fix": specific code fix or null if no direct fix applies

Focus on: security issues, logic errors, missing error handling, and performance regressions.
Skip style issues unless they hide bugs.

Return ONLY valid JSON — no markdown, no explanation outside the array.

Diff:
{diff[:8000]}"""  # Cap at 8k chars to stay within context
            }
        ]
    )

    raw = response.content[0].text.strip()
    # Strip markdown code fences if Claude wrapped the JSON
    if raw.startswith("```"):
        raw = raw.split("```")[1]
        if raw.startswith("json"):
            raw = raw[4:]
    return json.loads(raw)

# Usage
diff = get_git_diff("main")
if not diff:
    print("No changes to review.")
else:
    comments = review_code_with_claude(diff)
    for c in comments:
        severity_icon = {"error": "🔴", "warning": "🟡", "suggestion": "💡"}[c["severity"]]
        print(f"{severity_icon} [{c['file']}:{c['line']}] {c['message']}")
        if c.get("fix"):
            print(f"   Fix: {c['fix']}")

Exercice pratique

Modify `component_spec` to describe a different UI component — try a `<DataTable>` with sorting and pagination, or a `<SearchBar>` with debounce. Observe how Claude 4.6 maintains type correctness and Tailwind consistency across different specs.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import anthropic

client = anthropic.Anthropic()

# Try generating a Canvas-style React component via the API.
# Modify the component_spec below and re-run to see Claude
# generate a complete, typed TypeScript component.

component_spec = """
A reusable <PriceCard> React component that:
- Accepts: title (string), price (number), currency (string), features (string[])
- Shows a highlighted "Most Popular" badge when isHighlighted=true
- Uses Tailwind CSS classes
- Is fully typed with TypeScript
"""

response = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=2048,
    messages=[
        {
            "role": "user",
            "content": f"Generate the component. Return ONLY the TypeScript code, no explanation.\n\nSpec:\n{component_spec}"
        }
    ]
)

print(response.content[0].text)

Canvas in Claude.ai and the API are different surfaces. Canvas UI artifacts (run in the browser sandbox) cannot be directly exported as API calls. For production pipelines, use the API's multi-turn conversation model: generate code → run tests in your CI environment → send test stdout/stderr back as the next user message → ask Claude to fix failures. This loop is more reliable than Canvas for automated workflows.

Extended Thinking: Deep Reasoning for Complex Problems

Extended thinking lets Claude reason through a problem step-by-step before producing its final answer. You control the reasoning depth with a budget_tokens parameter: set it to 1,000 for light analysis, up to 32,000 for complex multi-step proofs or architecture decisions. The thinking process is returned as a separate thinking content block — you can log it for debugging or discard it to reduce response size. Claude 4.5/4.6 thinking quality is measurably better than earlier versions on mathematical reasoning (+18% on AIME benchmarks) and multi-constraint optimization problems.

USE extended thinking when: the problem has multiple interdependent constraints (e.g., 'design a database schema that satisfies these 8 business rules')
USE extended thinking when: correctness matters more than speed — mathematical proofs, legal document analysis, security audits
USE extended thinking when: you need to verify the model's reasoning, not just its answer (the thinking block shows the work)
SKIP extended thinking when: the task is classification, summarization, or extraction — standard prompting is 3–5x faster and costs the same per token
SKIP extended thinking when: latency is critical (thinking adds 2–8 seconds for most budgets) — use it in async/batch workflows instead

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import anthropic
import time

client = anthropic.Anthropic()

def verify_proof_with_thinking(theorem: str, proposed_proof: str) -> dict:
    """
    Use Claude 4.6 extended thinking to verify a mathematical proof.
    Returns the verdict, any counterexamples found, and the thinking trace.
    """
    start = time.time()

    response = client.messages.create(
        model="claude-sonnet-4-6",
        max_tokens=16000,
        thinking={
            "type": "enabled",
            "budget_tokens": 10000  # ~10K tokens for reasoning; adjust based on complexity
        },
        messages=[
            {
                "role": "user",
                "content": f"""You are a mathematics professor reviewing a student's proof.

Theorem: {theorem}

Proposed proof:
{proposed_proof}

Analyze the proof step by step. Identify any logical gaps, incorrect assumptions,
or missing cases. Then give a verdict: VALID, INVALID (with specific error), or
INCOMPLETE (with what's missing).

Format your final answer as:
VERDICT: [VALID|INVALID|INCOMPLETE]
ISSUES: [list or "None"]
CORRECTED_STEP: [corrected step if applicable, or "N/A"]"""
            }
        ]
    )

    latency = time.time() - start

    # Separate thinking blocks from answer blocks
    thinking_text = ""
    answer_text = ""
    for block in response.content:
        if block.type == "thinking":
            thinking_text = block.thinking
        elif block.type == "text":
            answer_text = block.text

    return {
        "answer": answer_text,
        "thinking_tokens_used": len(thinking_text.split()),  # approx
        "latency_seconds": round(latency, 2),
        "input_tokens": response.usage.input_tokens,
        "output_tokens": response.usage.output_tokens,
        # Optionally log thinking for debugging:
        # "thinking_trace": thinking_text,
    }

# Example: test with a deliberately flawed proof
theorem = "For all integers n > 1, n² - n + 41 is prime."
bad_proof = """
Proof: Let n be any integer > 1.
Compute n² - n + 41. For n=2: 43 (prime). For n=10: 131 (prime).
For n=20: 421 (prime). By induction, the pattern holds for all n > 1.
Therefore, n² - n + 41 is always prime. QED.
"""

result = verify_proof_with_thinking(theorem, bad_proof)
print(result["answer"])
print(f"\nLatency: {result['latency_seconds']}s | Tokens: {result['output_tokens']} output")

Exercice pratique

Run with `budget_tokens: 2000`, then change to `budget_tokens: 10000` and compare the answers. Notice how a larger budget produces more specific phase breakdowns, better risk analysis, and concrete rollback plans. Then try setting `budget_tokens: 500` — at that level, thinking is too constrained and answer quality degrades.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import anthropic

client = anthropic.Anthropic()

# Multi-step architecture decision with extended thinking.
# Modify the scenario below and observe how Claude's thinking
# budget affects answer quality and depth.

scenario = """
We are migrating a monolithic e-commerce app (PostgreSQL + Rails)
to microservices. The app handles 50,000 orders/day, peak 800 req/s.
Current pain: the inventory, payments, and shipping modules all share
one database and one deploy unit. A bug in shipping blocks payments.

Constraints:
1. Zero downtime migration (cannot schedule maintenance windows)
2. Team of 5 engineers, 6-month deadline
3. Must keep PostgreSQL (no NoSQL migration budget)
4. PCI-DSS compliance must be maintained throughout

Recommend a migration strategy with sequenced phases.
"""

# Try budget_tokens = 2000 first, then 10000 — compare answer depth
response = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=8000,
    thinking={"type": "enabled", "budget_tokens": 6000},
    messages=[{"role": "user", "content": scenario}]
)

for block in response.content:
    if block.type == "text":
        print(block.text)

Extended thinking costs the same per token as standard output but adds latency. A 10,000 budget_tokens thinking run adds ~4–8 seconds and 500–2,000 billed output tokens (the thinking content itself). For cost-sensitive workflows, run thinking only on the first pass of a complex problem, then cache the result with prompt caching (cache_control: {type: 'ephemeral'}) for follow-up questions on the same context.

Quiz disponible

Terminez la lecture de ce module puis validez vos connaissances avec le quiz.

Vision Capabilities: Document Analysis and Chart Extraction

Claude 4.5/4.6 vision handles PDFs, scanned documents, complex charts, and multi-image comparisons with significantly higher accuracy than Claude 3.x. Key improvements: table extraction from PDFs now preserves row/column structure correctly 94% of the time (up from ~70%), and chart-to-data conversion handles logarithmic scales, multi-axis charts, and watermarked images. The model can also reason across multiple images in a single request — useful for comparing two versions of a diagram, or checking that a UI screenshot matches a spec.

Real-World Example: Financial Report Analysis

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import anthropic
import base64
from pathlib import Path

client = anthropic.Anthropic()

def extract_financial_metrics(pdf_path: str) -> dict:
    """
    Extract key financial metrics from a PDF annual report using Claude 4.6 vision.
    Returns structured data ready for your data pipeline.
    """
    pdf_data = base64.standard_b64encode(Path(pdf_path).read_bytes()).decode("utf-8")

    response = client.messages.create(
        model="claude-sonnet-4-6",
        max_tokens=4096,
        messages=[
            {
                "role": "user",
                "content": [
                    {
                        "type": "document",
                        "source": {
                            "type": "base64",
                            "media_type": "application/pdf",
                            "data": pdf_data,
                        },
                    },
                    {
                        "type": "text",
                        "text": """Extract the following financial metrics from this annual report.
Return ONLY a JSON object with these exact keys:
{
  "company": string,
  "fiscal_year": number,
  "revenue_usd_millions": number,
  "gross_margin_pct": number,
  "operating_income_usd_millions": number,
  "net_income_usd_millions": number,
  "cash_and_equivalents_usd_millions": number,
  "yoy_revenue_growth_pct": number | null,
  "eps_diluted": number | null,
  "data_confidence": "high" | "medium" | "low"
}

Set data_confidence to "low" if any value is estimated or the document
quality makes precise extraction uncertain.""",
                    },
                ],
            }
        ],
    )

    import json
    raw = response.content[0].text.strip()
    if raw.startswith("```"):
        raw = raw.split("```")[1]
        if raw.startswith("json"):
            raw = raw[4:]
        raw = raw.rsplit("```", 1)[0]
    return json.loads(raw)

# Process a batch of reports
reports = ["q4-2025-report.pdf", "q1-2026-report.pdf"]
for report in reports:
    metrics = extract_financial_metrics(report)
    print(f"{metrics['company']} FY{metrics['fiscal_year']}: "
          f"Revenue ${metrics['revenue_usd_millions']}M, "
          f"Margin {metrics['gross_margin_pct']}%, "
          f"Confidence: {metrics['data_confidence']}")

Exercice pratique

Replace CHART_URL with a URL to a bar chart, line graph, or scatter plot from your own domain. Try a chart with a logarithmic Y-axis — Claude 4.6 handles these correctly where earlier models often misread the scale. For production, resize images to max 1568px on the longest side before sending to reduce token cost by 30–60%.

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import anthropic
import base64
import urllib.request
import json

client = anthropic.Anthropic()

# Fetch a sample chart image (public domain) and extract the data it contains.
# Replace CHART_URL with any publicly accessible chart image URL,
# or encode your own chart as base64.

CHART_URL = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Cluster_2015_RR245_Batygin_2016.png/640px-Cluster_2015_RR245_Batygin_2016.png"

# Download the image
with urllib.request.urlopen(CHART_URL) as r:
    image_bytes = r.read()

image_b64 = base64.standard_b64encode(image_bytes).decode("utf-8")

response = client.messages.create(
    model="claude-sonnet-4-6",
    max_tokens=2048,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": image_b64,
                    },
                },
                {
                    "type": "text",
                    "text": "Describe what this chart shows. If it contains data points or axes, list the key values. What conclusions can be drawn from it?"
                }
            ]
        }
    ]
)

print(response.content[0].text)

Performance benchmarks for Claude 4.5/4.6 vs Claude 3.5 Sonnet: +22% on HumanEval (code), +18% on AIME (math), 1.4× faster inference on equivalent tasks. For production workloads: use claude-haiku-4-5 for classification and extraction tasks under 100ms SLA, claude-sonnet-4-6 for reasoning and generation tasks, and claude-opus-4-6 only for tasks where accuracy is worth a 3–5× cost premium. Always measure actual latency in your stack — API response time varies with request size and time-of-day load.

Quiz disponible

Terminez la lecture de ce module puis validez vos connaissances avec le quiz.

← All formations

Claude 4.5/4.6: Advanced Features and Canvas

Canvas Artifacts: Code Generation and Interactive Outputs

Canvas Artifacts: Code Generation and Interactive Outputs

Real-World Example: Automated Code Review with Claude 4.6

Extended Thinking: Deep Reasoning for Complex Problems

Extended Thinking: Deep Reasoning for Complex Problems

Vision Capabilities and Performance Improvements

Vision Capabilities: Document Analysis and Chart Extraction

Real-World Example: Financial Report Analysis