Copyleaks Web Report for Angular

The drop-in plagiarism & AI-detection report your users will love.

Quick Start · What's Inside · API · Customization · Real-Time · Docs ↗ · Help Center ↗

✨ Why Copyleaks Web Report?

Stop building a plagiarism/AI report UI from scratch. @copyleaks/ng-web-report is a battle-tested Angular module that drops into your app and renders a complete, polished, accessible report — backed by the same engine that powers copyleaks.com.

Wire up three endpoints. Drop in one component. Ship.

<copyleaks-web-report [reportEndpointConfig]="endpointConfig"></copyleaks-web-report>

That's it. Everything below is for when you want to go further.

🚀 Quick Start

1. Install

npm install @copyleaks/ng-web-report --save

📦 Pick the right version for your Angular: Angular 19 → ^2.0.0 · Angular 13 → ^1.9.99 · full version matrix ↓

🔑 Don't have API keys yet? Grab them from the Copyleaks API docs.

2. Import the module

import { CopyleaksWebReportModule } from '@copyleaks/ng-web-report';

@NgModule({
	imports: [CopyleaksWebReportModule /* …your other imports */],
})
export class AppModule {}

3. Render the component

<copyleaks-web-report
	[reportEndpointConfig]="endpointConfig"
	(onReportRequestError)="handleError($event)"
	(onCompleteResultUpdate)="handleUpdate($event)"></copyleaks-web-report>

endpointConfig: IClsReportEndpointConfigModel = {
	crawledVersion: {
		url: 'https://api.yoursite.com/scans/{SCAN_ID}/crawled-version',
		headers: { Authorization: 'Bearer …' },
	},
	completeResults: {
        url: 'https://api.yoursite.com/scans/{SCAN_ID}/results',
        headers: { Authorization: 'Bearer …' }
  },
	result: {
		url: 'https://api.yoursite.com/scans/{SCAN_ID}/results/{RESULT_ID}',
		headers: { Authorization: 'Bearer …' },
	},
};

Done. You now have a full plagiarism + AI report in your app.

🌟 Features

📊 What's in the Report?

A complete, production-ready report UI — every piece below is rendered for you out of the box.

🔍 Plagiarism Detection

• One-to-Many view — source document side-by-side with a ranked list of matching results from across the web, your repository, and internal databases.
• One-to-One comparison — full side-by-side compare against a single suspect document with synchronized scrolling and match navigation.
• Match highlighting — color-coded identical / minor-changes / related-meaning matches, in both text and HTML views.
• Per-result drill-down — click any match to jump straight to the matching passage in the suspect, with character-level precision.
• Result filtering — filter by category, exclude self-matches, omit quotes/citations, and more.
• Locked & premium results — built-in support for paywalled / restricted matches with a fully customizable template.

🤖 AI Content Detection

• AI phrases highlighting — every AI-detected sentence is highlighted inline with a confidence indicator.
• AI Logic banner — explains why a passage was flagged (the "explainable AI" video / rationale).
• AI source matches — when an AI-generated passage matches a known source, it's surfaced as a dedicated match entry.
• AI-only layout — when plagiarism is disabled, the report cleanly renders an AI-focused view.
• AI disclaimer — built-in disclaimer block to set the right expectations with end users.

✍️ Writing Feedback & Assessment

• Corrections — grammar, spelling, and style corrections rendered inline with one-click accept/reject actions.
• Readability score — surfaces readability metrics alongside the content.
• Categories analysis panel — breakdown by category (grammar, spelling, mechanics, etc.) for assessment workflows.
• Assessment Tool score panel — dedicated scoring view for the Assessment Tool report mode.

📑 Content Viewer

• Text & HTML modes — switch between plain-text and rendered HTML, with the report intelligently disabling modes that aren't available.
• Pagination — page-level navigation for long documents (URL-preserved via sourcePage / suspectPage query params).
• RTL support — automatic right-to-left layout for Arabic, Hebrew, and other RTL languages.

⚡ Real-Time & Performance

• Real-time results streaming — push new matches into the live view via ReportRealtimeResultsService.pushNewResults().
• Section animations — newly arriving real-time results are gracefully animated into the list.
• Skeleton loaders — every async section has a polished loading state — no layout shift, no janky spinners.

🚨 Alerts & Errors

• Built-in alerts container — surfaces suspicious content, sensitive-data, and policy alerts with deep-linkable alertCodes.
• Typed error events — every failed API call comes back through a single onReportRequestError event with the request context attached.

