Inclusivity Booster
inclusivity-booster
AI-powered content adaptation demo — the same news article, reshaped for every reader. Adapted by age, language, gender identity, reading level, and format. No content rewrite required.
The problem
Publishers write for one imagined reader and call it universal.
The same housing policy story lands completely differently for a 12-year-old, a recent immigrant reading in their second language, a senior unfamiliar with bureaucratic jargon, or a professional who wants the data without the framing. Most content systems have no mechanism to bridge this gap — the article ships as-is and excludes by default.
What it does
Inclusivity Booster takes real news articles and shows them adapted for diverse reader personas — side by side with the original.
- Filter by five dimensions — language, age group, reading level, gender identity, and format
- Side-by-side comparison — original article next to the adapted version
- Visible reasoning — each adaptation shows what changed and why (vocabulary, framing, tone, cultural references)
- Pre-generated via Claude API — adaptations ship with explicit inclusivity metadata so the reasoning is transparent
Adaptation dimensions
| Dimension | Options |
|---|---|
| Language | English, Ukrainian |
| Age group | Child · Teen · Young adult · Adult · Senior |
| Reading level | Simple · Standard · Expert |
| Gender identity | Woman · Man · Non-binary · Genderfluid |
| Format | Article · LinkedIn · Social media · Newsletter |
Quick start
npm install
npm run dev
Open http://localhost:5173, pick a persona using the filter bar, and compare the adapted article to the original.
How it works
- Persona selection — the filter bar builds a persona from five independent dimensions
- Side-by-side view — the ArticlePane renders the original alongside the adapted version
- Dimension breakdown — the DimensionBreakdown section explains each editorial change
- Evidence strip — sources and citations are preserved across all adaptations
Adaptation content is pre-generated using the Claude API with structured prompts that produce explicit inclusivity metadata alongside the rewritten text. The app is a viewer — the AI inference already happened; the data lives in the src/data/ JSON files.
Stack
- Svelte 5 + Vite — reactive UI with runes-based state
- Tailwind CSS v4 — utility-first styling
- Anthropic Claude API — powers content adaptation (pre-generated)
- GitHub Pages — zero-config deployment via GitHub Actions
Use cases
| Who | How they use it |
|---|---|
| Content strategists | Visualize how the same story lands across different demographics |
| Educators | Demonstrate inclusive writing principles with a live example |
| Journalists | Test whether a piece reaches beyond its default audience |
| Developers | Reference implementation for AI-powered content adaptation pipelines |
Project structure
src/
├── components/ # Reusable UI: PersonaCard, EvidenceCard, StatBadge, …
├── sections/ # Layout sections: HeroQuote, FilterBar, ArticlePane, …
├── data/ # Pre-generated adaptations (JSON) + sources
└── lib/
└── state.svelte.js # Central reactive state (persona selection, filters)
Related projects
- accessibility-booster — AI-powered accessibility layer for any webpage. Six toggles, WCAG AAA contrast, Claude Vision, plain language, captions. Zero redesign.
License
