DEDUPED Hot AI repos, turned into use cases Get the Monday 5
164 stars · TypeScript

How to use Aicss: what you can do with it

What is Aicss? AICSS is an MIT-licensed set of React UI components for AI agent conversations, plus a CLI that adds them to projects.

How do I use it? Run npm install @aicss/react in the project root; then 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. Full steps below.

Trended earlier

View repo on GitHub

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer

What do you want to do?

4 use cases

  • Show an agent thinking state in a React chat app

    Install @aicss/react and render the ThinkingState component while an AI agent works.

    View prompt
    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.

  • Copy the thinking-state component into a shadcn project

    Add the thinking-state component source to a shadcn project with one npx command.

    View prompt
    In the repo kvnkld/aicss, add the thinking-state component to the shadcn project at <project-path} by running the shadcn add command from the README. Report the files that were created and confirm that the component is imported in <chat-component-path>.

  • Add the thinking-state component to a Vue or Svelte app

    Use the AICSS CLI with a framework flag to add the component to Vue or Svelte files.

    View prompt
    In the repo kvnkld/aicss, use the @aicss/cli add command to add the thinking-state component to the project at <project-path> for the framework <vue-or-svelte>. Report the files created and confirm the component is imported in <chat-component-path>.

  • Add Pro thinking-state components with the CLI token

    Authenticate the AICSS CLI with AICSS_TOKEN to add Pro components to a project.

    View prompt
    In the repo kvnkld/aicss, use @aicss/cli with the AICSS_TOKEN environment variable set to <token-from-env> to add the Pro component <component-name> to the project at <project-path>. Report the files created and confirm the token is not written into any project file.

Quick start with Aicss

  1. Check you have what it needs: 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.
  2. Open kvnkld/aicss on GitHub and read the README and license.
  3. Run npm install @aicss/react in the project root.
  4. Add import { ThinkingState } from "@aicss/react/thinking-state"; to the chat component file.
  5. Render <ThinkingState /> in the chat view where the pending agent reply appears.
  6. Start the app and trigger an agent request to confirm the indicator shows and hides.

These steps come from our top use case, Show an agent thinking state in a React chat app, which also has a copy-paste agent prompt.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for kvnkld/aicss

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Aicss alternatives · Best AI repos for Software and DevOps

About this repo

  • Who it is forFront-end developers building chat or agent interfaces in React, Vue, or Svelte who want ready-made conversation UI components.
  • Why it is hot164 stars, launched 63 days ago
  • LanguageTypeScript
  • Sourcegithub.com/kvnkld/aicss · Back to Hot repos

Requirements

  • 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

Add this badge to your README

Maintain Aicss? Show readers where to find these use cases. Use cases on Deduped

Markdown 

[![Use cases on Deduped](https://dedupedai.com/badge/kvnkld/aicss.svg)](https://dedupedai.com/use-cases/kvnkld-aicss/?utm_source=github&utm_medium=badge&utm_campaign=kvnkld-aicss)

HTML 

<a href="https://dedupedai.com/use-cases/kvnkld-aicss/?utm_source=github&amp;utm_medium=badge&amp;utm_campaign=kvnkld-aicss"><img src="https://dedupedai.com/badge/kvnkld/aicss.svg" alt="Use cases on Deduped" height="20"></a>

A static image, no tracking script. About the badge

Questions about Aicss

What is Aicss?

AICSS is an MIT-licensed set of React UI components for AI agent conversations, plus a CLI that adds them to projects. It is an open-source project on GitHub: https://github.com/kvnkld/aicss.

How do I use Aicss?

Run npm install @aicss/react in the project root; then 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. The use cases on this page give the full steps and a copy-paste agent prompt for each job.

Who is Aicss for?

Front-end developers building chat or agent interfaces in React, Vue, or Svelte who want ready-made conversation UI components.

What can I do with Aicss?

4 use cases so far, for example: Show an agent thinking state in a React chat app; Copy the thinking-state component into a shadcn project; Add the thinking-state component to a Vue or Svelte app. Each has steps and a copy-paste agent prompt.

What do I need to run Aicss?

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.

What are alternatives to Aicss?

Other hot AI repos in Software and DevOps: Deep Infer, Harness2, Orca, Opencode, Graphify.

Is Aicss safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.