open-index/open-npm huggingface dataset:
npm package: @ghostly-ui/cli
Description: CLI for Ghostly — init, generate loading.tsx, diagnose issues
Latest version: 1.0.0

# @ghostly-ui/cli

CLI for [Ghostly](https://github.com/AdanSerrano/ghostly) — set up your project, generate loading states, diagnose issues.

## Commands

### `ghostly init`

Interactive setup wizard. Installs packages, adds CSS import, configures GhostlyProvider and Tailwind plugin.

```bash
npx @ghostly-ui/cli init
```

### `ghostly add loading [path]`

Generates `loading.tsx` files for Next.js App Router routes. Scans your `page.tsx` files, detects components, and creates skeleton loading states automatically.

```bash
# Interactive — scans all routes, lets you pick
npx @ghostly-ui/cli add loading

# Specific route
npx @ghostly-ui/cli add loading app/dashboard
```

### `ghostly doctor`

Health check for your Ghostly setup. Verifies packages, CSS import, provider, React version, loading.tsx coverage, and more.

```bash
npx @ghostly-ui/cli doctor
```

## Documentation

Full docs at [ghostly.adanulissess.com](https://ghostly.adanulissess.com)

## License

MIT
npm package: @ghostly-ui/core
Description: Zero-config skeleton loaders. Wrap your component, done.
Latest version: 1.0.0

# @ghostly-ui/core

CSS-first skeleton loading engine. Zero dependencies. Framework-agnostic.

> Your component IS the skeleton. Ghostly uses CSS to hide text and images, replacing them with animated placeholders -- preserving the exact same layout.

## Install

```bash
npm install @ghostly-ui/core
```

## Quick Start

Import the CSS and add `data-ghostly` to any container:

```css
@import '@ghostly-ui/core/css';
```

```html
<div data-ghostly="shimmer">
  <h2>This becomes a skeleton</h2>
  <p>So does this</p>
  <img src="photo.jpg" />
</div>
```

Remove the attribute to show real content. That's it.

## Features

- **3 animations** -- shimmer, pulse, wave (all pure CSS)
- **Dark mode** -- auto-detects via `.dark`, `data-theme="dark"`, or `prefers-color-scheme`
- **Accessible** -- `prefers-reduced-motion: reduce` disables animations
- **Zero specificity** -- uses `:where()` selectors, easy to override
- **Tiny** -- ~2KB gzipped, zero dependencies

## CSS Custom Properties

```css
:root {
  --ghostly-color: hsl(220 13% 87%);   /* skeleton base color */
  --ghostly-shine: hsl(220 13% 94%);   /* shimmer highlight */
  --ghostly-radius: 4px;                /* border radius */
  --ghostly-speed: 1.5s;                /* animation duration */
  --ghostly-transition: 0.3s;           /* fade-out transition */
}
```

## Data Attributes

| Attribute | Description |
|-----------|-------------|
| `data-ghostly="shimmer\|pulse\|wave"` | Activate skeleton on a container |
| `data-ghostly-ignore` | Exclude element from skeleton effect |
| `data-ghostly-lines="1-8"` | Control skeleton line count for text |
| `data-ghostly-ratio="16/9"` | Set aspect ratio for images |
| `data-ghostly-smooth` | Enable fade-out transition |

## Tailwind CSS Plugin

```js
// tailwind.config.js
import ghostly from '@ghostly-ui/core/tailwind'

export default {
  plugins: [ghostly],
}
```

Utilities: `ghostly-radius-*`, `ghostly-speed-*`, `ghostly-color-[...]`, `ghostly-shine-[...]`, `ghostly:` variant.

## Framework Adapters

- **[@ghostly-ui/react](https://www.npmjs.com/package/@ghostly-ui/react)** -- React components with `<Ghostly>`, `<GhostlyList>`, `<GhostlySuspense>`

## Documentation

Full docs at [ghostly.adanulissess.com](https://ghostly.adanulissess.com)

## License

MIT
npm package: @ghostly-ui/mcp
Description: MCP server for Ghostly skeleton loaders — gives AI assistants access to docs, components, and API reference
Latest version: 1.0.0

# @ghostly-ui/mcp

MCP (Model Context Protocol) server for [Ghostly](https://github.com/AdanSerrano/ghostly) skeleton loaders.

Gives AI assistants (Claude, Cursor, GitHub Copilot) direct access to Ghostly documentation, component API, and usage examples.

## Setup

### Claude Code

Add to your project's `.mcp.json`:

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

### Cursor

Add to `.cursor/mcp.json`:

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

### VS Code (Copilot)

Add to `.vscode/mcp.json`:

```json
{
  "servers": {
    "ghostly": {
      "command": "npx",
      "args": ["@ghostly-ui/mcp"]
    }
  }
}
```

## Available Tools

| Tool | Description |
|------|-------------|
| `list_components` | List all Ghostly components and hooks |
| `get_component` | Get full docs for a specific component (props, examples, import) |
| `get_installation` | Installation and setup instructions |
| `get_css_reference` | CSS custom properties, animations, data attributes |
| `get_examples` | Real-world usage examples |
| `search_docs` | Search documentation by keyword |

## How it works

When you ask your AI assistant about Ghostly, it can call these tools to get accurate, up-to-date documentation instead of relying on training data. This means:

- No hallucinated APIs or props
- Always current with the latest version
- Complete examples with correct syntax

## Example prompts

- "Add a skeleton loader to this product grid using Ghostly"
- "How do I use GhostlySuspense with React Server Components?"
- "What CSS variables does Ghostly support for dark mode?"
- "Show me how to customize skeleton colors per section"

## License

MIT
npm package: @ghostly-ui/react
Description: React components for Ghostly skeleton loaders
Latest version: 1.0.0

# @ghostly-ui/react

React components for [Ghostly](https://github.com/AdanSerrano/ghostly) skeleton loaders.

> Zero-config. Wrap your component, done. No CLI, no build step, no code changes.

## Install

```bash
npm install @ghostly-ui/core @ghostly-ui/react
```

```css
/* globals.css */
@import '@ghostly-ui/core/css';
```

## Quick Start

```tsx
import { Ghostly } from '@ghostly-ui/react'

<Ghostly loading={isLoading} smooth>
  <ProductCard product={data} />
</Ghostly>
```

## Components

### `<Ghostly>` -- Wrap any component

```tsx
<Ghostly
  loading={isLoading}
  animation="shimmer"    // shimmer | pulse | wave | none
  radius="md"            // none | xs | sm | md | lg | full
  speed="normal"         // slow | normal | fast
  color="hsl(210 40% 88%)"  // custom skeleton color
  shine="hsl(210 40% 94%)"  // custom shimmer highlight
  smooth                 // fade-out transition
  as="article"           // div | section | article | main | aside | span | ul | ol
>
  <YourComponent data={data} />
</Ghostly>
```

### `<GhostlyList>` -- For lists and grids

```tsx
<GhostlyList
  loading={isLoading}
  count={6}
  item={<ProductCard />}
  as="ul"
  className="grid grid-cols-3 gap-4"
>
  {products.map(p => <ProductCard key={p.id} product={p} />)}
</GhostlyList>
```

### `<GhostlySuspense>` -- Auto-skeleton with Suspense

Zero state management. Works with RSC, `use()`, and Suspense-based data fetching.

```tsx
import { GhostlySuspense } from '@ghostly-ui/react'

<GhostlySuspense fallback={<ProductCard />} animation="shimmer" smooth>
  <AsyncProductCard id={123} />
</GhostlySuspense>
```

### `<GhostlyProvider>` -- Global defaults

Nested providers inherit from parent. Only override what you need.

```tsx
<GhostlyProvider animation="shimmer" radius="md">
  <App />
</GhostlyProvider>
```

### `useGhostly()` -- Read context + spreadable props

```tsx
const { loading, animation, getGhostlyProps } = useGhostly()

// Spread onto any element for manual skeleton control
<div {...getGhostlyProps()}>
  <canvas />
</div>
```

## HTML Attributes

```html
<button data-ghostly-ignore>Always visible</button>
<p data-ghostly-lines="5">Long paragraph skeleton</p>
<img data-ghostly-ratio="1/1" src="avatar.jpg" />
```

## Props Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `loading` | `boolean` | required | Show skeleton |
| `animation` | `'shimmer' \| 'pulse' \| 'wave' \| 'none'` | `'shimmer'` | Animation style |
| `radius` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'sm'` | Border radius |
| `speed` | `'slow' \| 'normal' \| 'fast'` | `'normal'` | Animation speed |
| `color` | `string` | -- | Custom skeleton base color |
| `shine` | `string` | -- | Custom shimmer highlight |
| `smooth` | `boolean` | `false` | Fade-out transition |
| `as` | `string` | `'div'` | Wrapper HTML tag |

## Documentation

Full docs at [ghostly.adanulissess.com](https://ghostly.adanulissess.com)

## License

MIT
npm package: @ghostly-ui/svelte
Description: Svelte components for Ghostly skeleton loaders
Latest version: 1.0.0

# @ghostly-ui/svelte

Svelte adapter for [Ghostly](https://github.com/AdanSerrano/ghostly) -- zero-config skeleton loaders.

Uses Svelte actions and stores for a framework-idiomatic API. No duplicate markup, no manual sizing.

## Install

```bash
npm install @ghostly-ui/core @ghostly-ui/svelte
```

## Setup

Import the CSS once in your app entry or layout:

```ts
import '@ghostly-ui/core/css'
```

## Usage

### Basic (Svelte Action)

```svelte
<script>
  import { ghostly } from '@ghostly-ui/svelte'

  let loading = $state(true)
</script>

<div use:ghostly={{ loading, animation: 'shimmer' }}>
  <div class="flex gap-4">
    <img src="/avatar.jpg" class="w-12 h-12 rounded-full" />
    <div>
      <h3>John Doe</h3>
      <p>Software Engineer</p>
    </div>
  </div>
</div>
```

### With Smooth Transition

```svelte
<div use:ghostly={{ loading, smooth: true, animation: 'pulse' }}>
  <ProductCard {product} />
</div>
```

### Custom Colors

```svelte
<div use:ghostly={{ loading, color: '#e0d4f5', shine: '#f0e8ff' }}>
  <StatsCard {stat} />
</div>
```

### Minimum Display Time

```svelte
<script>
  import { createGhostlyState, ghostly } from '@ghostly-ui/svelte'

  const skeleton = createGhostlyState({ minimumMs: 400, delayMs: 100 })

  let loading = $state(false)
  $effect(() => skeleton.subscribe(v => loading = v))

  async function fetchData() {
    skeleton.setLoading(true)
    const data = await fetch('/api/products').then(r => r.json())
    skeleton.setLoading(false)
  }
</script>

<div use:ghostly={{ loading }}>
  <ProductList {products} />
</div>
```

## API

### Action

```ts
use:ghostly={params}
```

| Param | Type | Default | Description |
|-------|------|---------|-------------|
| `loading` | `boolean` | required | Show/hide skeleton |
| `animation` | `'shimmer' \| 'pulse' \| 'wave' \| 'none'` | `'shimmer'` | Animation style |
| `radius` | `'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'sm'` | Border radius |
| `speed` | `'slow' \| 'normal' \| 'fast'` | `'normal'` | Animation speed |
| `color` | `string` | -- | Custom skeleton color |
| `shine` | `string` | -- | Custom shimmer highlight |
| `smooth` | `boolean` | `false` | Enable fade-out transition |

### Store

```ts
const { subscribe, setLoading, destroy } = createGhostlyState(options?)
```

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `minimumMs` | `number` | `300` | Min skeleton display time |
| `delayMs` | `number` | `0` | Delay before showing skeleton |
| `onTransitionEnd` | `() => void` | -- | Callback when skeleton hides |

## HTML Attributes

These work automatically with the `ghostly` action:

| Attribute | Effect |
|-----------|--------|
| `data-ghostly-ignore` | Exclude element from skeleton |
| `data-ghostly-lines="N"` | Set text line count (1-8) |
| `data-ghostly-ratio="16/9"` | Set aspect ratio |

## Requirements

- Svelte >= 4.0
- `@ghostly-ui/core` >= 1.0.0

## License

MIT
npm package: @ghostly-ui/vue
Description: Vue 3 components for Ghostly skeleton loaders
Latest version: 1.0.0

# @ghostly-ui/vue

Vue 3 components for [Ghostly](https://github.com/AdanSerrano/ghostly) -- zero-config skeleton loaders.

Wrap your component, import the CSS, done. No duplicate markup, no manual sizing.

## Install

```bash
npm install @ghostly-ui/core @ghostly-ui/vue
```

## Setup

Import the CSS once in your app entry (e.g., `main.ts`):

```ts
import '@ghostly-ui/core/css'
```

## Usage

### Basic

```vue
<script setup>
import { Ghostly } from '@ghostly-ui/vue'
import { ref } from 'vue'

const loading = ref(true)
</script>

<template>
  <Ghostly :loading="loading">
    <div class="flex gap-4">
      <img src="/avatar.jpg" class="w-12 h-12 rounded-full" />
      <div>
        <h3>John Doe</h3>
        <p>Software Engineer</p>
      </div>
    </div>
  </Ghostly>
</template>
```

### Lists

```vue
<script setup>
import { GhostlyList } from '@ghostly-ui/vue'
</script>

<template>
  <GhostlyList :loading="loading" :count="6" class="grid grid-cols-3 gap-4">
    <template #item>
      <ProductCard />
    </template>
    <ProductCard v-for="p in products" :key="p.id" :product="p" />
  </GhostlyList>
</template>
```

### Global Config

```vue
<script setup>
import { GhostlyProvider } from '@ghostly-ui/vue'
</script>

<template>
  <GhostlyProvider animation="pulse" radius="md">
    <App />
  </GhostlyProvider>
</template>
```

### Minimum Display Time

```vue
<script setup>
import { useGhostlyState } from '@ghostly-ui/vue'
import { ref } from 'vue'

const rawLoading = ref(true)
const loading = useGhostlyState(rawLoading, { minimumMs: 400, delayMs: 100 })
</script>

<template>
  <Ghostly :loading="loading.value">
    <ProductCard :product="data" />
  </Ghostly>
</template>
```

## API

### Components

| Component | Props | Description |
|-----------|-------|-------------|
| `Ghostly` | `loading` (required), `animation`, `radius`, `speed`, `color`, `shine`, `as`, `smooth` | Main skeleton wrapper |
| `GhostlyList` | `loading`, `count` (required), `animation`, `radius`, `speed`, `color`, `shine`, `as` | List/grid skeleton |
| `GhostlyProvider` | `animation`, `radius`, `speed` | Global config via provide/inject |

### Composables

| Composable | Returns | Description |
|------------|---------|-------------|
| `useGhostly()` | `{ animation, radius, speed, getGhostlyProps }` | Read nearest provider config |
| `useGhostlyState(isLoading, options?)` | `Ref<boolean>` | Debounced loading with min display time |

### Animations

| Value | Effect |
|-------|--------|
| `shimmer` | Gradient sweep left-to-right (default) |
| `pulse` | Opacity fade in/out |
| `wave` | Staggered opacity per child |
| `none` | Static skeleton, no animation |

## Requirements

- Vue >= 3.3
- `@ghostly-ui/core` >= 1.0.0

## License

MIT
npm package: @ghostramses/react-draft-wysiwyg
Description: A wysiwyg on top of DraftJS. Includedes dynamic decorators
Author: Jyoti Puri
Latest version: 1.0.0

# React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries.
[Demo Page](https://jpuri.github.io/react-draft-wysiwyg).

[![Build Status](https://travis-ci.org/jpuri/react-draft-wysiwyg.svg?branch=master)](https://travis-ci.org/jpuri/react-draft-wysiwyg)

![](http://i.imgur.com/tU7kJ6i.gif)

## Features

- Configurable toolbar with option to add/remove controls.
- Option to change the order of the controls in the toolbar.
- Option to add custom controls to the toolbar.
- Option to change styles and icons in the toolbar.
- Option to show toolbar only when editor is focused.
- Support for inline styles: Bold, Italic, Underline, StrikeThrough, Code, Subscript, Superscript.
- Support for block types: Paragraph, H1 - H6, Blockquote, Code.
- Support for setting font-size and font-family.
- Support for ordered / unordered lists and indenting.
- Support for text-alignment.
- Support for coloring text or background.
- Support for adding / editing links
- Choice of more than 150 emojis.
- Support for mentions.
- Support for hashtags.
- Support for adding / uploading images.
- Support for aligning images, setting height, width.
- Support for Embedded links, flexibility to set height and width.
- Option provided to remove added styling.
- Option of undo and redo.
- Configurable behavior for RTL and Spellcheck.
- Support for placeholder.
- Support for WAI-ARIA Support attributes
- Using editor as controlled or un-controlled React component.
- Support to convert Editor Content to HTML, JSON, Markdown.
- Support to convert the HTML generated by the editor back to editor content.
- Support for internationalization.

## Installing

The package can be installed from npm `react-draft-wysiwyg`

```
$ npm install --save react-draft-wysiwyg draft-js
```

## Getting started

Editor can be used as simple React Component:

```js
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
<Editor
  editorState={editorState}
  toolbarClassName="toolbarClassName"
  wrapperClassName="wrapperClassName"
  editorClassName="editorClassName"
  onEditorStateChange={this.onEditorStateChange}
/>;
```

## Docs

For more documentation check [here](https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp).

## Questions Discussions

For discussions join public channel #rd_wysiwyg in [DraftJS Slack Organization](https://draftjs.herokuapp.com/).

## Fund

You can fund project at [Patreon](https://www.patreon.com/jyotipuri).

## Thanks

Original motivation and sponsorship for this work came from [iPaoo](http://www.ipaoo.com/). I am thankful to them for allowing the Editor to be open-sourced.

## License

MIT.
npm package: @ghostrick/ghostrick
Description: > My profile CLI
Author: Tomoya Ishizaka
Latest version: 1.0.2

# ghostrick
> My profile CLI

<img src="https://raw.githubusercontent.com/ghostrick/ghostrick/HEAD/screenshot/terminal.png" width="650">

## Usage
```bash
$ npx @ghostrick/ghostrick
```

## License
MIT © Tomoya Ishizaka
npm package: @ghostrick/react-medium-editor
Description: React wrapper for medium-editor
Author: Wang Zuo
Latest version: 1.8.3

# react-medium-editor

React wrapper for [medium-editor](https://github.com/daviferreira/medium-editor)

### Demo

[http://wangzuo.github.io/react-medium-editor](http://wangzuo.github.io/react-medium-editor)

### Installation

```sh
npm install react-medium-editor --save
```

### Usage

```javascript
// load theme styles with webpack
require('medium-editor/dist/css/medium-editor.css');
require('medium-editor/dist/css/themes/default.css');

// ES module
import Editor from 'react-medium-editor';

// CommonJS enviroment
// var Editor = require('react-medium-editor').default;

var App = React.createClass({
  getInitialState() {
    return { text: 'Fusce dapibus, tellus ac cursus commodo' };
  },

  render() {
    return (
      <div className="app">
        <h1>react-medium-editor</h1>
        <h3>Html content</h3>
        <div>{this.state.text}</div>

        <h3>Editor #1 (&lt;pre&gt; tag)</h3>
        <Editor
          tag="pre"
          text={this.state.text}
          onChange={this.handleChange}
          options={{ toolbar: { buttons: ['bold', 'italic', 'underline'] } }}
        />
        <h3>Editor #2</h3>
        <Editor text={this.state.text} onChange={this.handleChange} />
      </div>
    );
  },

  handleChange(text, medium) {
    this.setState({ text: text });
  }
});
```

### License

MIT
npm package: @ghosts/imbue-js
Description: Improve JavaScript with useful prototype extensions & helper methods.
Author: Caden Sumner
Latest version: 1.0.14

![Imbue logo](https://github.com/ghosts/imbue-js/blob/master/logo.png?raw=true)

Imbue is designed to replace some of the core features of jQuery, and provide a limited set of useful shortcuts and extensions on top of standard DOM elements in JavaScript. For me, the main goal is to phase out jQuery in projects I'm working on in favor of a very slim library that accomplishes the same usage requirements we had, mainly element selection, style management, and event listeners. Vanilla JS is extremely fast & versatile, but oftentimes performing basic DOM manipulations involves multiple methods or using poorly named ones. Some examples are JS's querySelectorAll() vs Imbue's getElements(), or the simplified document.whenReady() call in Imbue that abstracts away document ready listeners.

_NOTE: this is a work in progress at the moment, contibutions appreciated!_

## Docs / Examples / More Info

[https://imbue.js.org](https://imbue.js.org "Imbue Website")

## CDN

`http://unpkg.com/@ghosts/imbue-js`

## NPM

`npm i @ghosts/imbue-js`
npm package: @ghostsgc/picasso-parse
Description: Picasso解析库
Author: ghostsgc
Latest version: 1.0.17


# Picasso

> 一款sketch自动生成代码插件，可将sketch设计页面自动解析成前端代码。
## 简介

[Picasso](https://github.com/wuba/Picasso)是58同城推出的一款sketch设计稿解析插件，可将sketch设计稿自动解析成还原精准，可用度高的前端代码。

## 前提
- Sketch >= 60 [下载Sketch](https://www.sketch.com/)
## 使用
注：安装picasso插件之前，请先安装[sketch](https://www.sketch.com/)

[下载picasso插件](https://github.com/wuba/Picasso/releases/download/v2.1.6/picasso.sketchplugin.zip) => picasso.sketchplugin.zip 解压，双击安装即可，如下：

![1.jpg](https://wos.58cdn.com.cn/IjGfEdCbIlr/ishare/f3c38c05-9051-4b87-b5ad-32439b0dfed71.jpg)

安装完成后在sketch软件中使用插件，如下图所示：

![two.gif](https://wos.58cdn.com.cn/IjGfEdCbIlr/ishare/43582d7b-0d66-4cc1-b240-7ba55aaa4acctwo.gif)

## 开发
``` sh
  # 插件目录
  cd picasso
  # 安装依赖
  npm install
  # 启动
  npm start
  # 打包
  npm run build
```
## 贡献
欢迎参与picasso项目的开发建设和讨论。
> 提交 pull request 之前请先提 [Issue 讨论].
npm package: @ghostspeak/ghostspeak
Description: TypeScript SDK for podAI Protocol on Solana
Author: dexploorer
Latest version: 1.0.5

## 🛠️ Troubleshooting

### Command Not Found

If you see "command not found" after installing globally, add your global bin directory to your PATH:

- For npm:
  ```sh
  export PATH="$(npm bin -g):$PATH"
  ```
- For Bun:
  ```sh
  export PATH="$HOME/.bun/bin:$PATH"
  ```

Restart your terminal or run the above command to use CLI commands from anywhere.
npm package: @ghostspeak/plugin-gateway-ghost
Description: Unified AI Gateway plugin for ElizaOS - Vercel AI Gateway + FAL.ai for text, images, video, and more
Author: Ghostspeak
Latest version: 0.2.1

# @ghostspeak/plugin-gateway-ghost

Unified Vercel AI Gateway plugin for ElizaOS - **one API key** for all model types.

## Features

- **Single API Key**: One `AI_GATEWAY_API_KEY` for all model operations
- **January 2026 Models**: Claude Haiku/Opus 4.5, FLUX 2 Pro, Grok 2 Vision
- **Full Model Coverage**: Text, embeddings, images, vision, speech, transcription
- **Streaming Support**: Full async streaming for text generation
- **Local Tokenization**: Uses js-tiktoken, no API calls needed

## Supported Model Types

| ModelType | Default Model | Description |
|-----------|---------------|-------------|
| TEXT_SMALL | `anthropic/claude-haiku-4.5` | Fast, efficient text |
| TEXT_LARGE | `anthropic/claude-opus-4.5` | Best quality reasoning |
| TEXT_EMBEDDING | `openai/text-embedding-3-large` | 3072-dim embeddings |
| OBJECT_SMALL | `anthropic/claude-haiku-4.5` | Structured JSON output |
| OBJECT_LARGE | `anthropic/claude-opus-4.5` | Complex structured output |
| IMAGE | `bfl/flux-2-pro` | Image generation (FLUX) |
| IMAGE_DESCRIPTION | `xai/grok-2-vision` | Vision/multimodal |
| TRANSCRIPTION | `openai/whisper-1` | Speech-to-text |
| TEXT_TO_SPEECH | `openai/tts-1-hd` | Text-to-speech (HD) |
| TEXT_TOKENIZER_* | (local) | Token encode/decode |

## Installation

```bash
npm install @ghostspeak/plugin-gateway-ghost
# or
bun add @ghostspeak/plugin-gateway-ghost
```

## Configuration

### Environment Variables

```bash
# Required
AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key

# Optional (with defaults)
AI_GATEWAY_BASE_URL=https://ai-gateway.vercel.sh/v1
AI_GATEWAY_TEXT_SMALL_MODEL=anthropic/claude-haiku-4.5
AI_GATEWAY_TEXT_LARGE_MODEL=anthropic/claude-opus-4.5
AI_GATEWAY_EMBEDDING_MODEL=openai/text-embedding-3-large
AI_GATEWAY_IMAGE_MODEL=bfl/flux-2-pro
AI_GATEWAY_VISION_MODEL=xai/grok-2-vision
AI_GATEWAY_TRANSCRIPTION_MODEL=openai/whisper-1
AI_GATEWAY_TTS_MODEL=openai/tts-1-hd
AI_GATEWAY_TTS_VOICE=alloy
```

### Character Configuration

```json
{
  "name": "YourAgent",
  "plugins": ["@ghostspeak/plugin-gateway-ghost"],
  "bio": "Your agent bio..."
}
```

## Usage

The plugin automatically registers model handlers when loaded. ElizaOS will use these handlers for all model operations:

```typescript
// The plugin registers handlers for:
// - runtime.generateText() -> TEXT_SMALL/TEXT_LARGE
// - runtime.embed() -> TEXT_EMBEDDING
// - runtime.generateObject() -> OBJECT_SMALL/OBJECT_LARGE
// - runtime.generateImage() -> IMAGE
// - etc.
```

## Development

```bash
# Install dependencies
bun install

# Build
bun run build

# Test (requires AI_GATEWAY_API_KEY)
AI_GATEWAY_API_KEY=your_key bun test
```

## License

MIT
npm package: @ghostspeak/react
Description: React integration for GhostSpeak Protocol
Latest version: 1.0.0

# @ghostspeak/react

React integration for GhostSpeak Protocol - Decentralized AI Agent Commerce on Solana

## Overview

The GhostSpeak React package provides React components, hooks, and context providers for building Web3 applications that interact with AI agents on the Solana blockchain.

## Features

- **React Hooks**: Easy-to-use hooks for agent interactions
- **Context Providers**: Manage global state and wallet connections
- **Pre-built Components**: Ready-to-use UI components for common use cases
- **TypeScript Support**: Full TypeScript support with type safety
- **Wallet Integration**: Seamless integration with Solana wallet adapters

## Installation

```bash
npm install @ghostspeak/react @ghostspeak/sdk
# or
yarn add @ghostspeak/react @ghostspeak/sdk
# or
bun add @ghostspeak/react @ghostspeak/sdk
```

## Quick Start

```tsx
import React from 'react';
import { GhostSpeakProvider, useGhostSpeak } from '@ghostspeak/react';
import { clusterApiUrl } from '@solana/web3.js';

// Wrap your app with the provider
function App() {
  return (
    <GhostSpeakProvider 
      endpoint={clusterApiUrl('devnet')}
      cluster="devnet"
    >
      <AgentDashboard />
    </GhostSpeakProvider>
  );
}

// Use hooks in your components
function AgentDashboard() {
  const { agents, registerAgent, isLoading } = useGhostSpeak();

  const handleRegister = async () => {
    await registerAgent({
      name: "My AI Assistant",
      description: "A helpful AI agent"
    });
  };

  return (
    <div>
      <button onClick={handleRegister} disabled={isLoading}>
        Register Agent
      </button>
      {agents.map(agent => (
        <div key={agent.id}>{agent.name}</div>
      ))}
    </div>
  );
}
```

## Components

### GhostSpeakProvider

Provides GhostSpeak context to your React application:

```tsx
<GhostSpeakProvider 
  endpoint="https://api.devnet.solana.com"
  cluster="devnet"
  autoConnect={true}
>
  {/* Your app */}
</GhostSpeakProvider>
```

### AgentCard

Display agent information:

```tsx
import { AgentCard } from '@ghostspeak/react';

<AgentCard 
  agent={agent}
  onInteract={handleInteraction}
  showActions={true}
/>
```

### Marketplace

Browse and interact with the agent marketplace:

```tsx
import { Marketplace } from '@ghostspeak/react';

<Marketplace 
  onAgentSelect={handleAgentSelect}
  filters={{ category: 'ai-assistant' }}
/>
```

## Hooks

### useGhostSpeak

Main hook for GhostSpeak functionality:

```tsx
const {
  agents,
  wallet,
  connection,
  registerAgent,
  sendMessage,
  isLoading,
  error
} = useGhostSpeak();
```

### useAgent

Hook for individual agent interactions:

```tsx
const {
  agent,
  messages,
  sendMessage,
  isOnline
} = useAgent(agentId);
```

## Requirements

- React 18+
- @ghostspeak/sdk
- @solana/wallet-adapter-react

## License

MIT - See [LICENSE](../../../LICENSE) file for details.

## Support

- [GitHub Issues](https://github.com/ghostspeak/ghostspeak/issues)
- [Documentation](https://docs.ghostspeak.dev)
- [Discord Community](https://discord.gg/ghostspeak)
npm package: @ghostspeak/sdk-typescript
Description: TypeScript SDK for GhostSpeak Protocol - Decentralized AI Agent Commerce on Solana
Author: GhostSpeak Team
Latest version: 1.0.0

# @ghostspeak/sdk-typescript

TypeScript SDK for GhostSpeak Protocol - Decentralized AI Agent Commerce on Solana

## Overview

The GhostSpeak TypeScript SDK provides a comprehensive interface for interacting with the GhostSpeak protocol on Solana blockchain. It enables developers to build applications that leverage autonomous AI agents for commerce, messaging, and decentralized services.

## Features

- **Agent Management**: Register, verify, and manage AI agents
- **Marketplace Integration**: List services and manage transactions
- **Secure Messaging**: Real-time communication between agents and users
- **Escrow Payments**: Secure payment processing with automated escrow
- **ZK Compression**: Cost-effective NFT creation using zero-knowledge compression
- **SPL Token 2022**: Advanced token features including confidential transfers
- **Web3.js v2 Native**: Modern Solana integration with latest patterns

## Installation

```bash
npm install @ghostspeak/sdk-typescript
# or
yarn add @ghostspeak/sdk-typescript
# or
bun add @ghostspeak/sdk-typescript
```

## Quick Start

```typescript
import { GhostSpeakClient } from '@ghostspeak/sdk-typescript';
import { clusterApiUrl, Connection } from '@solana/web3.js';

// Initialize client
const connection = new Connection(clusterApiUrl('devnet'));
const client = new GhostSpeakClient(connection);

// Register an agent
const agent = await client.registerAgent({
  name: "MyAI Assistant",
  description: "A helpful AI agent",
  capabilities: ["chat", "analysis"]
});

console.log('Agent registered:', agent);
```

## Documentation

- [API Reference](https://docs.ghostspeak.dev/sdk/typescript)
- [Getting Started Guide](https://docs.ghostspeak.dev/guides/getting-started)
- [Examples](./src/examples/)

## Package Structure

- `src/services/` - Core service implementations
- `src/generated-v2/` - Auto-generated instruction builders
- `src/types/` - TypeScript type definitions
- `src/utils/` - Utility functions and helpers

## Development

```bash
# Install dependencies
bun install

# Build the package
bun run build

# Run tests
bun test

# Type checking
bun run type-check
```

## Requirements

- Node.js 18+
- TypeScript 5.0+
- Solana Web3.js v2

## License

MIT - See [LICENSE](../../LICENSE) file for details.

## Support

- [GitHub Issues](https://github.com/ghostspeak/ghostspeak/issues)
- [Documentation](https://docs.ghostspeak.dev)
- [Discord Community](https://discord.gg/ghostspeak)
npm package: @ghostteam/network-mcp-node
Description: LinkedIn Network MCP Server - Export your LinkedIn network data to CSV
Author: GhostTeam
Latest version: 1.0.2

# LinkedIn Network MCP

Local npm MCP server that fetches LinkedIn network data from your backend server and exports to CSV.

## Architecture

```
Cursor (MCP Client)
    ↓ npx
Local MCP Server (server.py)
    ↓ HTTP GET /api/network (with X-UUID header)
Backend Server (Railway)
    ↓ Queries database
PostgreSQL Database
    ↓ Returns data
Backend Server
    ↓ Returns JSON response
Local MCP Server
    ↓ Converts to CSV
CSV File (saved locally)
```

**Important:** The MCP server does NOT connect directly to the database. 
It only communicates with your backend server via HTTP API.

## Quick Start

1. **Make sure Python 3.8+ is installed** (dependencies will be installed automatically)

2. **Configure `~/.cursor/mcp.json`:**
   ```json
   {
     "mcpServers": {
       "network-mcp-node": {
         "command": "npx",
         "args": ["-y", "@ghostteam/network-mcp-node@latest"],
         "env": {
           "UUID": "your-uuid-here",
           "OUT_DIR": "C:\\Users\\User\\Documents"
         }
       }
     }
   }
   ```

3. **Restart Cursor**

4. **Use the `export_network_csv_to_file` MCP tool**

## How It Works

1. **MCP Client** (Cursor) runs `npx @ghostteam/network-mcp-node@latest`
2. **Local MCP Server** starts (Python)
3. **User calls export tool** → Server sends HTTP GET to backend:
   ```
   GET /api/network
   Headers: X-UUID: your-uuid-here
   ```
4. **Backend Server** queries database for that UUID
5. **Backend returns** JSON array of contacts
6. **MCP Server** saves CSV file to `OUT_DIR`

## Backend API Required

Your backend server needs this endpoint:

```
GET /api/network
Headers:
  X-UUID: <user-uuid>

Response:
  [
    {
      "full_name": "...",
      "email": "...",
      ...
    },
    ...
  ]
```

## Environment Variables

- **UUID** (required): User identifier sent to backend server
- **OUT_DIR** (optional): Where to save CSV files (defaults to current directory)

**Note:** Backend URL is hardcoded in the package and cannot be changed via configuration.

## Publishing to npm

```bash
npm login
npm publish --access public
```
npm package: @ghosty-labz/db2p
Description: A simple package for giving distance between two gps points
Author: Gary Varner
Latest version: 1.0.2

<p align="center">
    <a href="https://github.com/gvarner13/db2p/actions/workflows/ci.yml"><img src="https://github.com/gvarner13/db2p/actions/workflows/ci.yml/badge.svg?branch=master" alt="build status"></a>
    <a href="https://jsr.io/@ghosty-labz/db2p">
        <img src="https://jsr.io/badges/@ghosty-labz/db2p" alt="" />
    </a>
</p>

# DB2P 🌎

By the 👻🧪

A simple package that will give you the distance between two points on the globe.

## Installation

Install db2p with npm

```bash
  npm i @ghosty-labz/db2p
```
npm package: @ghotiv/uniswap-v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap V2
Latest version: 3.0.1

# Uniswap V2 SDK

[![Unit Tests](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Unit%20Tests/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3A%22Unit+Tests%22)
[![Lint](https://github.com/Uniswap/uniswap-v2-sdk/workflows/Lint/badge.svg)](https://github.com/Uniswap/uniswap-v2-sdk/actions?query=workflow%3ALint)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm version](https://img.shields.io/npm/v/@uniswap/v2-sdk/latest.svg)](https://www.npmjs.com/package/@uniswap/v2-sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@uniswap/v2-sdk/latest.svg)](https://bundlephobia.com/result?p=@uniswap/v2-sdk@latest)

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @ghotst0xdeadbeef/js-utils
Description: The first package released    
Author: ghotst0xdeadbeef
Latest version: 1.0.1

# js-utils

This project is for [personal](https://d1ke1td7rfeud7.cloudfront.net) testing only

---
Copyright (C) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.