Angular 122 🅰️ Angular and AI Integrations

Angular applications integrate with AI systems in three fundamentally different ways: by calling server-side AI services through HTTP, by consuming streaming chat protocols like SSE or WebSockets, and by running machine learning models directly in the browser using Web Workers and ONNX Runtime. Each approach has a different architecture, a different set of trade-offs, and a different set of pitfalls. The choice depends on where the inference runs, how sensitive the data is, and how much latency the user will tolerate.

The most common pattern is the server-mediated boundary. The Angular application never holds the AI provider’s API key; it calls a backend endpoint that holds the key, applies rate limiting, and returns the response. This protects the credential, enables cost monitoring, and allows switching between providers without client-side changes . The Angular side is then a service that wraps HttpClient, and the streaming case uses Server-Sent Events or the Fetch API’s ReadableStream to display tokens as they arrive.

The second pattern is browser-based inference. When the model is small enough and the data cannot leave the device, ONNX Runtime Web or WebDNN runs the model in a Web Worker, and the Angular component communicates with the worker through postMessage . This keeps the main thread responsive, works offline, and scales without backend infrastructure.

This chapter covers the server-mediated HTTP pattern, the streaming SSE pattern, browser-based inference with Web Workers, the Angular services and signals that wrap each, and the security and performance patterns that make AI integrations production-ready.

Key point: Never put AI provider API keys in the Angular client. Route AI calls through a backend proxy that holds the key, applies rate limiting, and returns the response. For streaming, use SSE or the Fetch API’s ReadableStream and push partial text into an Angular signal. For local inference, run the model in a Web Worker and expose the results as signals. Each pattern has a different latency profile, cost model, and security boundary.

---

Why AI integration needs a specific architecture

The API key problem. AI providers like OpenAI, Anthropic, and Google issue API keys that grant access to paid models. A key embedded in Angular code is visible in the browser’s developer tools, in the network tab, and in the bundle. Anyone who loads the application can extract the key and use it at the application owner’s expense. The backend proxy is the boundary that prevents this .

The streaming problem. AI models generate tokens one at a time, and the user experience depends on displaying those tokens as they arrive. A standard HTTP request-response cycle waits for the entire completion before returning anything. Server-Sent Events (SSE) and the Fetch API’s ReadableStream allow the Angular application to process chunks as they arrive, which produces the “AI typing” experience .

The state problem. A chat interface has multiple states: idle, loading, streaming, error, complete. Each state needs a different UI treatment. A service that pushes a discriminated state object into an Angular signal, and lets the component render from that signal, keeps the transitions explicit and the UI reactive .

The local inference problem. Some AI features — text classification, image processing, small language models — can run entirely in the browser. This eliminates API latency, keeps user data on the device, and works offline. The challenge is performance: inference on the main thread blocks the UI, so it must run in a Web Worker .

The non-deterministic output problem. AI models can return unexpected shapes. A structured response might be missing a field, have a field with the wrong type, or be valid JSON that does not match the expected interface. The Angular service must treat the response as untrusted and validate it with a runtime type guard before the component sees it .

---

a. Server-mediated HTTP integration

The recommended architecture for any AI feature that uses a hosted model is a backend proxy. The Angular service calls the proxy, and the proxy calls the provider. The Angular code never sees the API key.

The backend exposes an endpoint that accepts the prompt and returns the completion:

// server endpoint (Node.js/Express)
app.post('/api/ai/chat', async (req, res, next) => {
  try {
    const { messages } = req.body;
    const completion = await ai.generate(messages);
    res.json({ text: completion.text });
  } catch (err) {
    next(err);
  }
});

The Angular side is a service that wraps HttpClient:

// ai.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface ChatResponse {
  text: string;
}

@Injectable({ providedIn: 'root' })
export class AiService {
  private readonly http = inject(HttpClient);

