PRESENTATION 3 OF 10

Claude.ai

The Web Interface

A comprehensive guide to Anthropic's flagship conversational interface — from first message to advanced power-user workflows.

claude.ai artifacts projects teams

Anthropic Claude • Series Deep-Dive

02

What Is Claude.ai?

Claude.ai is Anthropic's direct-to-user web application — the simplest way to interact with Claude models without writing any code.

Who It's For

  • Individual knowledge workers & creators
  • Teams needing shared AI workspaces
  • Enterprises requiring SSO & compliance
  • Anyone exploring Claude's capabilities

What It Offers

  • Multi-model access (Haiku, Sonnet, Opus)
  • Rich artifacts — code, docs, diagrams
  • Project-based organization & context
  • File uploads, images, extended thinking

Tiers

Free — limited messages  |  Pro ($20/mo) — 5x usage, all models  |  Max ($100/mo or $200/mo) — 20x usage  |  Team ($30/seat/mo) — shared workspaces  |  Enterprise — SSO, audit, custom retention

03

The Conversation Interface

Conversations Search... Code review helper Essay brainstorm Data analysis Q3 Code review helper Claude Sonnet User: Please review this Python function... def process_data(items): ... Claude: I see a few improvements... 1. Add type hints for clarity 2. Handle empty list edge case Thinking... Message Claude... + Artifact def process(items): if not items: return [] return [x*2 ...

Sidebar

History, search, starred chats, projects

Main Panel

Conversation thread with model selector

Artifact Panel

Live preview of generated content

04

Choosing Your Model

Use the model selector in the top-right to pick the best model for your task.

Haiku

  • Fastest response time
  • Lowest cost per message
  • Great for quick Q&A, brainstorms
  • Simple summaries & lookups

Sonnet

  • Best balance of speed & quality
  • Strong at coding & analysis
  • Default model for most users
  • Excellent for daily workflows

Opus

  • Most capable & nuanced
  • Complex reasoning & research
  • Long-form writing & strategy
  • Pro/Team/Enterprise only
New task Complex reasoning? Yes Opus No Speed critical? Yes Haiku No Sonnet
05

Crafting Effective Prompts

Be Specific

Instead of "help me write code," try:
"Write a Python function that takes a CSV file path and returns the top 5 rows by revenue, including error handling for missing files."

Provide Context

Share relevant background:
"I'm building a Django REST API. The User model already has email and name fields. Add a profile endpoint."

Multi-Turn Refinement

  • Start broad, then narrow iteratively
  • Reference earlier messages naturally
  • "Make it more concise" / "Add error handling"
  • Claude retains full conversation context

Structured Requests

  • Use bullet points for multi-part asks
  • Specify output format (JSON, table, list)
  • Ask for step-by-step reasoning
  • Set constraints: length, tone, audience

System Prompts (Projects)

In Projects, you can set custom instructions that persist across all conversations — defining Claude's role, tone, constraints, and domain knowledge.

06

Projects

Projects let you organize conversations around a topic and give Claude persistent context.

Project: Q1 Marketing Campaign Custom Instructions You are a marketing strategist. Tone: professional, data-driven. Focus on B2B SaaS audience. Project Knowledge brand-guidelines.pdf competitor-analysis.csv q4-results-summary.md Conversations Email sequence draft Landing page copy A/B test ideas All conversations in this project automatically inherit instructions + knowledge. Up to 200k tokens of project context available per conversation.

Create

Sidebar → "New Project" → Name & describe it

Add Knowledge

Upload files or paste text that Claude references automatically

Set Instructions

Define Claude's role, constraints, and formatting preferences

07

Project Knowledge

Upload documents to give Claude persistent context across every conversation in a project.

Supported Formats

  • Documents: PDF, TXT, MD, DOCX, RTF
  • Data: CSV, JSON, XML, XLSX
  • Code: .py, .js, .ts, .java, .go, .rs, etc.
  • Images: PNG, JPG, GIF, WebP

How Context Works

  • Files are loaded into Claude's context window
  • Knowledge is available in every project conversation
  • Max ~200k tokens of combined knowledge
  • Claude can reference, quote, and reason over docs

Best Practices

  • Keep files focused and relevant
  • Use descriptive filenames
  • Remove boilerplate / noise
  • Structure text with headers
  • Prefer text-rich PDFs over scanned images

Text Snippets

In addition to file uploads, paste raw text as knowledge entries — useful for API docs, style guides, or reference data.

08

Artifacts

Artifacts are standalone content blocks that appear in a dedicated preview panel alongside the conversation.

Code

Python, JavaScript, HTML/CSS, SQL, and more. Syntax highlighted with copy button.

Documents

Markdown-rendered text: essays, reports, emails, plans. Full formatting support.

SVG Graphics

Vector diagrams, charts, icons, and illustrations rendered inline.

Mermaid Diagrams

Flowcharts, sequence diagrams, ER diagrams, Gantt charts rendered live.

React Components

Interactive UI components rendered in a sandboxed preview environment.

HTML Pages

Complete web pages with CSS and JavaScript, previewed in an iframe.

When Claude Creates Artifacts

Claude generates artifacts automatically when producing substantial, self-contained content. Short inline answers remain in the conversation flow.

09

Creating & Editing Artifacts

1. Request "Build me a dashboard in React" 2. Generate Claude creates artifact with live preview 3. Iterate "Add dark mode" "Fix the chart labels" 4. Publish Copy, download, or publish to share

Version History

  • Each edit creates a new version
  • Navigate between versions with arrows
  • Compare changes across iterations
  • Revert to any previous version

Publishing Artifacts

  • Click Publish to get a shareable link
  • Published artifacts are hosted by Anthropic
  • Interactive React/HTML artifacts run live
  • Viewers don't need a Claude account

Editing Tips

Be specific: "Change the header color to blue" works better than "make it look nicer." Reference specific sections, variables, or line numbers for targeted edits.

10

File Uploads & Multimodal Input

Claude can analyze images, documents, data files, and code uploaded directly into conversations.

Image Analysis

  • Describe, interpret, and extract text from images
  • Analyze charts, screenshots, diagrams
  • Compare multiple images side-by-side
  • Formats: PNG, JPG, GIF, WebP

Document Processing

  • Summarize lengthy PDFs
  • Extract key data points
  • Answer questions about content
  • Cross-reference multiple documents

Data Analysis

  • Parse CSV/Excel files
  • Calculate statistics & trends
  • Generate charts via artifacts
  • Write queries against datasets

Code Review

  • Upload source files for review
  • Identify bugs and improvements
  • Suggest refactoring patterns
  • Explain unfamiliar codebases
TypeMax SizePer MessageNotes
Images20 MB eachUp to 5Auto-resized for context window
PDFs32 MB eachUp to 5Text extraction + visual analysis
Text/Code30 MB eachUp to 5Most programming languages supported
CSV/Data30 MB eachUp to 5Parsed and analyzed structurally
11

Extended Thinking

Extended thinking gives Claude a dedicated reasoning phase before responding, visible as a collapsible "thinking" block.

User: Solve this logic puzzle... ▼ Thinking (12 seconds) Let me break this down step by step... If A implies B, and B implies C... Then by transitivity, A implies C... Checking the contrapositive... Claude: The answer is D. Here's why: Based on the logical chain A→B→C...

When to Enable

  • Complex math & logic problems
  • Multi-step reasoning tasks
  • Code debugging requiring analysis
  • Strategic planning & decision-making
  • Tasks where accuracy matters most

How to Activate

Toggle "Extended thinking" in the model settings or click the lightbulb icon next to the message input.

Trade-offs

Higher accuracy on hard problems, but uses more tokens and takes longer. Keep off for simple queries.

12

Styles

Control how Claude writes using preset and custom styles applied to any conversation.

Concise

Short, direct answers. Minimal explanation. Ideal for experienced users who want quick results.

Explanatory

Detailed responses with context and reasoning. Good for learning and complex topics.

Formal

Professional tone, structured formatting. Suitable for business communications and reports.

Custom Styles

  • Create your own named styles
  • Define tone, length, formatting preferences
  • Paste a writing sample for Claude to match
  • Reuse across conversations
  • Share styles within Teams

Style vs. Instructions

  • Styles = how Claude writes (tone, length, format)
  • Project instructions = what Claude knows (role, context, rules)
  • Both can be combined for fine-tuned output
  • Styles persist across all conversations
  • Instructions are project-specific
13

Conversation Management

Organizing Conversations

  • Star important conversations for quick access
  • Rename conversations with descriptive titles
  • Move conversations between projects
  • Archive old conversations to reduce clutter
  • Conversations are sorted by recency by default

Search

  • Full-text search across all conversations
  • Search by title or message content
  • Filter by project or time period
  • Results show matching context snippets
  • Keyboard shortcut: Cmd/Ctrl + K

Continuing Conversations

Pick up any conversation where you left off. Claude retains the full context of the thread. Long conversations may hit context limits — start a new chat and summarize if needed.

Branching

Edit a previous message to branch the conversation in a new direction. The original branch is preserved — navigate between branches using the arrows above the edited message.

14

Sharing & Collaboration

You Author Share Link Read-only URL Team Project Shared workspace Publish Artifact Public Anyone with link can view Team members can continue chat Anyone can view/interact with artifact

Sharing Conversations

  • Generate a shareable link from any conversation
  • Recipients see the full thread (read-only)
  • No Claude account required to view
  • Revoke access at any time

Team Collaboration

  • Shared projects with team-wide knowledge
  • Team members can start new chats in shared projects
  • Centralized prompt libraries and templates
  • Activity visible to team admins
15

Keyboard Shortcuts & Power Tips

ShortcutAction
Cmd/Ctrl + KSearch conversations
Cmd/Ctrl + Shift + NNew conversation
Cmd/Ctrl + Shift + CCopy last response
/Focus message input
Shift + EnterNew line (without sending)
EnterSend message
Cmd/Ctrl + Shift + ;Toggle sidebar
EscapeStop generation

Power Tips

  • Drag & drop files anywhere in the chat
  • Paste images directly from clipboard
  • @-mention artifacts to reference them
  • Use Markdown in your messages for structure
  • Stop & retry to regenerate a response

URL Tricks

Append ?model=opus to a claude.ai URL to pre-select a model. Bookmark project URLs for quick access to specific workflows.

16

Claude.ai for Teams

$30/seat/month — Designed for collaborative workgroups who need shared context and admin controls.

Shared Workspaces

  • Team-wide projects with shared knowledge
  • Centralized prompt & style libraries
  • All members access the same context
  • Collaborative iteration on outputs

Admin Controls

  • Invite/remove members via email
  • Role management (admin, member)
  • Usage analytics per member
  • Billing centralization

Key Benefits

  • Higher usage limits than Pro
  • Early access to new features
  • Team data not used for training
  • Priority support from Anthropic

Team vs. Individual Pro

Pro gives you personal access to all models with increased limits. Team adds shared projects, admin controls, centralized billing, and the guarantee that conversations are not used for model training.

17

Claude.ai for Enterprise

Enterprise-grade deployment with security, compliance, and governance built in.

Security & Identity

  • SSO/SAML — integrate with Okta, Azure AD, Google Workspace
  • SCIM provisioning — auto-sync users from your IdP
  • Domain verification — enforce organization boundaries
  • Encrypted at rest and in transit

Compliance & Governance

  • Audit logs — track all user activity
  • Data retention policies — customizable per org
  • SOC 2 Type II certified
  • Data never used for model training

Administration

  • Org-wide usage dashboards
  • Department-level workspaces
  • Role-based access control (RBAC)
  • Content moderation controls

Support & Onboarding

  • Dedicated account manager
  • Custom onboarding & training
  • Priority technical support
  • Custom contract & SLA terms
18

Usage Limits & Fair Use

PlanModelsMessage LimitsRate Reset
FreeSonnet, HaikuLimited daily messagesEvery ~8 hours
Pro ($20/mo)All (incl. Opus)5x more than FreeEvery ~5 hours
Max ($100/mo or $200/mo)All (incl. Opus)20x more than FreeEvery ~5 hours
Team ($30/seat)All (incl. Opus)Higher than ProEvery ~5 hours
EnterpriseAll + customNegotiated volumeCustom SLA

What Counts as Usage?

  • Each message sent consumes tokens (input + output)
  • Longer conversations use more per message (growing context)
  • File uploads add to input tokens
  • Extended thinking uses additional tokens
  • Opus costs ~5x more tokens than Haiku per message

Managing Your Limits

  • Use Haiku for simple tasks to conserve usage
  • Start new conversations instead of very long threads
  • Use project knowledge instead of re-uploading files
  • Check remaining capacity in the usage indicator
  • Rate limits reset on a rolling window, not midnight
19

Mobile Experience

Claude iOS & Android App

  • Native apps available on both platforms
  • Full feature parity with web interface
  • Camera integration for image uploads
  • Push notifications for shared conversations
  • Biometric authentication (Face ID, fingerprint)

Mobile-Optimized Features

  • Voice input via device keyboard
  • Swipe to navigate conversations
  • Quick-share to Claude from other apps
  • Offline conversation history viewing
  • Responsive artifact previews
Claude Summarize this article Here's a concise summary: The article discusses... What are the key points? Key takeaways: 1. Market growth of 15% 2. New regulations in Q2 Message...
20

Tips & Best Practices

Prompting Patterns

  • Role prompting: "You are a senior data scientist..."
  • Chain-of-thought: "Think step by step..."
  • Few-shot: Provide examples of desired output
  • Constraints: "Reply in under 100 words"
  • Format spec: "Return as JSON with keys: ..."

Workflow Patterns

  • Iterative refinement: Start rough, polish in turns
  • Parallel exploration: Open multiple conversations
  • Context staging: Upload docs first, ask questions after
  • Template reuse: Save prompts in project instructions
  • Model switching: Draft with Haiku, refine with Sonnet

Common Pitfalls to Avoid

  • Overly long conversations (start fresh periodically)
  • Vague prompts without context or constraints
  • Not using Projects for recurring workflows
  • Ignoring artifacts for structured content
  • Using Opus for tasks where Haiku suffices

Getting Unstuck

  • "Let me rephrase..." — restate what you want
  • "Start over with a different approach..."
  • Edit a previous message to branch the conversation
  • Ask Claude to critique its own output
  • Enable extended thinking for better reasoning
21

Summary & Key Takeaways

Claude.ai Is Your AI Workspace

A full-featured interface for conversations, artifacts, projects, file analysis, and collaboration — no coding required.

Choose the Right Model

Haiku for speed, Sonnet for balance, Opus for depth. Match the model to the complexity of your task.

Projects & Knowledge

Organize work into projects with persistent context. Upload documents and set custom instructions to get domain-specific responses.

Artifacts Are Powerful

Code, docs, diagrams, React components, and full HTML pages — generated, iterated, versioned, and publishable.

What's Next in This Series

01 Intro 02 Models 03 Claude.ai ✓ 04 API 05 Prompt Eng. 06 Safety 07 Enterprise 08 Ecosystem 09 Use Cases 10 Future

Claude.ai — The Web Interface • Presentation 3 of 10 • Anthropic Claude Series