Complete workshop · 8 modules · 34 lessons

Master Claude.ai
from start to finish

From the basic interface to building production platforms with autonomous agents. Everything your team needs to know.

🖥️ Interface and platforms

🤖 Haiku · Sonnet · Opus

📦 Artifacts HTML / React / SVG

🔑 API + Streaming + Tool Use

💻 Claude Code CLI

🔌 MCP and connectors

⚡ Automations

🏗️ Platforms and SaaS

🎓 Skills and Computer Use

8

Modules

34

Lessons

40+

Quiz questions

~3h

Total duration

What does the workshop cover?

📘

Modules 01–02: Fundamentals

Master the interface, models, plans, effective prompting, and create your first apps with Artifacts.

🔑

Module 03: The API

Integrate Claude into your own code. Streaming, Tool Use, pricing, and error handling.

💻

Module 04: Claude Code

The coding agent that reads your project, writes, runs tests, and makes commits.

🔌

Module 05: MCP

Connect Claude with Google Drive, Gmail, Slack, GitHub, and your own systems.

⚡

Module 06: Automations

Make, n8n, Zapier, and autonomous agents that work without you being there.

🏗️

Modules 07–08: Production

SaaS architecture, advanced system prompts, security, costs, and Skills.

Each module ends with an interactive quiz of 5 questions with immediate feedback. Click on Next → to start.

Module 01 · Lesson 1 of 4

Interface and platforms

Where you can access Claude and what features each platform has.

🌐

claude.ai — Web

The main interface in any browser. Chat, projects, Artifacts, web search, and file uploads.

📱

Mobile App (iOS / Android)

Same features as the web. Record voice, take photos, and send them to Claude directly.

🖥️

Desktop App (Mac / Windows)

Native installed application. Screen capture and real-time visual context with Claude.

💻

Claude Code (CLI)

For developers. Claude operates as an autonomous agent in your code and terminal. Module 04.

Key features of claude.ai

📁

Projects

Conversation folders with shared instructions. Claude remembers context between chats.

📦

Artifacts

HTML apps, React components, SVG diagrams that Claude generates and you can use directly.

🔍

Web search

Claude searches for up-to-date information on the internet in real time. Enable it in the chat.

🧠

Memory

Claude generates memories of your conversations to maintain context between sessions.

📎

Files

Upload PDFs, Word, Excel, images, code. Claude reads them and works with them directly.

🔌

MCP Connectors

Link Claude with Google Drive, Gmail, Slack and more. Settings → Integrations. Module 05.

Module 01 · Lesson 2 of 4

The 3 Claude models

Each model is optimized for a type of task. Choosing well saves time and message quota.

Haiku

claude-haiku-4-5 · The fastest

Fast and economical. For simple tasks and high-volume processes where speed matters more than depth.

Quick and direct questions

Summaries and first drafts

High-volume automations

Sonnet

claude-sonnet-4-6 · The workhorse

★ Recommended

The perfect balance. Handles 90%+ of professional tasks with speed and quality. The default model.

Code and analysis

Professional writing

Research and investigation

Opus

claude-opus-4-6 · The most powerful

For the most complex problems. Deep reasoning, system architecture, expert analysis.

Complex logic problems

System architecture

Deep expert analysis

Rule of thumb: Always start with Sonnet. Upgrade to Opus when the problem demands it. Downgrade to Haiku for quick tasks. Using Opus for everything wastes quota.

Module 01 · Lesson 3 of 4

Available plans

From free personal use to enterprise deployment with advanced security.

Free

$0 / month

✓Haiku 4.5 and Sonnet

✓Reduced message limit

✓Basic Artifacts

✗No Opus model

✗No advanced projects

Pro

Effective prompting

The 6 techniques that most impact the quality of Claude's responses.

01

Be specific, not vague

Claude takes instructions literally. The more context you provide — audience, tone, length, format — the better the result on the first try.

✗ Vague

"Write me something about marketing"

✓ Specific

"150-word email for a CFO in LATAM about payroll software. Professional tone, CTA at the end."

02

Use XML tags to structure

Claude understands XML natively. Use it to separate context, task, constraints, and format in complex prompts.

<context>I am a marketing consultant in Mexico</context> <task>Create 5 hooks for LinkedIn posts</task> <format>Numbered list, max 2 lines per hook</format>

03

Few-shot: show examples of the result

Instead of describing the format, show it with 2-3 examples. It is more effective than explaining with words.

Generate names in this style: Example 1: Nexora — fast payment technology Example 2: Flivex — smart logistics Now generate 5 for: HR software for SMEs

04

Ask for step-by-step reasoning

