AI Chat
AI chat is the surface an assistant answers through: a thread of questions and replies, a composer to ask in, and the states in between that say the assistant is working. Orvain's AI Chat family holds three blocks: a thread whose reply streams in with numbered sources, a prompt library opened on the composer, and a toolbar that rewrites a selection of text.
What separates a chat people trust from one they second-guess is mostly in the in-between states. A thinking line that names what is being searched, a reply that arrives word by word with a way to stop it, sources numbered against the sentences that use them, and a rewrite shown beside the original before it replaces anything. Each block here carries those states, and drops the animation when a reader asks for reduced motion.
Assistant thread
Best for
An assistant panel that answers from your own content
Anatomy
Header with the AI mark · thinking state with a shimmer · a reply that streams word by word · numbered citations and source cards · copy, regenerate and rating · a composer whose send turns into stop
Orvain assistantAnswers from your docs and blocks
Answers can be wrong. Check the sources before you ship.
Prompt library
Best for
Saved prompts a team reuses, one click from the composer
Anatomy
Panel opened on the composer · search as you type · prompts grouped by category · arrow keys and Enter · the pick lands in the box ready to edit · Escape returns focus
↑ ↓ to moveEnter to useEsc to close
Pick a prompt and it lands in the box, ready to edit before you send it.
Rewrite selection
Best for
Writing help on text someone has already written
Anatomy
Toolbar over the selection · improve, shorten, translate · a shimmer while it works · the result shown before anything is replaced · replace, try again or discard · restore the original
Draft · About page
Ask AI
Our design system have lots of components that teams can use for building there product faster, and it make sure everything look the same across all of the different apps we are making.
01
Using AI Chat
Reach for it when
- An assistant that answers from your own content, where showing the sources is what makes an answer usable.
- A team that reuses the same handful of prompts and should not have to retype them.
- Writing help on text someone has already written, where they want to see the change before accepting it.
Reach for something else when
- A fixed set of questions with fixed answers. An FAQ in the Accordion family is faster to read and cannot be wrong.
- Search over records. A command menu or a filtered list returns the records themselves rather than a paragraph about them.
- One-shot generation with no follow-up, such as a summary on a page. Show the result in a card with a regenerate action rather than opening a thread.
02
Where it shows up
01
Docs assistant
A panel beside the documentation that answers questions from it. Each reply cites the pages it used as numbered cards under the answer, so a reader can check the claim before they rely on it, and rate the reply when it misses.
02
Editor copilot
A toolbar that appears over selected text in a document, offering to improve, shorten or translate it. The rewrite appears under the original with Replace, Try again and Discard, so nothing a person wrote is lost to a click they did not mean.
03
Questions
Why does the reply stream in rather than appear all at once?
A reply can take several seconds to generate, and streaming turns that wait into visible progress: the reader can start reading after the first words and stop the reply if it is going the wrong way. The block marks the message as busy while it streams, so a screen reader announces the reply once it is complete rather than word by word, and it shows the whole reply at once for readers who prefer reduced motion.
How should an AI reply show where its answer came from?
Number the sources and put the numbers in the sentences that rely on them, then list the sources as cards under the reply with a title and where they live. A list of links at the end with no numbers in the text tells a reader that sources exist but not which claim each one supports, which is the question they actually have.
The Orvain DispatchPremium components,
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
Orvain MCPAI Chat
AI chat is the surface an assistant answers through: a thread of questions and replies, a composer to ask in, and the states in between that say the assistant is working. Orvain's AI Chat family holds three blocks: a thread whose reply streams in with numbered sources, a prompt library opened on the composer, and a toolbar that rewrites a selection of text.
What separates a chat people trust from one they second-guess is mostly in the in-between states. A thinking line that names what is being searched, a reply that arrives word by word with a way to stop it, sources numbered against the sentences that use them, and a rewrite shown beside the original before it replaces anything. Each block here carries those states, and drops the animation when a reader asks for reduced motion.
Assistant thread
Best for
An assistant panel that answers from your own content
Anatomy
Header with the AI mark · thinking state with a shimmer · a reply that streams word by word · numbered citations and source cards · copy, regenerate and rating · a composer whose send turns into stop
Orvain assistantAnswers from your docs and blocks
Answers can be wrong. Check the sources before you ship.
Prompt library
Best for
Saved prompts a team reuses, one click from the composer
Anatomy
Panel opened on the composer · search as you type · prompts grouped by category · arrow keys and Enter · the pick lands in the box ready to edit · Escape returns focus
↑ ↓ to moveEnter to useEsc to close
Pick a prompt and it lands in the box, ready to edit before you send it.
Rewrite selection
Best for
Writing help on text someone has already written
Anatomy
Toolbar over the selection · improve, shorten, translate · a shimmer while it works · the result shown before anything is replaced · replace, try again or discard · restore the original
Draft · About page
Ask AI
Our design system have lots of components that teams can use for building there product faster, and it make sure everything look the same across all of the different apps we are making.
01
Using AI Chat
Reach for it when
- An assistant that answers from your own content, where showing the sources is what makes an answer usable.
- A team that reuses the same handful of prompts and should not have to retype them.
- Writing help on text someone has already written, where they want to see the change before accepting it.
Reach for something else when
- A fixed set of questions with fixed answers. An FAQ in the Accordion family is faster to read and cannot be wrong.
- Search over records. A command menu or a filtered list returns the records themselves rather than a paragraph about them.
- One-shot generation with no follow-up, such as a summary on a page. Show the result in a card with a regenerate action rather than opening a thread.
02
Where it shows up
01
Docs assistant
A panel beside the documentation that answers questions from it. Each reply cites the pages it used as numbered cards under the answer, so a reader can check the claim before they rely on it, and rate the reply when it misses.
02
Editor copilot
A toolbar that appears over selected text in a document, offering to improve, shorten or translate it. The rewrite appears under the original with Replace, Try again and Discard, so nothing a person wrote is lost to a click they did not mean.
03
Questions
Why does the reply stream in rather than appear all at once?
A reply can take several seconds to generate, and streaming turns that wait into visible progress: the reader can start reading after the first words and stop the reply if it is going the wrong way. The block marks the message as busy while it streams, so a screen reader announces the reply once it is complete rather than word by word, and it shows the whole reply at once for readers who prefer reduced motion.
How should an AI reply show where its answer came from?
Number the sources and put the numbers in the sentences that rely on them, then list the sources as cards under the reply with a title and where they live. A list of links at the end with no numbers in the text tells a reader that sources exist but not which claim each one supports, which is the question they actually have.
Related blocks
All blocksThe Orvain Dispatch
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
