open-index/open-npm huggingface dataset:
npm package: @pradeepgudipati/kovaad-chat-ui-kit
Description: Kovaad's React component library for creating chat interfaces
Author: Kovaad
Latest version: 1.0.9

# Chat UI Kit React

Build your own chat UI with React components in a few minutes.  
The Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

Tired of struggling with sticky scrollbars, contenteditable, responsiveness, css hacks?  
This kit is for you! [See all features](https://chatscope.io/features).

**Chat UI Kit brings you chat UI development at warp speed** 🚀

## Demo

- Full-featured chat application: [https://demo.chatscope.io](https://demo.chatscope.io)
- Zoe, Akane, Eliot and Joe: [https://chatscope.io/demo/chat-friends](https://chatscope.io/demo/chat-friends/)
- Chat with the Martian (he is available sometimes): [https://mars.chatscope.io](https://mars.chatscope.io)

Demos index: [https://chatscope.io/demo](https://chatscope.io/demo/).

## Install

**Component library**

Using yarn:

```sh
yarn add @pradeepgudipati/chat-ui-kit
```

Using npm:

```sh
npm install @pradeepgudipati/chat-ui-kit
```

**Styles**

Using yarn:

```sh
yarn add @pradeepgudipati/chat-ui-kit-styles
```

Using npm:

```sh
npm install @pradeepgudipati/chat-ui-kit-styles
```

## Usage

### ESM

```jsx
import styles from "@pradeepgudipati/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@pradeepgudipati/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;
```

Yeah! Your first chat GUI is ready!

### UMD

UMD usage is documented in our [Storybook](https://chatscope.io/storybook/react/).

## Documentation

Check our friendly [Storybook](https://chatscope.io/storybook/react/).

## Typescript

The library is written in Javascript, but Typescript typings are available in the package since version 1.9.3.

## New Release 

1.  Update the code as required
2.  Once tested , update the package.json version
```json 
   "version": "1.0.X", // Replace X with the new version
  ```
3.  Commit the changes and raise the PR to the main branch
4.  Once PR is approved and merged, GitHub actions will automatically publish the package to npm registry



## Website
npm package: @pradeepgudipati/kovaad-chat-ui-kit-styles
Description: SCSS themes for kovaad-chat-ui-kit library
Author: Kovaad
Latest version: 1.0.7

# Kovaad - Chat UI Kit Styles

Base theme for [chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react).

You can use this theme, or create your own by customizing scss variables.

## Install

Using yarn.

```sh
yarn add @pradeepgudipati/kovaad-chat-ui-kit-styles
```

Using npm.

```sh
npm install @pradeepgudipati/kovaad-chat-ui-kit-styles
````

## Usage

```jsx
import styles from '@pradeepgudipati/kovaad-chat-ui-kit-styles/dist/default/styles.min.css';
```

For more information please visit [Chat UI Kit React repository](https://github.com/chatscope/chat-ui-kit-react)
or check our friendly [Storybook](https://chatscope.io/storybook/react/).

## New Release

1. Update the code as required
2. Once tested , update the package.json version

```json 
   "version": "1.0.X", // Replace X with the new version
  ```

3. Commit the changes and raise the PR to the main branch
4. Once PR is approved and merged, GitHub actions will automatically publish the package to npm registry

## License

[MIT](https://github.com/chatscope/chat-ui-kit-styles/blob/master/LICENSE)
npm package: @pradeepmajji702/springboot-mcp
Description: MCP server for Spring Boot Swagger API integration
Author: Pradeep Majji
Latest version: 1.0.0

# Spring Boot MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with access to Spring Boot backend APIs through Swagger/OpenAPI documentation.

## Features

- **List Endpoints**: Get all available API endpoints from your Spring Boot backend
- **Describe Endpoint**: Get detailed information about a specific API endpoint
- **Generate Frontend Calls**: Auto-generate frontend API call code for React or Angular

## Installation

### Global Installation (Recommended)

```bash
npm install -g @pradeepmajji702/springboot-mcp
```

### Local Installation

```bash
npm install @pradeepmajji702/springboot-mcp
```

## Configuration

### For Claude Desktop / Copilot

Add this to your MCP settings configuration file:

**Windows**: `%APPDATA%\Code\User\globalStorage\github.copilot-chat\mcp.json`  
**macOS/Linux**: `~/.config/Code/User/globalStorage/github.copilot-chat/mcp.json`

```json
{
  "mcpServers": {
    "springboot-mcp": {
      "command": "npx",
      "args": ["-y", "@pradeepmajji702/springboot-mcp"],
      "env": {
        "SWAGGER_URL": "http://localhost:8080/v3/api-docs"
      }
    }
  }
}
```

**Important**: Replace `SWAGGER_URL` with your actual Spring Boot Swagger documentation URL.

### Common Swagger URLs

- Spring Boot 3: `http://localhost:8080/v3/api-docs`
- Spring Boot 2: `http://localhost:8080/v2/api-docs`
- Custom path: `http://localhost:8080/your-app/v3/api-docs`

## Usage

Once configured, you can ask your AI assistant:

- "List all available backend endpoints"
- "Describe the GET /api/users endpoint"
- "Generate a React API call for POST /api/users"
- "Show me the Angular code to call the login endpoint"

## Available Tools

### `list_endpoints`
Lists all API endpoints from your Spring Boot backend.

### `describe_endpoint`
Get detailed information about a specific endpoint including parameters, request body, and responses.

**Parameters:**
- `path` (string): The API path (e.g., "/api/users")
- `method` (string): HTTP method (e.g., "get", "post", "put", "delete")

### `generate_frontend_call`
Generates frontend code to call a specific API endpoint.

**Parameters:**
- `path` (string): The API path
- `method` (string): HTTP method
- `framework` (string): "react" or "angular"

## Requirements

- Node.js >= 18.0.0
- A running Spring Boot application with Swagger/OpenAPI enabled

## Development

```bash
# Clone the repository
git clone https://github.com/Pradeepmajji702/MCP_SPRINGBOOT.git
cd MCP_SPRINGBOOT

# Install dependencies
npm install

# Run locally
SWAGGER_URL=http://localhost:8080/v3/api-docs node server.js
```

## Publishing

To publish this package to npm:

Then publish:

```bash
npm login
npm publish --access public
```

## License

MIT

## Contributing

Contributions are welcome! Please open an issue or submit a pull request.
npm package: @pradeepmajji702/swagger-mcp
Description: MCP server for Spring Boot Swagger API integration
Author: Pradeep Majji
Latest version: 1.0.1

# Spring Boot MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with access to Spring Boot backend APIs through Swagger/OpenAPI documentation.

## Features

- **List Endpoints**: Get all available API endpoints from your Spring Boot backend
- **Describe Endpoint**: Get detailed information about a specific API endpoint
- **Generate Frontend Calls**: Auto-generate frontend API call code for React or Angular

## Installation

### Global Installation (Recommended)

```bash
npm install -g @pradeepmajji702/springboot-mcp
```

### Local Installation

```bash
npm install @pradeepmajji702/springboot-mcp
```

## Configuration

### For Claude Desktop / Copilot

Add this to your MCP settings configuration file:

**Windows**: `%APPDATA%\Code\User\globalStorage\github.copilot-chat\mcp.json`  
**macOS/Linux**: `~/.config/Code/User/globalStorage/github.copilot-chat/mcp.json`

```json
{
  "mcpServers": {
    "springboot-mcp": {
      "command": "npx",
      "args": ["-y", "@pradeepmajji702/springboot-mcp"],
      "env": {
        "SWAGGER_URL": "http://localhost:8080/v3/api-docs"
      }
    }
  }
}
```

**Important**: Replace `SWAGGER_URL` with your actual Spring Boot Swagger documentation URL.

### Common Swagger URLs

- Spring Boot 3: `http://localhost:8080/v3/api-docs`
- Spring Boot 2: `http://localhost:8080/v2/api-docs`
- Custom path: `http://localhost:8080/your-app/v3/api-docs`

## Usage

Once configured, you can ask your AI assistant:

- "List all available backend endpoints"
- "Describe the GET /api/users endpoint"
- "Generate a React API call for POST /api/users"
- "Show me the Angular code to call the login endpoint"

## Available Tools

### `list_endpoints`
Lists all API endpoints from your Spring Boot backend.

### `describe_endpoint`
Get detailed information about a specific endpoint including parameters, request body, and responses.

**Parameters:**
- `path` (string): The API path (e.g., "/api/users")
- `method` (string): HTTP method (e.g., "get", "post", "put", "delete")

### `generate_frontend_call`
Generates frontend code to call a specific API endpoint.

**Parameters:**
- `path` (string): The API path
- `method` (string): HTTP method
- `framework` (string): "react" or "angular"

## Requirements

- Node.js >= 18.0.0
- A running Spring Boot application with Swagger/OpenAPI enabled

## Development

```bash
# Clone the repository
git clone https://github.com/Pradeepmajji702/MCP_SPRINGBOOT.git
cd MCP_SPRINGBOOT

# Install dependencies
npm install

# Run locally
SWAGGER_URL=http://localhost:8080/v3/api-docs node server.js
```

## Publishing

To publish this package to npm:

Then publish:

```bash
npm login
npm publish --access public
```

## License

MIT

## Contributing

Contributions are welcome! Please open an issue or submit a pull request.
npm package: @pradeepmishra/taginput
Description: content-editable tag input textbox
Author: pradeep23octgmail.com
Latest version: 0.0.18

# TagInput

#### TagInput is a customizable React component that provides an input field for entering both simple text and tags in content-editable text input.

#### With TagInput, you can easily create tag input fields for your web applications without having to worry about complex implementation details.

<br>

### Installation

To use TagInput in your React project, simply install it via NPM:

```shell
npm install @pradeepmishra/taginput
```

Then, import it into your project:

```jsx
import TagInput from '@pradeepmishra/taginput';
```

### Peer Dependencies

TagInput has peer dependencies of the following npm libraries

1. react
2. slate
3. slate-react

make sure you have them all in your project's dependencies.

### Usage

TagInput can be used like any other React component, with props for customization:

```jsx
<TagInput
  removeTagButton={false}
  initValue='Initial {{tag}} value'
  onValueChange={(value) => console.log(`New value: ${value}`)}
  addImageElement={(tagContent) => (
    <img src={`https://example.com/${tagContent}`} />
  )}
  transformInputText={(tagContent) => tagContent.toUpperCase()}
  transformInputElement={(tagContent) => (
    <span style={{ color: 'blue' }}>{tagContent}</span>
  )}
/>
```

### Props

`removeTagButton`: Boolean (optional) - hide the delete button in all tags (default: false).

`initValue`: String (optional) - provides an initial value for the input field (default: "").

`onValueChange`: Function (optional) - called when the value of the input field changes. The new value is passed as an argument to the function.

`addImageElement`: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a valid HTML element to be displayed in the tag.

`transformInputText`: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a transformed string to be displayed in the tag.

`transformInputElement`: Function (optional) - called when a new tag is added. The content of the tag is passed as an argument to the function, and the function should return a transformed HTML element to be displayed in the tag.

`capturePattern`: RegExp (optional) - Provide a regex pattern to capture text to identify a tag.

### License

TagInput is released under the MIT License.
Feel free to use it in your personal or commercial projects. If you have any questions or issues, please feel free to open an issue on the [Github](https://github.com/pradeep-mishra/taginput) repository.

### Author

Pradeep Mishra
[Github](https://github.com/pradeep-mishra)
[Twitter](https://twitter.com/ipradeepmishra)
[Linkedin](https://www.linkedin.com/in/ipradeepmishra/)

#### Demo site

[https://ce-taginput.netlify.app/](https://ce-taginput.netlify.app)

### Rendered view

![Rendered](/assets/ss.png)
npm package: @pradhana/learnstorybook-design-system
Description: Storybook design systems tutorial
Author: Ricado Guerra
Latest version: 0.1.1

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).
npm package: @pradheep_varatharajan/play-ai
Description: Playwright AI Integration - Automate browser interactions using AI
Author: Pradheep Varatharajan
Latest version: 0.0.1

# play-ai

A powerful AI-driven automation library built on top of Playwright, enabling natural language-based browser automation.

## Installation

```bash
npm install play-ai
# or
yarn add play-ai
```

## Prerequisites

- Node.js >= 16
- OpenAI API key (set as OPENAI_API_KEY in your environment variables)

## Usage

```typescript
import { play } from 'play-ai';

async function example() {
  // Initialize the browser automation
  await play('Navigate to google.com and search for "playwright automation"');
  
  // You can chain multiple commands
  await play('Click on the first search result');
  
  // Complex interactions are also supported
  await play('Fill out the contact form with my email test@example.com');
}
```

## Features

- Natural language commands for browser automation
- Built on top of Playwright for reliable browser automation
- OpenAI integration for intelligent command interpretation
- TypeScript support out of the box
- Extensive error handling and reporting

## Environment Variables

Create a `.env` file in your project root:

```
OPENAI_API_KEY=your_api_key_here
```

## Error Handling

The package exports `PlayAIError` for specific error handling:

```typescript
import { play, PlayAIError } from 'play-ai';

try {
  await play('Navigate to a non-existent website');
} catch (error) {
  if (error instanceof PlayAIError) {
    console.error('AI automation error:', error.message);
  }
}
```

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## License

MIT License - see the [LICENSE](LICENSE) file for details
npm package: @pradoguilherme/compresscli
Description: The best way to compress your images at once, using a complete CLI that identifies whether it is a directory with several images, or just one image. Enjoy!
Author: Guilherme Prado
Latest version: 0.0.13

# CompressCLI

[![Downloads](https://img.shields.io/github/repo-size/PradoGuilherme/CompressCLI)](https://github.com/PradoGuilherme/CompressCLI) [![Downloads](https://img.shields.io/bundlephobia/min/@pradoguilherme/compresscli?label=minified%20size)](https://www.npmjs.com/package/@pradoguilherme/compresscli) [![Downloads](https://img.shields.io/github/last-commit/PradoGuilherme/CompressCLI)](https://github.com/PradoGuilherme/CompressCLI) [![Downloads](https://img.shields.io/github/package-json/v/PradoGuilherme/CompressCLI)](https://www.npmjs.com/package/@pradoguilherme/compresscli) [![Downloads](https://img.shields.io/npm/dm/@pradoguilherme/compresscli)](https://www.npmjs.com/package/@pradoguilherme/compresscli) [![Dependencies](https://img.shields.io/david/pradoguilherme/CompressCLI)](https://www.npmjs.com/package/@pradoguilherme/compresscli)

<p align="center">CompressCLI is a tool that use the official <a href="https://tinypng.com/">TinyPNG</a> service to compress images via CLI with the best quality and the lowest weight preserving full transparency.
</p>

<hr>

## 📟 Preview
<img src="./demo.gif" alt="Demo - CompressCLI">
<hr>


## ⚡ Install

1. For Mac, Linux and Windows:

```
npm install -g @pradoguilherme/compresscli
```
or
```
yarn add -g @pradoguilherme/compresscli
```

## 🚀 Getting Started

```
Usage: ccpres <cmd> [args]

Commands:
  ccpres list        Show list of images in the folder
  ccpres compress    Compress the image and save in the same folder but with a prefix on the filename
  ccpres quota       Show the current quota
  ccpres help        Show helper
  ccpres version     Show version

Options:
  --help         Show help
  --version      Show version
  -f             The filename with the entire directory
  -d             The directory path with the files
```
When the compression is finished, a "compressed" folder is created in the original file directory and the new compressed file will be saved on this page.

## 📝 License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.


## 🎉 Contributing

1. Fork the repository
2. Create a branch with your feature: ```git checkout -b my-feature```
3. Commit your changes:  ``` git commit -m 'feat: my feature'```
4. Push to the branch: ```git push origin my-feature```
5. Create new pull request for this repository.


## 🖤 Thanks

Made with ❤️ by [Guilherme Prado](https://devprado.com.br) using the brilhant api from [TinyPNG](https://tinypng.com/).