Copilot · Community sample

CosmoPolite - multilingual story card

Ask in any language or dialect and get a story card in that language: labels, reading direction, fonts, photo credit and a read-aloud voice all follow the story, including right-to-left scripts.

Copilot componentTypeScriptSPFx 1.24.0

Inline CosmoPolite card in Microsoft 365 Copilot answering an Arabic question about Copilot UX components in SPFx, written and labelled in Arabic, right to left

The idea behind the sample

CosmoPolite is a Copilot UX Component, packaged with a declarative agent, that answers in the language you ask in. The agent detects the language of every message, dialects included, and the card shows a short story written in that language with a photo from open collections (Wikipedia, Wikimedia Commons, Openverse, The Met, NASA) and its credit.

Everything on the card follows the story's language: UI labels in 58 languages, lang and dir on every part and on the frame's html element, right-to-left layout for Arabic, Hebrew, Persian and Urdu, a Nastaliq font for Urdu, and read-aloud with a matching Web Speech voice and word highlighting.

Users can switch between five designs, three photo layouts and light or dark, open the card fullscreen, and translate the story, after which the agent continues and suggests follow-ups in the new language. The component uses no framework and no Microsoft Graph permissions.

Make it your own

Start with the author's setup instructions, explore the implementation, and adapt the pattern to your environment. Sample code stays in its original repository, together with its requirements, license and contribution history.

Read the source documentation

A closer look

A CosmoPolite card translated from German into Spanish on request, with Spanish labels and a Spanish voice

An English CosmoPolite card being read aloud: the current sentence is marked and the spoken word highlighted

Fullscreen CosmoPolite card in Japanese in the Magazine design, dark theme, with a large photo above the headline

A CosmoPolite card in Greek with Greek labels and a Greek read-aloud voice

Keep exploring

Build agents for Microsoft Copilot — Extend Microsoft Copilot with declarative agents, plugins, and connectors to tailor Copilot to your organization's needs.
Overview of the SharePoint Framework — The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development.
Web Speech API — Speech synthesis in the browser: voices, utterances and word boundary events used for read-aloud.
WCAG 2.2: Language of Page and Language of Parts — Why the lang attribute matters for screen readers and speech (success criteria 3.1.1 and 3.1.2).

Keep the ideas flowing

Back to all possibilities