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

How to add the thinking-state component to a Vue or Svelte app with Aicss

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

Short answer: Open a terminal in the root of the Vue or Svelte project; then run npx @aicss/cli add thinking-state --framework vue for a Vue project; run npx @aicss/cli add thinking-state and choose the framework the CLI supports for Svelte, if the CLI prompts for it. All steps.

Who it is forA Vue or Svelte developer building an agent chat interface who needs the same thinking indicator as their React teammates.

The problemThe npm package is listed for React, so a non-React team needs another way to get the component into their codebase.

The outcomeThe thinking-state component is added to the project in the chosen framework format through the AICSS CLI.

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

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

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.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for kvnkld/aicss and "Add the thinking-state component to a Vue or Svelte app"

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