🎛 Custom Slots

• <cr-actions> — your own action bar (download, share, custom workflows).
• <cr-custom-tabs> — extra tabs alongside the AI/Plagiarism tabs.
• <cr-custom-results> — append to or fully replace the results list.
• <cr-custom-empty-results> — branded empty state.
• [lockedResultTemplateRef] — fully custom locked-result template (great for upgrade prompts).

📱 Layouts & Responsiveness

• Desktop, tablet, and mobile variants for every layout — including a dedicated mobile AI-phrases header.
• Four layout types: OneToMany, OneToOne, OnlyAi, WritingFeedback.

💡 Want a deeper walkthrough of what each section means? See the Copyleaks Help Center.

🅰️ Angular Version Support

📚 API Reference

Inputs

Outputs

Query parameters the component reads & writes

The report keeps its state in the URL so deep links Just Work™.

🔧 Configuring Endpoints

📘 For the full request/response shape of each endpoint, see the Copyleaks API documentation.

IClsReportEndpointConfigModel

IEndpointDetails

Full example

import { IClsReportEndpointConfigModel } from '@copyleaks/ng-web-report';

const headers = {
	Authorization: 'Bearer your-auth-token',
	'Content-Type': 'application/json',
};

const reportEndpointConfig: IClsReportEndpointConfigModel = {
	crawledVersion: { url: 'https://api.yourservice.com/crawled-version', headers },
	completeResults: { url: 'https://api.yourservice.com/complete-results', headers },
	result: { url: 'https://api.yourservice.com/result/{RESULT_ID}', headers },
};

🛎 Event Handling

import { ICompleteResults, ReportHttpRequestErrorModel } from '@copyleaks/ng-web-report';

handleError(error: ReportHttpRequestErrorModel): void {
	// Surface a toast, retry, log to Sentry, etc.
}

handleUpdate(results: ICompleteResults): void {
	// React to new complete results or filter changes.
}

🎨 Customization

The report ships with sensible defaults and first-class extension points so you can inject your own UI without forking the library.

<copyleaks-web-report ...>
	<cr-actions>
		<button (click)="download()">Download PDF</button>
		<button (click)="share()">Share</button>
	</cr-actions>
</copyleaks-web-report>

<copyleaks-web-report ...>
	<cr-custom-tabs>
		<cr-custom-tab-item [flexGrow]="0.3">
			<cr-custom-tab-item-title>Insights</cr-custom-tab-item-title>
			<cr-custom-tab-item-content>
				<app-insights-panel></app-insights-panel>
			</cr-custom-tab-item-content>
		</cr-custom-tab-item>
	</cr-custom-tabs>
</copyleaks-web-report>

<copyleaks-web-report ...>
	<cr-custom-results [reportView]="reportView">
		<cr-custom-results-box-content>
			<app-my-results></app-my-results>
		</cr-custom-results-box-content>
	</cr-custom-results>
</copyleaks-web-report>

<copyleaks-web-report ...>
	<cr-custom-empty-results>
		<div class="empty">
			<h3>No matches found 🎉</h3>
			<p>This document looks original.</p>
		</div>
	</cr-custom-empty-results>
</copyleaks-web-report>

<ng-template #lockedResultTemplateRef let-result="result">
	<app-upgrade-card [result]="result"></app-upgrade-card>
</ng-template>

<copyleaks-web-report ... [lockedResultTemplateRef]="lockedResultTemplateRef"></copyleaks-web-report>

⚡ Real-Time Results

For incremental scans, push new results into the live view as they arrive.

ℹ️ Prerequisite: the real-time view is only enabled when you include the progress endpoint in your reportEndpointConfig.

import { ReportRealtimeResultsService, ResultPreview } from '@copyleaks/ng-web-report';

@Component({
	/* … */
})
export class YourComponent {
	constructor(private realtime: ReportRealtimeResultsService) {}

	onNewBatch(results: ResultPreview[]): void {
		this.realtime.pushNewResults(results);
	}
}

The component handles ordering, deduping, and rendering for you.

♿ Accessibility

Copyleaks Web Report is built with accessibility as a first-class concern — keyboard navigation, ARIA semantics, focus management, and high-contrast support are all baked in.

📄 Download the VPAT report (PDF) from the Copyleaks Commitment to Accessibility page.

💬 Resources & Support

📄 License

MIT © Copyleaks