DEDUPEDWho it is forA React developer building an AI agent chat screen who needs a visible 'agent is thinking' indicator while a response is pending.
The problemWriting a loading or thinking indicator for agent conversations from scratch takes time and is easy to leave out of the UI.
The outcomeThe chat UI shows the ThinkingState component from the free npm package while the agent is busy.
What you need first
- An existing React, Vue, or Svelte project
- npm and npx available in a terminal
- For Pro components only: an AICSS account and an AICSS_TOKEN from https://www.aicss.dev/account
Steps
- Run
npm install @aicss/reactin the project root. - Add
import { ThinkingState } from "@aicss/react/thinking-state";to the chat component file. - Render <ThinkingState /> in the chat view where the pending agent reply appears.
- Start the app and trigger an agent request to confirm the indicator shows and hides.
Prompt for your agent
In the repo kvnkld/aicss, install @aicss/react in the project at <project-path> and add the ThinkingState component from @aicss/react/thinking-state to the chat view at <chat-component-path>. Return the changed file and confirm the component renders while a pending agent reply is displayed.
Caveat. The README names only the thinking-state component; check the package docs at Aicss.dev for other components and their props before building on them.
Use this in your AI agent
Ask your agent
Using the Deduped MCP, get the setup steps for kvnkld/aicss and "Show an agent thinking state in a React chat app"
Add Deduped to Claude Code once
claude mcp add --transport http deduped https://dedupedai.com/mcp
Every Monday: the 5 hottest repos and exactly how to use them. Free, one email a week, unsubscribe anytime.
Get them freeShare: X LinkedIn Hacker News Email Copy link
Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer