open-index/open-npm huggingface dataset:
npm package: @nocodeapi/embed-instagram-feed
Description: Webcomponent embed-instagram-feed following open-wc recommendations
Author: nocodeapi
Latest version: 0.0.3

# Embed Instagram Feed ![MIT License](https://img.shields.io/npm/v/@nocodeapi/embed-instagram-feed)

![NoCodeAPI](https://nocodeapi.com/favicon-32x32.png)

This plugin is brought to you by [NoCodeAPI](https://nocodeapi.com/)

Embed Instagram Feed is a free plugin that makes is easy for you to embed your Instagram feed (using NoCodeAPI) in your websites, wordpress blog, shopify sites & basically any html site.

Works on all devices out of the box, phones, tablets & desktops.

This is reliable and secure method to embed your instagram feed into your static webpages without any coding.

## Preview

![Desktop](https://i.imgur.com/YLrM0mK.jpg)

## Features

- Responsive
- Lightweight

## Usage/Examples

1. Get your Instagram API endpoint via NoCodeAPI - [https://nocodeapi.com/instagram-api](https://nocodeapi.com/instagram-api)
2. Add this script into your webpage.

```html
<script
  type="module"
  src="https://unpkg.com/@nocodeapi/embed-instagram-feed@latest/embed-instagram-feed.js?module"
></script>
```

3. - Just place the `<embed-instagram-feed url="Your Instagram API from NoCodeAPI"></embed-instagram-feed>` into your webpage `<body>` where you want to display your Instagram feed.

### Full code sample

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Embed Instagram Feed</title>
    <script
      type="module"
      src="https://unpkg.com/@nocodeapi/embed-instagram-feed@latest/embed-instagram-feed.js?module"
    ></script>
  </head>
  <body>
    <embed-instagram-feed
      url="Your Instagram API from NoCodeAPI"
    ></embed-instagram-feed>
  </body>
</html>
```

## FAQ

#### Does this work with Wordpress?

Yes, this plugin works with all websites

#### Is this plugin free?

Yes, it is completely free and open source.

#### Do I need to write code for this?

No, we have handled this end to end, so all you need to do is, paste this in you website and you are good to go.

#### How do I customise the style?

You would need to tweak and override the css classes in order to do this.

## Support

For support, email hello@nocodeapi.com or join our [Telegram channel](https://t.me/NoCodeAPI).

## Contributing

Contributions are always welcome!

Please feel free to raise a PR, so we can look into it.

## Authors

- [@mddanishyusuf](https://www.twitter.com/mddanishyusuf)
- [@fayazara](https://www.twitter.com/fayazara)
npm package: @nocodebackend/mcp
Description: MCP Server for NoCodeBackend - enables AI tool integration
Author: NoCodeBackend
Latest version: 0.1.7

# NoCodeBackend MCP Server

Official MCP (Model Context Protocol) server for [NoCodeBackend](https://nocodebackend.com). Enables native integration with AI coding tools like Cursor, Windsurf, Claude Desktop, and others.

## Installation

```bash
npm install -g @nocodebackend/mcp
```

Or run directly with npx:

```bash
npx @nocodebackend/mcp
```

## Quick Start

### 1. Get Your API Token

Get your API token from the NoCodeBackend dashboard: **Settings → API Token**

### 2. Configure with Cursor

Add to your Cursor MCP settings (`~/.cursor/mcp.json`):

```json
{
  "mcpServers": {
    "nocodebackend": {
      "command": "npx",
      "args": ["@nocodebackend/mcp"]
    }
  }
}
```

### 3. Login via the MCP

When you first use the MCP, you'll only see the `login` tool. Use it to authenticate:

```
Use tool: login
Token: your_api_token_here
```

After successful login, all tools become available.

## Alternative: Environment Variable

Instead of using the `login` tool, you can set your token via environment variable:

```json
{
  "mcpServers": {
    "nocodebackend": {
      "command": "npx",
      "args": ["@nocodebackend/mcp"],
      "env": {
        "NCB_TOKEN": "your_api_token"
      }
    }
  }
}
```

## Available Tools

| Tool | Description |
|------|-------------|
| `login` | Authenticate with your NoCodeBackend API token |
| `create_database` | Create a new database with tables |
| `list_databases` | List all your databases |
| `get_schema` | Get the schema of a database |
| `get_integration_guide` | Get integration rules and best practices |
| `get_integration_prompts` | Get proxy code for your Next.js app |
| `create_secret_key` | Create API keys for your database |
| `list_secret_keys` | List API keys for a database |
| `execute_sql` | Execute SQL statements |

## Example Usage

Once configured and logged in, you can ask your AI assistant:

- "Create a new database called my_app with users and posts tables"
- "Get the integration guide for NoCodeBackend"
- "Show me the schema of my database"
- "Create a secret key for my production app"

## Resources

The server exposes your databases as MCP resources:

- `nocodebackend://database/{name}` - Database schema as JSON

## Support

- Documentation: [nocodebackend.com/docs](https://nocodebackend.com/docs)
- Issues: [GitHub Issues](https://github.com/nocodebackend/mcp/issues)

## License

MIT
npm package: @nocodesites/gdrive-loader
Description: Download google a drive folder tree with document and spreadsheet contents extracted
Author: Kai Davenport
Latest version: 0.0.14

# @nocodesites/gdrive-loader

A module that downloads a google drive folder recursively loading the contents of spreadsheets and google documents into a tree data structure.

## usage

You need to have created a service account token with google and downloaded the `.json` file for it.

Also - you need to have given read access to a folder on google drive to that service account and have the id of the folder ready.

```javascript
const fs = require('fs')
const googleDriveLoader = require('@nocodesites/gdrive-loader')

const SERVICE_ACCOUNT_TOKEN_FILE = process.env.SERVICE_ACCOUNT_TOKEN_FILE
const GOOGLE_DRIVE_FOLDER_ID = process.env.GOOGLE_DRIVE_FOLDER_ID

if(!SERVICE_ACCOUNT_TOKEN_FILE) {
  console.error(`SERVICE_ACCOUNT_TOKEN_FILE variable needed`)
  process.exit(1)
}

if(!GOOGLE_DRIVE_FOLDER_ID) {
  console.error(`GOOGLE_DRIVE_FOLDER_ID variable needed`)
  process.exit(1)
}

if(!fs.existsSync(SERVICE_ACCOUNT_TOKEN_FILE)) {
  console.error(`${SERVICE_ACCOUNT_TOKEN_FILE} file does not exist`)
  process.exit(1)
}

let serviceAccountToken = null

try {
  const serviceAccountTokenContents = fs.readFileSync(SERVICE_ACCOUNT_TOKEN_FILE, 'utf8')
  serviceAccountToken = JSON.parse(serviceAccountTokenContents)
} catch(e) {
  console.error(`error loading service account JSON: ${e.toString()}`)
  process.exit(1)
}

googleDriveLoader({
  serviceAccountToken,
  itemId: GOOGLE_DRIVE_FOLDER_ID,
  logging: true,
}, (err, results) => {
  if(err) {
    console.error(`error: ${err.toString()}`)
    process.exit(1)
  }

  console.log(JSON.stringify(results, null, 4))
})

```
npm package: @nocodesites/plugin-gdrive-loader
Description: A nocode source plugin that downloads the contents of a google drive folder recursivly with document and spreadsheet contents extracted.
Author: Kai Davenport
Latest version: 0.0.14

# @nocodesites/plugin-gdrive-loader

A nocode source plugin that downloads the contents of a google drive folder recursivly with document and spreadsheet contents extracted.

## usage

You need to have created a service account token with google and downloaded the `.json` file for it.

Also - you need to have given read access to a folder on google drive to that service account and have the id of the folder ready.

Then - you configure the plugin using the `nocode-config.js` file as shown:

```javascript
const gdriveLoader = require('@nocodesites/plugin-gdrive-loader')

module.exports = {
  config: {
    title: 'My Example Google Drive Downloader',
  },
  routes: {
    '/': {
      page: 'Index'
    }
  },
  plugins: [
    {
      build: gdriveLoader,
      options: {
        folderId: process.env.GOOGLE_DRIVE_FOLDER_ID,
        serviceAccountToken: require(process.env.GOOGLE_SERVICE_ACCOUNT_TOKEN)
      }
    },
  ],
}
```
npm package: @nocodesites/plugin-website-loader
Description: A nocode source plugin that connects to the nocode api to get information about a website.
Author: Kai Davenport
Latest version: 0.0.5

# @nocodesites/plugin-website-loader

A nocode source plugin that uses a website api key to fetch details about the integrations of that website from the nocode api.

## usage

You need to have the nocode api key, api url and the website id exported as the following variables:

```
export NOCODE_API_URL=http://localhost
export NOCODE_API_KEY=123abc
export NOCODE_SITE_ID=1
```

This module will then connect to the api and fetch the important info - for example:

 * stripe client id
 * nocode stripe public key
npm package: @nocodext/pinnpm-components
Description: PinNPM React components for Chrome extension integration
Author: PinNPM Team
Latest version: 1.0.2

# @nocodext/pinnpm-components

React components for PinNPM Chrome extension integration.

## Installation

```bash
npm install @nocodext/pinnpm-components
```

## Usage

### Chrome Extension Integration

```javascript
import { initializePinNPMOnNPM } from '@nocodext/pinnpm-components/provider'

// Auto-initialize on NPM pages
initializePinNPMOnNPM({
  theme: 'light',
  position: 'top-right',
  onPackagePinned: (pkg) => console.log('Pinned:', pkg.name),
  onPackageUnpinned: (pkg) => console.log('Unpinned:', pkg)
})
```

### Individual Components

```jsx
import { PinButton } from '@nocodext/pinnpm-components/button'
import { PinNPMWidget } from '@nocodext/pinnpm-components/widget'
import { PinNPMProvider } from '@nocodext/pinnpm-components/provider'

function App() {
  return (
    <PinNPMProvider>
      <PinButton 
        packageName="react"
        packageTag="Frontend"
        packageDownloads="18M"
      />
      <PinNPMWidget 
        packageName="react"
        theme="light"
        position="top-right"
      />
    </PinNPMProvider>
  )
}
```

## Components

- **PinNPMWidget**: Complete widget with pin button, favorites, and auth
- **PinButton**: Standalone pin button
- **PinNPMProvider**: React context provider for auth state
- **FavoritesDrawer**: Favorites management interface

## Requirements

- React >=18.0.0
- @supabase/supabase-js >=2.0.0 (optional)
- zustand >=4.0.0

## License

MIT
npm package: @nocojs/parcel-transformer
Description: Parcel plugin for nocojs image optimization
Author: akzhy
Latest version: 1.0.0

# @nocojs/parcel-transformer

Parcel transformer that turns `placeholder()` calls imported from `nocojs` into inline data URIs using the TypeScript implementation of `@nocojs/core`.

## Installation

```bash
# application dependency
npm install nocojs

# add the transformer to your Parcel toolchain
npm install --save-dev @nocojs/parcel-transformer
```

## Usage

Add this to your `.parcelrc` file

```json
"transformers": {
   "*.{js,jsx,ts,tsx}": [
   "@nocojs/parcel-transformer",
   "..."
   ]
}
```

Then import from `nocojs` inside your source files:

```tsx
import { placeholder } from 'nocojs';

export function CardImage() {
   return <img src={placeholder('/images/card.jpg')} alt="Card" />;
}
```

Parcel runs the transformer during builds and replaces the call with a base64 data URI.

### Configuration Options

You can pass options by adding a `@nocojs/parcel-transformer` field in your package.json

```json
"@nocojs/parcel-transformer": {
   "publicDir": "public",
   "cacheFileDir": ".nocojs",
   "placeholderType": "blurred",
   "logLevel": "info"
}
```

Available options map directly to the [`@nocojs/core` transform options](../core/README.md#transform-options).

## How it Works

This transformer processes your JavaScript/TypeScript modules during the Parcel build, generates placeholders through `@nocojs/core`, and replaces `placeholder("...")` calls with inline data URLs.

## License

MIT
npm package: @nocojs/rspack-loader
Description: Rspack loader for @nocojs/core transformations
Author: akzhy
Latest version: 1.0.0

# @nocojs/rspack-loader

Rspack loader that transforms `placeholder()` calls from `nocojs` into inline data URIs using `@nocojs/core` under the hood.

## Installation

```bash
# application dependency
npm install nocojs

# dev dependency for your Rspack build
npm install --save-dev @nocojs/rspack-loader
```

## Usage

### Basic Configuration

Add the loader to your `rspack.config.js`:

```javascript
const { defineConfig } = require('@rspack/cli');

module.exports = defineConfig({
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx|vue)$/,
        use: [
          {
            loader: '@nocojs/rspack-loader',
            options: {
              logLevel: 'info',
              publicDir: 'public',
              cacheFileDir: '.nocojs'
            }
          }
        ]
      }
    ]
  }
});
```

### TypeScript Configuration

```typescript
import { defineConfig } from '@rspack/cli';
import type { NocoLoaderOptions } from '@nocojs/rspack-loader';

export default defineConfig({
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx|vue)$/,
        use: [
          {
            loader: '@nocojs/rspack-loader',
            options: {
              logLevel: 'info',
              publicDir: 'public',
              cacheFileDir: '.nocojs'
            } as NocoLoaderOptions
          }
        ]
      }
    ]
  }
});
```

## Options

The loader accepts the same [`TransformOptions`](../core/README.md#transform-options) as `@nocojs/core`. Common settings include:

- `publicDir` (`string`, default `'public'`): root directory for resolving `/`-prefixed paths.
- `cacheFileDir` (`string`, default `'.nocojs'`): location of the SQLite cache database.
- `placeholderType` (`"normal" | "blurred" | ...`, default `'blurred'`): controls placeholder style.
- `logLevel` (`"none" | "error" | "info" | "verbose"`): adjusts diagnostic output.
## Using the client helper

In your UI code import from `nocojs`:

```tsx
import { placeholder } from 'nocojs';

export function ProfileImage() {
  return <img src={placeholder('/images/profile.jpg')} alt="Profile" />;
}
```

When the loader runs it rewrites the call to an inline data URI, so no runtime dependency remains.

## Examples

### Vue Single File Components

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
          {
            loader: '@nocojs/rspack-loader',
            options: {
              logLevel: 'debug'
            }
          }
        ]
      }
    ]
  }
};
```

### React Components

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jsx|tsx)$/,
        use: [
          'babel-loader',
          {
            loader: '@nocojs/rspack-loader',
            options: {
              publicDir: './assets',
              cacheFileDir: './cache'
            }
          }
        ]
      }
    ]
  }
};
```

## License

MIT
npm package: @nocojs/webpack-loader
Description: Webpack loader for @nocojs/core transformations
Author: akzhy
Latest version: 1.0.0

# @nocojs/webpack-loader

Webpack loader that finds `placeholder()` calls imported from `nocojs`, generates placeholders, and inlines them while bundling.

## Installation

```bash
# application dependency
npm install nocojs

# dev dependency for your webpack build
npm install --save-dev @nocojs/webpack-loader
```

## Usage

### Basic Configuration

Add the loader to your webpack configuration:

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "@nocojs/webpack-loader",
            options: {
              publicDir: "public",
              cacheFileDir: ".nocojs",
              logLevel: "info",
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};
```

Import and use the helper in your codebase:

```tsx
import { placeholder } from 'nocojs';

export function Avatar() {
  return <img src={placeholder('/images/avatar.jpg')} alt="Avatar" />;
}
```

The loader rewrites the call to a data URI in the emitted bundle.

### TypeScript Configuration

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          "ts-loader",
          {
            loader: "@nocojs/webpack-loader",
            options: {
              logLevel: "verbose",
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};
```


## Examples

### Development vs Production

```javascript
// webpack.config.js
const isDevelopment = process.env.NODE_ENV === "development";

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "@nocojs/webpack-loader",
            options: {
              logLevel: isDevelopment ? "verbose" : "error",
              placeholderType: "blurred"
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};
```

### Custom Paths

```javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: [
          {
            loader: "@nocojs/webpack-loader",
            options: {
              publicDir: "src/assets",
              cacheFileDir: "node_modules/.cache/nocojs",
            },
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
};
```

## License

MIT
npm package: @nocom_bot/types_ts_plugin_a1
Description: TypeScript definition for support package in A-Type plugin handler.
Author: BadAimWeeb
Latest version: 0.14.2

# NOCOM_BOT A1-Type Plugin support package types

This repository add types to support package provided by A-Type handler.

Install:

```bash
npm i --save-dev @nocom_bot/types_ts_plugin_a1
```

Usage: Add this line to where you use the support package:

```ts
import "@nocom_bot/types_ts_plugin_a1";
```
npm package: @nocoolming/page-editor
Description: Core web editor components (minimal MVP) - a simple editable textarea component
Author: Mingming Li
Latest version: 0.0.3

# @webeditor/core

Minimal MVP React component library for the web editor (simple `Editor` component).

## 运行 / 构建

在 monorepo 根目录运行：
```bash
pnpm install
pnpm --filter @nocoolming/page-editor build