What Is Anthropic and Claude?

Welcome to the Claude API course. In this course you will build one real project, step by step: an Angular AI Lab. It is a small web app with a Node.js server behind it. In every lesson you read an easy explanation, and at the end you get one task. You build the task yourself, and then you can download the full solution and compare it with your work.

By the end of the course your AI Lab will chat with Claude, stream answers word by word, read PDFs, call tools, and compare a resume with a job post. These are the same building blocks used in real AI products. In this first lesson we start with the basics: what Claude is, how people use it, how to choose a model, and how the pieces of your project fit together.

What is Anthropic, and what is Claude?

Anthropic is a company that builds AI systems and does research on AI safety. Claude is the name of the AI assistant that Anthropic makes. Claude is a large language model, or LLM. You give it some text, and it writes text back. It can answer questions, summarise a long document, rewrite a resume bullet point, explain code, and much more.

Think of Claude as a very well-read assistant who can write and reason in many languages. It is not a person, and it is not a search engine. It does not look things up on the internet by itself. It writes the answer based on what it learned during training and on the text you give it in your request. That is why the quality of your request matters so much, and why this course spends a lot of time on how to write good requests.

Two ways to use Claude

There are two main doors into Claude, and beginners often mix them up.

• Claude.ai and the Claude apps. This is a chat website and apps for phone and desktop. You type, Claude answers. It is made for people to use directly. It has its own plans and features.
• The Claude API. This is a service for programmers. Your code sends a request over the internet, and Claude sends an answer back. You use it to put Claude inside your own product, for example inside a resume builder.

An easy way to remember the difference: Claude.ai is like eating at a restaurant. The API is like buying from the restaurant's kitchen to sell inside your own shop. Both use the same kitchen, but you pay and manage them separately. A paid plan for Claude.ai does not include API credits. API usage is billed by the amount you use, through the Anthropic Console, which is the website where you create API keys and see your usage.

How a request to the API looks

When your program talks to Claude, it sends a small package of information and gets a package back. The package you send contains three main things: which model to use, a limit on how long the answer can be, and the messages, which hold your question. The answer package contains Claude's text and some numbers that tell you how much was used. You will see real code for this in the next lesson. For now, remember the picture: a question goes in, an answer comes out, and everything is counted.

Everything is counted in tokens. A token is a small piece of text, about a word or a part of a word. You pay for the tokens you send and the tokens Claude writes. We will study tokens in detail in lesson 3.

The Claude model family

Claude is not one single model. It is a family of models, and each one is a different trade-off between three things: how smart it is, how fast it replies, and how much it costs. This is just like vehicles. A big truck can carry a lot but uses more fuel and is slower in the city. A small scooter is quick and cheap but cannot carry much. You pick the vehicle that fits the job.

• Larger, more capable models are best for hard work: long reasoning, difficult coding, careful analysis. They cost more and reply more slowly.
• Smaller, faster models are best for simple, repeated work: sorting messages into categories, pulling a name and a phone number out of text, writing a short reply. They are cheaper and quicker.
• Middle models sit in between and are a good first choice for many products.

Anthropic releases new versions regularly and retires old ones on a published schedule. This means you should never scatter a model name all over your code. Put it in one setting, like we do in the lab with the CLAUDE_MODEL value in the .env file. When a new version arrives, you change one line.

How to choose a model without guessing

Beginners often ask, "Which model is the best?" That is the wrong question. The right question is, "Which model is good enough for my task at the lowest cost and delay?" Here is a method that works for any project.

1. Write down 20 or more real examples of your task. For a resume tool, collect 20 real bullet points and what a good rewrite looks like.
2. Run all the examples on a smaller model first.
3. Look at the answers. If they are good enough, stop. You are done, and you saved money.
4. If some answers are weak, try the same examples on a larger model and compare.
5. Decide for each feature separately. A simple feature can use a small model while a hard feature uses a larger one.

Notice that the decision uses your own examples, not opinions from the internet. A model that is great on a public test can still be poor on your special kind of task, and the other way around.

The big picture of your AI Lab

Before we build, look at how the pieces connect. This picture stays the same for the whole course.

1. The Angular app runs in the user's browser. It shows pages, buttons and forms.
2. The Angular app sends a request to your Node.js server.
3. Your server adds the secret API key and calls Claude.
4. Claude answers your server, your server cleans the answer, and sends it to Angular.

Why not call Claude directly from Angular? Because anything that runs in the browser can be read by anyone. If you put your API key in Angular code, a stranger can open the browser tools, copy the key, and spend your money. The key must live only on your server. This is the number one rule of using any paid API, and the lab is built around it. Your server is also the place where you will check inputs, limit how often someone can call, and handle errors, so the browser never gets raw error details.

Another small rule: keep the key out of your source code. We put it in a file called .env, and we add that file to .gitignore so it never goes to GitHub. In this lesson you do not need a key yet. Your first server only reports whether a key is present. You will make the first real request in lesson 2.

Your task: set up the AI Lab and build the Models page

Now it is your turn. In this task you will create the project and build a first useful screen: a Models page where a user answers three simple questions and gets a suggestion of which kind of model to start with. The page also asks your server if it is running and if an API key has been found.

What you will build

• An Angular project called ai-lab.
• A small Node.js server in a folder called server, with one route: GET /api/health.
• A proxy setting so Angular can call /api during development.
• A Models page in Angular with a task selector, a volume selector, a "speed matters" checkbox, and a live suggestion.

Steps