  chat(messages: { role: string; content: string }[]): Observable<ChatResponse> {
    return this.http.post<ChatResponse>('/api/ai/chat', { messages });
  }
}

The component subscribes to the observable and renders the result. The service is injectable, testable, and the API key stays on the server .

For local development, the Angular dev server’s proxy configuration forwards /api/* requests to the backend, which avoids CORS issues during development :

// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

The production deployment requires the backend to set appropriate CORS headers, because the proxy only works in development .

---

b. Streaming with SSE and Fetch

A chat interface that waits for the full response before displaying anything feels slow. Streaming displays tokens as they are generated, which is the expected experience for AI chat.

The backend exposes an SSE endpoint that writes chunks as the model produces them:

// SSE endpoint
app.post('/api/ai/stream', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const stream = await ai.generateStream(req.body.messages);

  for await (const chunk of stream) {
    res.write(`data: ${JSON.stringify({ text: chunk.text })}\n\n`);
  }

  res.write('data: [DONE]\n\n');
  res.end();
});

The Angular side uses the Fetch API with a ReadableStream to process chunks:

async streamChat(messages: Message[], onChunk: (text: string) => void): Promise<void> {
  const response = await fetch('/api/ai/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages }),
  });

  const reader = response.body?.getReader();
  if (!reader) return;

  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split('\n\n');
    buffer = lines.pop() ?? '';

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') return;
        const parsed = JSON.parse(data);
        onChunk(parsed.text);
      }
    }
  }
}

The component accumulates the chunks into a signal and renders the signal. Each chunk updates the signal, and Angular’s change detection re-renders the message with the partial text .

A library like @tanstack/ai-angular provides an injectChat function that wraps this pattern and exposes the state as signals:

import { injectChat } from '@tanstack/ai-angular';
import { fetchServerSentEvents } from '@tanstack/ai-client';

@Component({
  selector: 'app-chat',
  template: `
    <ul>
      @for (message of chat.messages(); track message.id) {
        <li>{{ message.role }}: {{ message.content }}</li>
      }
    </ul>
    @if (chat.isLoading()) { <p>Thinking...</p> }
  `,
})
export class ChatComponent {
  chat = injectChat({
    connection: fetchServerSentEvents('/api/chat'),
  });
}

The library manages the SSE connection, accumulates messages, and exposes messages(), isLoading(), error(), and status() as signals .

---

c. State management with signals

An AI chat interface has multiple states, and each needs a different UI. A discriminated state object pushed into a signal keeps the transitions explicit .

type AiState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'streaming'; text: string }
  | { status: 'complete'; text: string }
  | { status: 'error'; error: string; partial: string };

The service holds a signal<AiState> and updates it as the request progresses:

@Injectable({ providedIn: 'root' })
export class AiService {
  private readonly state = signal<AiState>({ status: 'idle' });
  readonly state$ = this.state.asReadonly();

  async send(prompt: string): Promise<void> {
    this.state.set({ status: 'loading' });
    let accumulated = '';

    try {
      await this.streamChat([...], (chunk) => {
        accumulated += chunk;
        this.state.set({ status: 'streaming', text: accumulated });
      });
      this.state.set({ status: 'complete', text: accumulated });
    } catch (err) {
      this.state.set({
        status: 'error',
        error: String(err),
        partial: accumulated,
      });
    }
  }
}

The error state preserves the partial text, because a half-streamed response is still useful to the user . The component renders the signal and shows the appropriate UI for each state.

---

d. Local inference with Web Workers

When the model can run in the browser, the inference happens in a Web Worker, and the Angular component communicates with it through postMessage. The worker loads the model and runs inference; the main thread stays responsive .

The worker file loads the model and handles inference:

// ml.worker.ts
/// <reference lib="webworker" />
import * as ort from 'onnxruntime-web';

let session: ort.InferenceSession | null = null;

addEventListener('message', async ({ data }) => {
  const { type, payload } = data;

  switch (type) {
    case 'LOAD_MODEL':
      session = await ort.InferenceSession.create(payload.modelUrl);
      postMessage({ type: 'MODEL_LOADED' });
      break;

    case 'INFER':
      if (!session) return;
      const input = new ort.Tensor('float32', payload.input, payload.shape);
      const output = await session.run({ input });
      postMessage({ type: 'RESULT', output: output.output.data });
      break;
  }
});

The Angular service creates the worker and exposes the results as signals :

@Injectable({ providedIn: 'root' })
export class MlOrchestratorService {
  private readonly worker = new Worker(
    new URL('../workers/ml.worker', import.meta.url),
    { type: 'module' }
  );

  readonly modelLoaded = signal(false);
  readonly result = signal<Float32Array | null>(null);
  readonly loading = signal(false);

  constructor() {
    this.worker.onmessage = ({ data }) => {
      switch (data.type) {
        case 'MODEL_LOADED':
          this.modelLoaded.set(true);
          break;
        case 'RESULT':
          this.loading.set(false);
          this.result.set(data.output);
          break;
      }
    };
  }

  loadModel(url: string): void {
    this.worker.postMessage({ type: 'LOAD_MODEL', payload: { modelUrl: url } });
  }

  infer(input: Float32Array, shape: number[]): void {
    this.loading.set(true);
    this.worker.postMessage({ type: 'INFER', payload: { input, shape } });
  }
}

The component injects the service, triggers inference, and renders the result signal. The worker runs the model on a background thread, so the UI never freezes .

---

Complete Example Session

// ============================================
// PART 1: AI SERVICE WITH HTTP
// ============================================
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AiService {
  private readonly http = inject(HttpClient);

  chat(messages: { role: string; content: string }[]): Observable<{ text: string }> {
    return this.http.post<{ text: string }>('/api/ai/chat', { messages });
  }
}

// ============================================
// PART 2: PROXY CONFIGURATION
// ============================================
// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

// ============================================
// PART 3: STREAMING WITH FETCH
// ============================================
async streamChat(
  messages: Message[],
  onChunk: (text: string) => void
): Promise<void> {
  const response = await fetch('/api/ai/stream', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ messages }),
  });

  const reader = response.body?.getReader();
  if (!reader) return;

  const decoder = new TextDecoder();
  let buffer = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    buffer += decoder.decode(value, { stream: true });
    const lines = buffer.split('\n\n');
    buffer = lines.pop() ?? '';

    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') return;
        const parsed = JSON.parse(data);
        onChunk(parsed.text);
      }
    }
  }
}

// ============================================
// PART 4: STATE SIGNAL
// ============================================
type AiState =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'streaming'; text: string }
  | { status: 'complete'; text: string }
  | { status: 'error'; error: string; partial: string };

private readonly state = signal<AiState>({ status: 'idle' });
readonly state$ = this.state.asReadonly();

// ============================================
// PART 5: CHAT COMPONENT WITH SIGNALS
// ============================================
@Component({
  selector: 'app-chat',
  template: `
    @if (ai.state$().status === 'streaming') {
      <p>{{ ai.state$().text }}</p>
    }
    @if (ai.state$().status === 'error') {
      <p>Error: {{ ai.state$().error }}</p>
      <p>Partial: {{ ai.state$().partial }}</p>
    }
  `,
})
export class ChatComponent {
  readonly ai = inject(AiService);
}

// ============================================
// PART 6: ML ORCHESTRATOR SERVICE
// ============================================
@Injectable({ providedIn: 'root' })
export class MlOrchestratorService {
  private readonly worker = new Worker(
    new URL('../workers/ml.worker', import.meta.url),
    { type: 'module' }
  );

  readonly modelLoaded = signal(false);
  readonly result = signal<Float32Array | null>(null);
  readonly loading = signal(false);

  constructor() {
    this.worker.onmessage = ({ data }) => {
      if (data.type === 'MODEL_LOADED') this.modelLoaded.set(true);
      if (data.type === 'RESULT') {
        this.loading.set(false);
        this.result.set(data.output);
      }
    };
  }

  loadModel(url: string): void {
    this.worker.postMessage({ type: 'LOAD_MODEL', payload: { modelUrl: url } });
  }

  infer(input: Float32Array, shape: number[]): void {
    this.loading.set(true);
    this.worker.postMessage({ type: 'INFER', payload: { input, shape } });
  }
}

// ============================================
// PART 7: ML WORKER
// ============================================
/// <reference lib="webworker" />
import * as ort from 'onnxruntime-web';

let session: ort.InferenceSession | null = null;

addEventListener('message', async ({ data }) => {
  const { type, payload } = data;

  if (type === 'LOAD_MODEL') {
    session = await ort.InferenceSession.create(payload.modelUrl);
    postMessage({ type: 'MODEL_LOADED' });
  }

  if (type === 'INFER' && session) {
    const input = new ort.Tensor('float32', payload.input, payload.shape);
    const output = await session.run({ input });
    postMessage({ type: 'RESULT', output: output.output.data });
  }
});

// ============================================
// PART 8: AI COMPONENT WITH LOCAL INFERENCE
// ============================================
@Component({
  selector: 'app-ai-widget',
  template: `
    <button (click)="analyze()" [disabled]="ml.loading()">
      Analyze
    </button>
    @if (ml.result()) {
      <p>Result: {{ ml.result() }}</p>
    }
  `,
})
export class AiWidgetComponent {
  readonly ml = inject(MlOrchestratorService);

  analyze(): void {
    const input = new Float32Array([1, 2, 3]);
    this.ml.infer(input, [1, 3]);
  }
}

// ============================================
// PART 9: TYPE GUARD FOR AI RESPONSE
// ============================================
interface StructuredResponse {
  summary: string;
  tags: string[];
  confidence: number;
}

function isStructuredResponse(value: unknown): value is StructuredResponse {
  if (typeof value !== 'object' || value === null) return false;
  const obj = value as Record<string, unknown>;

  return (
    typeof obj['summary'] === 'string' &&
    Array.isArray(obj['tags']) &&
    obj['tags'].every((t) => typeof t === 'string') &&
    typeof obj['confidence'] === 'number'
  );
}

// ============================================
// PART 10: BACKEND PROXY (NODE.JS)
// ============================================
app.post('/api/ai/chat', async (req, res, next) => {
  try {
    const { messages } = req.body;
    const completion = await ai.generate(messages);
    res.json({ text: completion.text });
  } catch (err) {
    next(err);
  }
});

These ten parts cover the AI service with HTTP, proxy configuration, streaming with Fetch, the state signal, the chat component, the ML orchestrator service, the ML worker, the AI component with local inference, the type guard, and the backend proxy.

---

Quick Reference

Integration Patterns

Pattern	Where inference runs	Key benefit	Key trade-off
Server-mediated HTTP	Backend	Key protection	Round-trip latency
Streaming SSE	Backend	Token-by-token display	Connection management
Local inference	Browser	Data stays on device	Model size limit

Server-Mediated HTTP

Component	Responsibility
Backend proxy	Holds API key, rate limits, logs
Angular service	Wraps HttpClient, returns observable
Component	Subscribes, renders result

Streaming

Technique	When to use
SSE	Server pushes text chunks
Fetch ReadableStream	Client reads chunks
injectChat	Pre-built streaming chat

Local Inference

Component	Responsibility
Web Worker	Loads model, runs inference
ML Orchestrator	Manages worker, exposes signals
Component	Triggers inference, renders signals

Security Rules

Rule	Reason
Never put API keys in Angular	Visible in browser
Route through backend proxy	Protects key, enables control
Validate AI responses	Non-deterministic output
Preserve partial output on error	Half-streamed text is useful

---

Best Practices

✅ Do This:

// Route through backend proxy
this.http.post('/api/ai/chat', { messages });

// Use signals for streaming state
private readonly state = signal<AiState>({ status: 'idle' });

// Validate structured responses
if (!isStructuredResponse(data)) throw new Error('invalid');

// Run local inference in a Web Worker
const worker = new Worker(new URL('./ml.worker', import.meta.url));

// Preserve partial output on error
this.state.set({ status: 'error', error, partial: accumulated });

❌ Don’t Do This:

// Put the API key in the Angular app
const apiKey = 'sk-...';  // ❌ visible in browser

// Call the provider directly from Angular
this.http.post('https://api.openai.com/v1/chat', { ... });  // ❌ exposes key

// Trust the AI response shape
const response = await res.json() as StructuredResponse;  // ❌ no validation

// Run inference on the main thread
const output = await model.run(input);  // ❌ blocks UI

// Discard partial output on error
this.state.set({ status: 'error', error });  // ❌ loses accumulated text

---

Common Pitfalls

Pitfall	Why It Happens	Fix
API key exposed	Called provider directly	Route through backend
CORS error in dev	No proxy configured	Add proxy.conf.json
UI freezes during inference	Ran on main thread	Use Web Worker
Wrong response shape	Trusted AI output	Add runtime type guard
Lost partial output	Error replaced state	Preserve partial in error state
Cold start latency	Serverless function idle	Accept or use provisioned concurrency
SSE connection dropped	Network instability	Reconnect with backoff

---

Real-World Examples

1. Backend Proxy

app.post('/api/ai/chat', async (req, res) => {
  const completion = await ai.generate(req.body.messages);
  res.json({ text: completion.text });
});

2. Angular AI Service

chat(messages: Message[]): Observable<{ text: string }> {
  return this.http.post<{ text: string }>('/api/ai/chat', { messages });
}

3. SSE Streaming

res.setHeader('Content-Type', 'text/event-stream');
res.write(`data: ${JSON.stringify({ text: chunk })}\n\n`);

4. Fetch Stream Reader

const reader = response.body?.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  // process value
}

5. State Signal

private readonly state = signal<AiState>({ status: 'idle' });
readonly state$ = this.state.asReadonly();

6. ML Worker

addEventListener('message', async ({ data }) => {
  const output = await session.run({ input });
  postMessage({ type: 'RESULT', output });
});

7. ML Orchestrator

readonly result = signal<Float32Array | null>(null);
this.worker.onmessage = ({ data }) => this.result.set(data.output);

8. Type Guard

function isResponse(v: unknown): v is Response {
  return typeof v === 'object' && v !== null && 'text' in v;
}

9. Proxy Configuration

{ "/api": { "target": "http://localhost:3000", "changeOrigin": true } }

10. Preserve Partial Output

this.state.set({ status: 'error', error, partial: accumulated });

---

Visual

Server-Mediated Boundary

┌──────────────────────────────────────────────────────────────┐
│  ANGULAR CLIENT              BACKEND PROXY          PROVIDER │
│  ┌─────────────┐            ┌─────────────┐       ┌────────┐ │
│  │  AiService  │──HTTP─────▶│  /api/ai    │──API─▶│ OpenAI │ │
│  │  (no key)   │            │  (has key)  │       │ Claude │ │
│  └─────────────┘            └─────────────┘       │ Gemini │ │
│                                                     └────────┘ │
│  The API key never reaches the browser.                      │
└──────────────────────────────────────────────────────────────┘

Streaming Flow

┌──────────────────────────────────────────────────────────────┐
│  Backend generates tokens                                     │
│       │                                                      │
│       ▼  SSE: data: {"text": "Hello"}                        │
│       ▼  SSE: data: {"text": " world"}                       │
│       ▼  SSE: data: {"text": "!"}                            │
│       ▼  SSE: data: [DONE]                                   │
│                                                              │
│  Angular reads chunks via ReadableStream                     │
│       │                                                      │
│       ▼  onChunk("Hello") → signal.set("Hello")              │
│       ▼  onChunk(" world") → signal.set("Hello world")       │
│       ▼  onChunk("!") → signal.set("Hello world!")           │
│                                                              │
│  UI renders the signal as it updates.                        │
└──────────────────────────────────────────────────────────────┘

Local Inference Architecture

┌──────────────────────────────────────────────────────────────┐
│  ANGULAR COMPONENT                                           │
│       │                                                      │
│       ▼                                                      │
│  ML ORCHESTRATOR SERVICE                                     │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  worker.postMessage({ type: 'INFER', payload })        │  │
│  │  readonly result = signal<Float32Array | null>(null)   │  │
│  └────────────────────────┬───────────────────────────────┘  │
│                           │                                   │
│                           ▼                                   │
│  WEB WORKER                                                  │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  ONNX Runtime Web                                      │  │
│  │  Loads model, runs inference on background thread      │  │
│  └────────────────────────┬───────────────────────────────┘  │
│                           │                                   │
│                           ▼                                   │
│  postMessage({ type: 'RESULT', output })                     │
│                                                              │
│  Main thread stays responsive.                               │
└──────────────────────────────────────────────────────────────┘

State Transitions

┌──────────────────────────────────────────────────────────────┐
│  idle ──▶ loading ──▶ streaming ──▶ complete                 │
│                            │                                 │
│                            ▼                                 │
│                          error (partial preserved)            │
│                                                              │
│  Each state has a different UI treatment.                    │
│  The state object is pushed into a signal.                   │
└──────────────────────────────────────────────────────────────┘

---

Summary

Item	Value
Server-mediated HTTP	Angular calls backend, backend calls provider
API key location	Backend only, never in Angular
Streaming	SSE or Fetch ReadableStream
State management	Discriminated state signal
Local inference	ONNX Runtime Web in a Web Worker
Worker communication	postMessage and onmessage
Type validation	Runtime type guard for structured output
Error handling	Preserve partial output
Proxy configuration	proxy.conf.json for development
Production CORS	Backend must set headers

Key takeaways:

• Never put AI provider API keys in the Angular client. The key is visible in the browser and can be extracted. Route all AI calls through a backend proxy that holds the key, applies rate limiting, and enables provider switching .
• Streaming is the expected experience for AI chat. Use SSE or the Fetch API’s ReadableStream to display tokens as they arrive. The “AI typing” effect depends on partial rendering .
• A discriminated state signal keeps AI UI states explicit. The states are idle, loading, streaming, complete, and error. Each has a different UI treatment, and the error state preserves the partial output .
• Local inference runs in a Web Worker. ONNX Runtime Web loads the model and runs inference on a background thread, keeping the main thread responsive. The orchestrator service exposes the results as signals .
• AI output is non-deterministic and must be validated. A structured response can have missing fields, wrong types, or unexpected shapes. A runtime type guard catches these before the component sees them .
• The Angular dev proxy avoids CORS in development. The proxy.conf.json file forwards /api/* requests to the backend. In production, the backend must set CORS headers .
• Libraries like @tanstack/ai-angular and ngx-ai-kit provide pre-built streaming chat. They wrap the SSE connection, expose messages as signals, and handle tool calls and structured outputs .

Remember: Angular and AI integration is an architecture decision before it is a coding decision. The first question is where the inference runs: on a server, in the browser, or through a streaming connection. The server-mediated pattern protects the API key and is the default for hosted models. The streaming pattern produces the expected chat experience and uses SSE or Fetch streams. The local inference pattern keeps data on the device and uses Web Workers to avoid blocking the UI. Each pattern has a different security boundary, cost model, and latency profile. The Angular service wraps the chosen pattern, exposes the state as signals, and validates the AI output before the component renders it. The component stays simple: it reads the signal and renders the appropriate UI for the current state.

---

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!