DEDUPED Hot AI repos, turned into use cases Get the Monday 5

How to copy the thinking-state component into a shadcn project with Aicss

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

Short answer: Open a terminal in the root of the shadcn project; then run npx shadcn@latest add https://www.aicss.dev/r/thinking-state.json; Find the added thinking-state files in the project and open them. All steps.

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.

Who it is forA developer using shadcn in a React app who wants the AICSS thinking-state component as local source code they can edit.

The problemPulling in a UI component as an npm dependency can hide the code, while the team wants to own and change the component directly.

The outcomeThe thinking-state component files are added to the shadcn project so the team can edit them in their own codebase.

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

  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 for your agent

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

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.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for kvnkld/aicss and "Copy the thinking-state component into a shadcn project"

Add Deduped to Claude Code once

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

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

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