For complex problems, asking to reason step-by-step dramatically improves quality. Better with Sonnet and Opus.

05

Specify the output format

If you don't indicate the format, Claude chooses one. Tell it exactly what you want: JSON, table, list, prose, code, how many words.

✗ Without format

"Give me ideas for my app"

✓ With format

"5 ideas in a table: | Idea | Problem | Monetization |"

06

Your style influences the response

If you write in bullets → Claude responds in bullets. If you write in prose → it responds in prose. Choose consciously according to what you need.

Module 01 · Quiz

Quiz — Module 01

5 questions about interface, models, plans, and prompting. Immediate feedback on each answer.

Module 02 · Lesson 1 of 4

What are Artifacts?

Real deliverables that Claude generates and renders in a separate panel — visible, downloadable, and interactive.

The core idea: An Artifact is not text in the chat. It is a real deliverable: an app that runs, a document you download, a diagram you export — all visible in a separate panel next to the chat.

Types of Artifacts

.html

Web page or full app

HTML + CSS + JS in a single file. It runs directly. Buttons, forms, charts, animations. Renders in the chat.

.jsx

React component

Functional component with hooks. Pre-installed libraries: Recharts, D3, Lucide, Three.js, Tone.js — no configuration required.

.svg

Vector graphic / Diagram

Flowcharts, illustrations, infographics. Scalable and exportable. Renders in the chat.

.mermaid

Mermaid diagrams

Flowcharts, sequences, Gantt charts, ER diagrams with simple syntax. Renders in the chat.

.docx .pptx .xlsx .pdf

Downloadable documents

Generated with Computer Use Skills. They are downloaded directly from the chat.

Rule of thumb: If the content has more than ~20 lines, or you are going to use it outside the chat → request it as an Artifact.

Module 02 · Lesson 2 of 4

HTML, React and SVG

The three main interactive Artifact formats and when to use each one.

HTML — the most versatile (80% of cases)

A single file with CSS, JavaScript, and markup. Tools, dashboards, games, forms, calculators. No external dependencies.

Prompt for HTML: "Create an HTML Artifact of [what it is]. Functionality: [list]. Design: [style]. All in a single file, no external dependencies."

React (.jsx) — for complex UIs with state

Pre-installed libraries

recharts → charts lucide-react → icons d3 → visualizations three.js → 3D (r128) tone.js → audio mathjs → mathematics shadcn/ui → components

Important rules

— Always export default
— No required props
— Tailwind base only
— Hooks explicitly imported
— No localStorage (use useState)

Which one to use?

Simple tool / calculator / game

HTML

Dashboard with data charts

React + Recharts

Flowchart / process

SVG or Mermaid

UI with multiple components

React

Module 02 · Lesson 3 of 4

Persistent storage

The API window.storage allows your Artifacts to remember data between sessions — no backend, no server.

🔒

Personal (shared: false)

Only visible to the current user. Journals, personal trackers, session history.

await window.storage.set('key', val) await window.storage.get('key') await window.storage.delete('key')

👥

Shared (shared: true)

Visible to all users of the Artifact. Leaderboards, polls, collaborative whiteboards.

await window.storage.set('key', val, true) await window.storage.get('key', true) await window.storage.list('prefix:', true)

Correct pattern: always with try/catch

// Cargar al iniciar async function load() { try { const r = await window.storage.get('my-app:data'); if (r) return JSON.parse(r.value); } catch (e) { return null; } } // Guardar async function save(data) { try { await window.storage.set('my-app:data', JSON.stringify(data)); } catch (e) { console.error(e); } }

Limits: Text/JSON only · Keys <200 chars · Values <5 MB · No spaces in keys · Last-write-wins. Use hierarchical keys: 'diary:2025-04-27'

Module 02 · Lesson 4 of 4

Claude within Claude

Call the Anthropic API directly from your Artifacts. Apps with integrated AI — no backend, no server.

How it works: Anthropic automatically injects authentication into the Artifact context. You don't need to pass any API key — just fetch and it works.

The base code

What you can build

Specialized chatbots

Custom system prompt by domain. The user chats with a Claude "trained" in your area.

Content processing

Text analyzer, sentiment classifier, summarizer for pasted documents.

Multi-step flows

The Artifact chains multiple calls: generate → evaluate → refine.

Tools with MCP

Pass MCP servers so internal Claude can use Drive, Gmail, Slack.

⚠️ Always include try/catch, loading indicator, and request JSON output when you need structured data.

Module 02 · Quiz

Quiz — Module 02

5 questions about Artifacts, HTML/React/SVG, persistent storage, and Claude within Claude.

Module 03 · Lesson 1 of 3