1. Make sure Node.js 20 or newer is installed. Create the Angular project: run npx @angular/cli@20 new ai-lab --routing --style=css --ssr=false, then go into the folder. (This course uses Angular 20 with standalone components and signals.)
2. Install the server tools: npm install express dotenv @anthropic-ai/sdk.
3. Create server/package.json containing { "type": "module" } so the server can use import statements.
4. Create server/claude.js. It reads CLAUDE_MODEL from the environment and creates the Claude client. Create server/index.js that starts Express and loads every file in server/routes.
5. Create server/routes/health.js with a GET /health route that returns ok, the model name, and whether an API key exists (true or false, never the key itself).
6. Create proxy.conf.json that sends /api to http://localhost:3000, and change the start script in package.json to ng serve --proxy-config proxy.conf.json.
7. In Angular, add provideHttpClient() to app.config.ts. Create a page component called ModelsPage with the three questions, a suggestion function and a call to /api/health. Add it to your routes.
8. Copy .env.example to .env. Run the server with node server/index.js and Angular with npm start. Open http://localhost:4200/models.

Hints

• The suggestion can be simple if-statements: hard tasks (reasoning, coding) with low volume suggest a larger model; simple tasks with high volume or a need for speed suggest a smaller model; everything else suggests a middle model.
• Use a signal for the health result, and show three states: checking, running, and cannot reach the server.
• If Angular cannot reach the server, check that both programs are running and that proxy.conf.json is used by npm start.

You know it works when the Models page shows "Server is running" with your model name, the suggestion text changes when you change the selectors, and the page shows a clear message if you stop the server.

Try the task on your own first. Even if you get stuck, the effort teaches you much more than copying. When you are ready, compare with the solution below.

Solution

The solution zip contains the complete project after lesson 1: the Angular config files, the styles, the server skeleton and the Models page. After you unzip it, run npm install, copy .env.example to .env, then start the server and Angular as described in the README inside the zip. Here are the two most important files.

server/routes/health.js (the API route):

import { Router } from 'express';
import { MODEL, hasKey } from '../claude.js';

const router = Router();

// GET /api/health  ->  tells the Angular app that the server is alive
router.get('/health', (req, res) => {
  res.json({ ok: true, model: MODEL, keyConfigured: hasKey() });
});

export default router;

src/app/pages/models.ts (the Angular page):

import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

type Health = { ok: boolean; model: string; keyConfigured: boolean };

@Component({
  selector: 'app-models',
  imports: [FormsModule],
  template: `
    <h1>Choose a model</h1>
    <p class="hint">Tell us about your task. We suggest where to start. Always confirm with your own test cases.</p>

    <div class="card">
      <label>What is the task?</label>
      <select [(ngModel)]="task">
        <option value="classify">Sort items into labels (classification)</option>
        <option value="extract">Pull data out of text (extraction)</option>
        <option value="summary">Summarise text</option>
        <option value="reasoning">Hard multi-step thinking</option>
        <option value="coding">Write or fix code</option>
      </select>

      <label>How many requests per day?</label>
      <select [(ngModel)]="volume">
        <option value="low">A few hundred or fewer</option>
        <option value="high">Thousands or more</option>
      </select>

      <label><input type="checkbox" [(ngModel)]="needFast" style="width:auto" /> Users are waiting, so speed matters</label>
    </div>

    <div class="card">
      <h2>Suggestion: {{ suggestion().tier }}</h2>
      <p>{{ suggestion().why }}</p>
    </div>

    <div class="card">
      <h2>Server status</h2>
      @if (health(); as h) {
        <p class="ok">Server is running. Model from .env: <strong>{{ h.model }}</strong></p>
        <p [class]="h.keyConfigured ? 'ok' : 'bad'">{{ h.keyConfigured ? 'API key found.' : 'No API key yet. Add ANTHROPIC_API_KEY to .env.' }}</p>
      } @else if (offline()) {
        <p class="bad">Cannot reach the server. Run <code>npm run server</code> in another terminal.</p>
      } @else {
        <p class="muted">Checking...</p>
      }
    </div>
  `,
})
export class ModelsPage {
  private http = inject(HttpClient);

  task = 'classify';
  volume = 'low';
  needFast = false;

  health = signal<Health | null>(null);
  offline = signal(false);

  constructor() {
    firstValueFrom(this.http.get<Health>('/api/health'))
      .then((h) => this.health.set(h))
      .catch(() => this.offline.set(true));
  }

  suggestion() {
    const hard = this.task === 'reasoning' || this.task === 'coding';
    if (hard && !this.needFast) {
      return { tier: 'Start with a larger, more capable model', why: 'Hard tasks fail more often on small models. Start big, then check whether a smaller one is good enough on your test cases.' };
    }
    if (!hard && (this.volume === 'high' || this.needFast)) {
      return { tier: 'Start with a smaller, faster model', why: 'Simple, repeated tasks do not need the biggest model. A smaller one is cheaper and replies faster. Test your own examples to confirm.' };
    }
    return { tier: 'Start with a mid-size model', why: 'A middle option is a safe first choice. Measure quality, speed and cost, then move up or down.' };
  }
}

Download the lesson 1 solution (zip)

What you learned

• Claude is a family of models from Anthropic. You use it in an app through the Claude API.
• The API is billed by usage, separate from Claude.ai plans.
• Choose a model by testing your own examples, from small to large.
• The key stays on the server. Angular talks to your server, and your server talks to Claude.

In the next lesson you will create an API key, store it safely, and send your first real message to Claude from the AI Lab.