# AI use cases for Aicss (kvnkld/aicss)
Repo: [kvnkld/aicss](https://github.com/kvnkld/aicss) | Use cases: 4 | Page: https://dedupedai.com/use-cases/kvnkld-aicss/
AICSS is an MIT-licensed set of React UI components for AI agent conversations, plus a CLI that adds them to projects.
This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.
- Show an agent thinking state in a React chat app: https://dedupedai.com/use-cases/kvnkld-aicss/add-thinking-state-to-react-agent-chat/
- Copy the thinking-state component into a shadcn project: https://dedupedai.com/use-cases/kvnkld-aicss/copy-thinking-state-with-shadcn/
- Add the thinking-state component to a Vue or Svelte app: https://dedupedai.com/use-cases/kvnkld-aicss/add-thinking-state-to-vue-or-svelte/
- Add Pro thinking-state components with the CLI token: https://dedupedai.com/use-cases/kvnkld-aicss/add-pro-components-with-aicss-token/
## How to show an agent thinking state in a React chat app with Aicss
Repo: [kvnkld/aicss](https://github.com/kvnkld/aicss) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README
Install @aicss/react and render the ThinkingState component while an AI agent works.
**Who it is for:** A React developer building an AI agent chat screen who needs a visible 'agent is thinking' indicator while a response is pending.
**The problem:** Writing a loading or thinking indicator for agent conversations from scratch takes time and is easy to leave out of the UI.
**The outcome:** The chat UI shows the ThinkingState component from the free npm package while the agent is busy.
### Steps
1. Run `npm install @aicss/react` in the project root.
2. Add `import { ThinkingState } from "@aicss/react/thinking-state";` to the chat component file.
3. Render in the chat view where the pending agent reply appears.
4. Start the app and trigger an agent request to confirm the indicator shows and hides.
### Prompt to paste into your agent
```text
In the repo kvnkld/aicss, install @aicss/react in the project at and add the ThinkingState component from @aicss/react/thinking-state to the chat view at . 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.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/kvnkld-aicss/add-thinking-state-to-react-agent-chat/
## How to copy the thinking-state component into a shadcn project with Aicss
Repo: [kvnkld/aicss](https://github.com/kvnkld/aicss) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README
Add the thinking-state component source to a shadcn project with one npx command.
**Who it is for:** A developer using shadcn in a React app who wants the AICSS thinking-state component as local source code they can edit.
**The problem:** Pulling in a UI component as an npm dependency can hide the code, while the team wants to own and change the component directly.
**The outcome:** The thinking-state component files are added to the shadcn project so the team can edit them in their own codebase.
### Steps
1. Open a terminal in the root of the shadcn project.
2. Run `npx shadcn@latest add https://www.aicss.dev/r/thinking-state.json`.
3. Find the added thinking-state files in the project and open them.
4. Import the component in the chat view and render it where agent replies are pending.
### Prompt to paste into your agent
```text
In the repo kvnkld/aicss, add the thinking-state component to the shadcn project at .
```
### Caveat
The shadcn install path is listed in the README, but the README does not describe what files it creates, so check the output after running it.
Risk, remote script: The shadcn command downloads component code from a remote URL at https://www.aicss.dev, so review the added files before you commit them.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/kvnkld-aicss/copy-thinking-state-with-shadcn/
## How to add the thinking-state component to a Vue or Svelte app with Aicss
Repo: [kvnkld/aicss](https://github.com/kvnkld/aicss) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README
Use the AICSS CLI with a framework flag to add the component to Vue or Svelte files.
**Who it is for:** A Vue or Svelte developer building an agent chat interface who needs the same thinking indicator as their React teammates.
**The problem:** The npm package is listed for React, so a non-React team needs another way to get the component into their codebase.
**The outcome:** The thinking-state component is added to the project in the chosen framework format through the AICSS CLI.
### Steps
1. Open a terminal in the root of the Vue or Svelte project.
2. Run `npx @aicss/cli add thinking-state --framework vue` for a Vue project.
3. Run `npx @aicss/cli add thinking-state` and choose the framework the CLI supports for Svelte, if the CLI prompts for it.
4. Open the added files and import the component into the agent chat view.
### Prompt to paste into your agent
```text
In the repo kvnkld/aicss, use the @aicss/cli add command to add the thinking-state component to the project at for the framework . Report the files created and confirm the component is imported in .
```
### Caveat
The README shows the --framework vue flag explicitly, but does not show a Svelte flag, so confirm the Svelte option with the CLI help output before relying on it.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/kvnkld-aicss/add-thinking-state-to-vue-or-svelte/
## How to add Pro thinking-state components with the CLI token with Aicss
Repo: [kvnkld/aicss](https://github.com/kvnkld/aicss) | Difficulty: Advanced | Time: 30 minutes | Basis: From the README
Authenticate the AICSS CLI with AICSS_TOKEN to add Pro components to a project.
**Who it is for:** A developer or team with an AICSS account who needs Pro components, which are not on npm, in a React, Vue, or Svelte project.
**The problem:** Pro components are not published on npm, so the team needs a token-based CLI path to get them into the codebase.
**The outcome:** Pro components are added to the project through @aicss/cli after the AICSS_TOKEN is set from the account page.
### Steps
1. Get your token from your account at https://www.aicss.dev/account.
2. Set the environment variable AICSS_TOKEN to that token in your shell or CI secret store.
3. Run `npx @aicss/cli add thinking-state` in the project root.
4. Open the added files and confirm the component imports and renders in the agent chat view.
### Prompt to paste into your agent
```text
In the repo kvnkld/aicss, use @aicss/cli with the AICSS_TOKEN environment variable set to to add the Pro component to the project at . Report the files created and confirm the token is not written into any project file.
```
### Caveat
The README lists thinking-state as the example component and does not list which Pro components exist, so check your account page for what your token unlocks.
Risk, credentials: AICSS_TOKEN is an account credential, so keep it in an environment variable or secret store and never commit it to the repository.
Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/
URL: https://dedupedai.com/use-cases/kvnkld-aicss/add-pro-components-with-aicss-token/