Getting started with the API

The API is how you integrate Claude into your own code, product, or pipeline. You pay per token — not by monthly subscription.

3-step setup

1

Get your API key

Go to console.anthropic.com → create an account → API Keys → generate your key. Save it as an environment variable.

2

Install the SDK

pip install anthropic # Python npm install @anthropic-ai/sdk # TypeScript / Node.js

3

Your first call

import anthropic, os client = anthropic.Anthropic(api_key=os.environ.get("ANTHROPIC_API_KEY")) msg = client.messages.create( model="claude-sonnet-4-6", max_tokens=1024, system="You are a digital marketing expert.", messages=[{"role":"user","content":"What is CAC?"}] ) print(msg.content[0].text)

Multi-turn conversations

# The API is stateless — you manage the history history = [] def chat(msg): history.append({"role":"user","content":msg}) r = client.messages.create(model="claude-sonnet-4-6",max_tokens=1024,messages=history) reply = r.content[0].text history.append({"role":"assistant","content":reply}) return reply

Module 03 · Lesson 2 of 3

API models and pricing

Pricing updated as of April 2026. MTok = million tokens. 1 token ≈ 0.75 words in English.

Model	Input / MTok	Output / MTok	Context	Ideal for
claude-opus-4-6	$5.00	$25.00	1M tokens	Deep reasoning, agents
claude-sonnet-4-6	$3.00	$15.00	1M tokens	General use · Production ✓
claude-haiku-4-5	$1.00	$5.00	200K tokens	High volume, low latency

3 ways to reduce costs

Batch API

50% discount

For non-urgent tasks. Process asynchronously within 24h. Same result, half the price.

Prompt Caching

90% less on cache hits

Reuse system prompts and repeated documents. Cache hits cost only 10% of the normal price.

Correct model

Up to 5× savings

Haiku vs Opus = 5× cheaper. Use the smallest model that solves the task correctly.

Module 03 · Lesson 3 of 3

Streaming and Tool Use

Streaming to show text token by token. Tool Use for Claude to call real functions.

Streaming in Python

with client.messages.stream( model="claude-sonnet-4-6", max_tokens=1024, messages=[{"role":"user","content":"Write a poem"}] ) as stream: for text IN stream.text_stream: print(text, end="", flush=True)

Tool Use — the full cycle

Define tools (JSON schema)

→

Claude decides whether to use them

→

stop_reason: "tool_use"

→

You execute the function

→

You return the result

→

Final response

# Define tool tools = [{"name":"get_weather","description":"Weather of a city", "input_schema":{"type":"object","properties":{"city":{"type":"string"}},"required":["city"]}}] r = client.messages.create(model="claude-sonnet-4-6",max_tokens=1024, tools=tools,messages=[{"role":"user","content":"Weather in CDMX?"}]) if r.stop_reason == "tool_use": tc = r.content[0] result = get_real_weather(tc.input["city"]) # your real function # return result in next call

Module 03 · Quiz

Quiz — Module 03

5 questions about the API, models, pricing, streaming and Tool Use.

Module 04 · Lesson 1 of 2

Claude Code — installation and operation

A CLI tool where Claude operates as an autonomous agent within your terminal. It reads files, writes code, runs tests, and makes commits.

# Installation (requires Node.js 18+) npm install -g @anthropic-ai/claude-code # Authenticate claude login # Start in your project cd my-project && claude

The agentic loop

Your instruction

→

Read files / context

→

Plan steps

→

Execute action

→

Observe result

→

Iterate or finish

The CLAUDE.md file — permanent project memory

Create a file CLAUDE.md in the root. Claude Code reads it automatically upon startup — stack, conventions, frequent commands, architecture.

# CLAUDE.md ## Stack - Backend: Python 3.11 + FastAPI + PostgreSQL - Frontend: React 18 + TypeScript + Tailwind - Tests: pytest (minimum 80% coverage) ## Frequent commands - `make dev` — start environment - `make test` — run all tests - `make lint` — ruff + mypy ## Conventions - Commits in English, conventional commits - Environment variables in .env.local (never in code)

Module 04 · Lesson 2 of 2

Key commands and IDE integration

The most useful commands within Claude Code and how to use it from VS Code and JetBrains.

Slash commands

/compactSummarizes context to save tokens

/clearClears the session history

/model claude-sonnet-4-6Changes the model mid-session

/costShows the cost of the current session

claude --print "prompt"Headless mode for scripts and CI/CD

IDE Integration

VS Code

Official extension in the marketplace. Select code, request edits, generate tests without leaving the editor.

JetBrains

Plugin for IntelliJ, PyCharm, WebStorm, GoLand. Inline edit, generation, and refactoring.

Examples of prompts that work well

"Add unit tests to utils.py" · "Refactor this module to TypeScript" · "Find and fix all bugs" · "Migrate the database to PostgreSQL" · "Implement JWT authentication"

Module 04 · Quiz

Quiz — Module 04

5 questions about Claude Code: installation, agentic loop, commands, and CLAUDE.md.

Module 05 · Lesson 1 of 2

MCP — Model Context Protocol

Anthropic's standard protocol that gives Claude "hands" to connect with external systems.

MCP Architecture

1

Host (Claude Code or claude.ai)

The application where Claude lives. It manages the connection with MCP servers.

2

MCP Server

A lightweight process that exposes tools functions that Claude can callResources data that Claude can readPrompts reusable templates.

3

Transport

Communication via stdio (local) or HTTP with SSE (remote). Claude discovers capabilities automatically.

Available connectors

Google Drive

Search for documents, read content, create files, and update Docs and Sheets.

Gmail

Read inbox, draft replies, search threads, and send emails with confirmation.

Slack

Read channels, search messages, summarize conversations, and send messages.

GitHub

Read repos, create and comment on issues, review PRs, and make commits.

Asana / Jira

Create tasks, update statuses, assign owners, and report on projects.

PostgreSQL / MySQL

Claude queries, inserts, and updates records with SQL in real time.

In claude.ai: Settings → Integrations. In Claude Code: configure in ~/.claude/mcp_config.json

Module 05 · Lesson 2 of 2

Create your own MCP server

A lightweight MCP server in Python that exposes any external system as tools that Claude can use.

from mcp.server import Server import mcp.types as types server = Server("my-crm") @server.list_tools() async def tools(): return [types.Tool( name="search_customer", description="Search for a customer in the CRM", inputSchema={"type":"object","properties":{"query":{"type":"string"}},"required":["query"]} )] @server.call_tool() async def call(name, args): if name == "search_customer": r = search_in_my_crm(args["query"]) return [types.TextContent(type="text", text=str(r))]

Configure in Claude Code

// ~/.claude/mcp_config.json { "mcpServers": { "my-crm": { "command": "python", "args": ["/path/to/server.py"], "env": { "CRM_API_KEY": "my-key" } } } }

Module 05 · Quiz

Quiz — Module 05

5 questions about MCP, connectors, architecture, and how to create your own servers.

Module 06 · Lesson 1 of 2

Make, n8n, and Zapier with Claude

Claude as a reasoning node within no-code platforms. The pattern: trigger → extract data → Claude → action.

Trigger
email / form / webhook

→

Extract data

→

Claude API
reason / generate

→

Action
CRM / Slack / Sheet

Make — Lead qualification

Typeform → Make extracts data → HTTP calls Claude → Claude classifies (A/B/C) and generates email → HubSpot + Gmail.

n8n — Content moderation

Webhook receives post → n8n calls Claude → classifies sentiment → approves or rejects → notifies on Slack.

Zapier — Meeting summary

Zoom ends → transcript in Drive → Zapier sends to Claude → summary + action items → Notion + email.

Prompt for structured JSON

The key to automations: ask Claude to respond only with valid JSON, without additional text. Claude as an intelligent parser.

# Prompt to extract JSON (key in automations) system = """You are a data extractor. Respond ONLY with valid JSON. No additional text. If a field does not exist, use null.""" user = f"""Extract: {{"sender":string,"company":string, "urgency":"high"|"medium"|"low","amount":number|null}} EMAIL: {email_content}"""

Module 06 · Lesson 2 of 2

Autonomous agents

Systems where Claude makes decisions about which tools to use and in what order, without you telling it every step.

def agent(goal, tools, max_steps=10): messages = [{"role":"user","content":goal}] for _ IN range(max_steps): r = client.messages.create(model="claude-sonnet-4-6", max_tokens=4096,tools=tools,messages=messages) if r.stop_reason == "end_turn": return r.content[0].text if r.stop_reason == "tool_use": messages.append({"role":"assistant","content":r.content}) results = [] for b IN r.content: if b.type=="tool_use": res = execute(b.name, b.input) results.append({"type":"tool_result","tool_use_id":b.id,"content":res}) messages.append({"role":"user","content":results})

⚠️ Always define max_steps to avoid infinite loops. Add detailed logging of each agent action to be able to debug and audit in production.

Module 06 · Quiz

Quiz — Module 06

5 questions about automations with Make/n8n/Zapier and autonomous agent architecture.

Module 07 · Lesson 1 of 2

Product architecture with Claude

How to structure a SaaS, internal chatbot, or data pipeline with Claude at the core.

Product types

AI SaaS

Claude at the core. Users interact through your interface. Example: proposal generator for agencies.

Internal chatbot

Claude trained on your documents and processes. Answers team questions about policies and catalog.

Embedded Copilot

AI inside your existing app. Claude sees what the user is doing and helps contextually.

Data pipeline

Claude as a transformer in a pipeline. Extracts, classifies, enriches, and structures information in volume.

Reference architecture

Frontend

React/Vue/HTML — the user interface. Communicates with your backend, NEVER directly with Anthropic.

Your Backend

FastAPI/Node/Rails — manages auth, rate limiting, logging, history. The only one that has your Anthropic API key.

Cache/DB

Redis for prompt caching, PostgreSQL for conversation history, vector DB for RAG.

Anthropic API

Only your backend talks to Anthropic. Never expose your API key in the frontend — it is the #1 security error.

Module 07 · Lesson 2 of 2

System prompts and security in production

The system prompt is your most valuable asset. Security is not optional.

Anatomy of a production system prompt

""" You are Aria, sales assistant for [Company]. ROLE: You help sales reps with proposals, calls, and customer context. SCOPE: You do not have access to internal financial data or employee information. KNOWLEDGE: - Discounts: up to 15% without approval, 15-25% requires manager - SLA: implementation in 30 days for standard accounts TONE: Professional but approachable. Concise answers — the rep is on a call. FORMAT: Proposals in Markdown. Bullet points for recommendations, never long paragraphs. GUARDRAILS: - Never mention competitors by name - Do not make pricing promises without verifying - If the user seems frustrated, offer to connect with human support """

The 4 most common security mistakes

API key in the frontend

Error #1. NEVER put your API key in client-side code. Any user can steal it in seconds using DevTools.

No per-user rate limiting

Without limits, a malicious user can make thousands of requests and skyrocket your bill. Implement it from day 1.

Prompt injection

A user can try to "break" the system prompt. Validate input and build robust system prompts.

No logging

You need logs for every request: user_id, tokens used, cost, latency. Without this, you cannot audit or control costs.

Module 07 · Quiz

Quiz — Module 07

5 questions about product architecture, system prompts, and security.

Module 08 · Lesson 1 of 2

What are Skills?

Instruction folders that Claude loads dynamically to generate high-quality outputs in specific formats.

How they work

1

Claude receives the task

"Create an 8-slide presentation on marketing strategy."

2

Reads the relevant SKILL.md

Reads /mnt/skills/public/pptx/SKILL.md — color palettes, design rules, libraries, layouts, common mistakes to avoid.

3

Generate with the knowledge of the Skill

The result is visually superior to what I would do without the Skill. Production-ready.

4

Deliver the file

The file is copied to /mnt/user-data/outputs/ and is downloaded directly from the chat.

Skills available on claude.ai

.pptx

PowerPoint Presentations

With color palettes, varied layouts, icons, and native editable charts.

.docx

Word Documents

Reports, memos, letters with styles, tables of contents, and professional formatting.

.xlsx

Excel

Formulas, conditional formatting, multiple sheets, charts, and pivot tables.

.pdf

PDFs

Create from scratch, merge, split, OCR on scanned PDFs, fill out forms.

frontend

Web Design

High-quality interfaces that avoid generic AI aesthetics.

custom

Your own Skills

Upload Skills via the Skills API to package your company's domain expertise.

Module 08 · Workshop wrap-up

Roadmap — next 30 days

You have completed all 8 modules. Here is your concrete plan to implement what you have learned.

1

Week 1 — Fundamentals in practice

Activate Pro, connect 2-3 MCP connectors (Drive + Gmail at a minimum), create your first HTML Artifact with Claude inside Claude. Goal: interface fluency.

2

Week 2 — First real integration

Get your API key, install the SDK, build a simple chatbot with a custom system prompt for your use case. First production request.

3

Week 3 — Claude Code and automation

Install Claude Code, use it in an existing project. Design a workflow in Make or n8n with Claude as a reasoning node. One automated repetitive task.

4

Week 4 — First product or platform

Launch your first MVP: an internal chatbot, a simple vertical tool, or a data processing pipeline. With authentication, rate limiting, and basic logging.

Resources to keep diving deeper

Official documentation

docs.claude.com — Full API
support.claude.ai — claude.ai
console.anthropic.com — your API account

Prompt engineering

Official guide at docs.claude.com/prompting — the most up-to-date reference on advanced techniques with Claude 4.x.

🏆 Congratulations! You have completed the full Claude workshop. Now you have the tools to build with AI in a real and professional way.

Master Claude.aifrom start to finish