open-index/open-npm huggingface dataset:
npm package: @openthingies/tailor
Description: A React hook for using fabric
Author: miaapancake
Latest version: 0.1.2

# Tailor


[![CI Badge](https://img.shields.io/drone/build/OpenThingies/tailor?label=CI&server=https://ci.openthingies.com&style=for-the-badge)](https://ci.openthingies.com/OpenThingies/tailor)

Tailor is a react library that stitches together react and Fabric.js.

### Installation

- npm

    First install tailor

    ```console
    $ npm i @openthingies/tailor
    ```

    Then install fabric.js
    
    ```console
    $ npm i fabric
    ```

- yarn

    First install tailor

    ```console
    $ yarn add @openthingies/tailor
    ```

    Then install fabric.js
    
    ```console
    $ yarn add fabric
    ```

### Examples

#### Basic Example
```ts
import useTailor from "@openthingies/tailor";
import { fabric } from "fabric";
import { useEffect } from "react";

export default function Canvas() {

    const { add, htmlRef } = useTailor({ width: 600, height: 400 });

    useEffect(() => {
        add(
            new fabric.Rect({
                left: 50,
                top: 50,
                width: 30,
                height: 30,
                fill: "red"
            })
        );
    }, []);

    return (
        <canvas ref={htmlRef} />
    );

}
```
npm package: @opentil/cli
Description: Universal skill installer for OpenTIL
Latest version: 1.41.0

# @opentil/cli

Universal skill installer for [OpenTIL](https://opentil.ai) -- installs the TIL skill and MCP server config across 40+ AI agents.

## Install

```bash
npx @opentil/cli@latest
```

Detects your installed AI agents and interactively configures:

- **TIL skill** -- `/til` command for capturing and managing TIL entries
- **MCP server** -- connects your agent to your OpenTIL knowledge base
- **Agent extras** -- hooks, CLAUDE.md integration (Claude Code), MCP config (Cursor, Windsurf)

## Commands

```bash
npx @opentil/cli            # Interactive install / reconfigure
npx @opentil/cli update     # Check for new versions
npx @opentil/cli doctor     # Health check + version info
npx @opentil/cli uninstall  # Clean removal
```

## Supported Agents

Claude Code, Cursor, Windsurf, Codex, OpenCode, Gemini CLI, GitHub Copilot, Antigravity, Roo Code, Cline, Kilo Code, Goose, and [many more](https://github.com/opentil/opentil-skills/blob/main/cli/src/agents/registry.ts).

## What It Does

### Skill Installation

Copies the `/til` skill files to each agent's skill directory:

```
~/.claude/skills/til/       # Claude Code
~/.cursor/skills/til/       # Cursor
~/.codex/skills/til/        # Codex
...
```

### MCP Configuration

Configures MCP server in each agent's config file. Defaults to remote HTTP (zero-install):

```json
{
  "mcpServers": {
    "opentil": {
      "type": "http",
      "url": "https://opentil.ai/mcp",
      "headers": {
        "Authorization": "Bearer ${OPENTIL_TOKEN}"
      }
    }
  }
}
```

### Claude Code Extras

- **Hooks** -- auto-detection reminder for TIL-worthy moments
- **CLAUDE.md** -- TIL guidelines injected into project instructions

## License

MIT
npm package: @opentil/mcp
Description: MCP Server for OpenTIL — let AI agents read your TIL knowledge base
Latest version: 1.0.0

# @opentil/mcp

Local MCP (Model Context Protocol) server for [OpenTIL](https://opentil.ai) -- lets AI agents search and create TIL entries via stdio transport.

> **Recommended**: Use OpenTIL's [remote MCP endpoint](https://opentil.ai/mcp) instead -- zero installation, just configure a URL. This package is for offline use or agents that don't support HTTP transport.

## Quick Start

```bash
# Claude Code
claude mcp add opentil -- npx -y @opentil/mcp

# Set your token
export OPENTIL_TOKEN="til_xxx"
```

Create a token at https://opentil.ai/dashboard/settings/tokens

## Remote MCP (Recommended)

No installation needed. Configure your agent to connect directly:

**Claude Code:**

```bash
claude mcp add --transport http opentil https://opentil.ai/mcp \
  --header "Authorization: Bearer til_xxx"
```

**Cursor / VS Code** (`mcp.json`):

```json
{
  "mcpServers": {
    "opentil": {
      "type": "http",
      "url": "https://opentil.ai/mcp",
      "headers": {
        "Authorization": "Bearer til_xxx"
      }
    }
  }
}
```

## Tools

| Tool | Description |
|------|-------------|
| `get_profile` | User profile, top tags, entry count |
| `get_recent_learnings` | Recent published entries |
| `search_knowledge` | Full-text search across entries |
| `get_entry` | Full content of a specific entry |
| `create_til` | Create a new TIL entry |

## Token Resolution

1. `$OPENTIL_TOKEN` environment variable
2. `~/.til/credentials` file (active profile, created by `/til auth`)

## License

MIT
npm package: @opentiny/genui-sdk-angular
Description: A Angular component library for enhanced LLM display and interaction
Author: OpenTiny Team
Latest version: 1.1.1

# @opentiny/genui-sdk-angular

An Angular component library for enhanced LLM display and interaction. Stream AI-generated structured output into OpenTiny interactive UI components with bidirectional conversation support.

* **Streaming Rendering:** Content renders progressively as the model generates—no long waits for full responses.
* **Structured Output:** LLM output conforms to JSON Schema, enabling reliable parsing and rendering.
* **Interaction:** User actions (form submit, button click) feed back into the conversation context for seamless multi-turn flows.

[Learn more about GenUI SDK](https://opentiny.design/genui-sdk).

## Usage

```typescript
// app.component.ts
import { Component } from '@angular/core';
import { GenuiRenderer } from '@opentiny/genui-sdk-angular';

@Component({
  standalone: true,
  imports: [GenuiRenderer],
  template: `
    <genui-renderer
      [content]="schemaContent"
      [state]="state"
      [generating]="isGenerating"
    />
  `,
})
export class AppComponent {
  schemaContent = '{}';
  state: Record<string, any> = {};
  isGenerating = false;
}
```

## Documentation

* [start-with-render](https://docs.opentiny.design/genui-sdk/guide/angular/start-with-renderer)

## API

* [GenuiRenderer](https://docs.opentiny.design/genui-sdk/components/angular/renderer)
npm package: @opentiny/genui-sdk-server
Description: A server for the OpenTiny GenUI SDK, to enhance LLM return structure stream content
Author: OpenTiny Team
Latest version: 1.1.1

# @opentiny/genui-sdk-server


A server for the OpenTiny GenUI SDK to enhance LLM return structure stream content. Provides OpenAI-compatible chat completion API with GenUI schema streaming support.

* **Streaming:** Returns structured JSON Schema stream for progressive UI rendering.
* **OpenAI Compatible:** Drop-in replacement for OpenAI chat completions API.
* **Easy Integration:** Programmatic API or CLI to start the server.


## Usage

### CLI

```bash
# Create .env file with required variables
echo "BASE_URL=https://api.openai.com/v1" > .env
echo "API_KEY=your-api-key" >> .env

# Start server (default port 3100)
npx genui-sdk-server

# Custom port
npx genui-sdk-server -p 3000

# Custom env file
npx genui-sdk-server -e .env.production
```

### Programmatic

```typescript
import { startServer, equipChatCompletions } from '@opentiny/genui-sdk-server';
import express from 'express';

// Option 1: Use startServer (includes default route /chat/completions)
startServer({
  port: 3100,
  baseURL: 'https://api.openai.com/v1',
  apiKey: 'your-api-key',
});

// Option 2: Custom Express app
const app = express();
equipChatCompletions(app, {
  route: '/api/chat',
  baseURL: 'https://api.openai.com/v1',
  apiKey: 'your-api-key',
});
app.listen(3100);
```


## Documentation

* [Server Usage Guide](https://docs.opentiny.design/genui-sdk/guide/server-usage)

## API

* [Server API](https://docs.opentiny.design/genui-sdk/components/server/api)
npm package: @opentiny/genui-sdk-vue
Description: A Vue3 component library for enhanced LLM display and interaction
Author: OpenTiny Team
Latest version: 1.1.1

# @opentiny/genui-sdk-vue


A Vue 3 component library for enhanced LLM display and interaction. Stream AI-generated structured output into OpenTiny interactive UI components with bidirectional conversation support.

* **Streaming Rendering:** Content renders progressively as the model generates—no long waits for full responses.
* **Structured Output:** LLM output conforms to JSON Schema, enabling reliable parsing and rendering.
* **Interaction:** User actions (form submit, button click) feed back into the conversation context for seamless multi-turn flows.

[Learn more about GenUI SDK](https://opentiny.design/genui-sdk).

## Usage

```vue
<script setup>
import { GenuiChat, GenuiConfigProvider } from '@opentiny/genui-sdk-vue';
</script>

<template>
  <GenuiConfigProvider theme="dark">
    <GenuiChat
      url="/api/chat"
      model="deepseek-chat"
    />
  </GenuiConfigProvider>
</template>
```
## Documentation

* [quick-start](https://docs.opentiny.design/genui-sdk/guide/quick-start)
* [start-with-render](https://docs.opentiny.design/genui-sdk/guide/start-with-renderer)

## API

* [GenuiRender](https://docs.opentiny.design/genui-sdk/components/renderer)
* [GenuiChat](https://docs.opentiny.design/genui-sdk/components/chat)
* [GenuiConfigProvider](https://docs.opentiny.design/genui-sdk/components/config-provider)
npm package: @opentiny/huicharts
Description: Opentiny HUICharts library for web visualization
Author: HUICharts Team
Latest version: 1.3.1

<p align="center">
  <a href="https://opentiny.design/tiny-vue" target="_blank" rel="noopener noreferrer">
    <img alt="OpenTiny Logo" src="logo.svg" height="100" style="max-width:100%;">
  </a>
</p>

<p align="center">OpenTiny HUICharts is a powerful set of front-end visualization chart libraries, which provides more than 40 chart components for web developers. It supports a variety of capabilities such as theme customization, responsiveness, and accessibility, and is fully compatible with ECharts's API.</p>

English | [简体中文](README.zh-CN.md)

🌈 Features:

- 📦  Contains over 40 concise and easy-to-use chart components
- 🖖  One set of code supports Vue, Angular, and React frameworks simultaneously
- 🎨  Integrate multiple theme specifications and support theme customization
- 💡  Integrated features such as adaptive, performance improvement, accessibility, and scale optimization

## 🛠️ Usage

### 1. Installation

1. Prepare the environment. Ensure that Node.js is installed and the Node.js version is 10.13 or later. Run the `node -v` command to check the node version.
2. Check the current version of the library `npm show @opentiny/huicharts`.
3. Use the NPM to install the component library of the latest version: `npm install @opentiny/huicharts@latest --save`.

### 2. Import component

```javascript
// Refer to the chart library.
import HuiCharts from '@opentiny/huicharts';

// Create a chart container.
<div id="main" style="width: 600px;height:400px;"></div>

// Create a chart instance.
let chartIns = new HuiCharts();

// Initialize the chart container.
let chartContainerDom = document.getElementById('main');
chartIns.init(chartContainerDom);

// Enter the chart configuration items.
let chartOption = {...};
// Specify the chart type, such as LineChart, AreaChart, BarChart, PieChart, GaugeChart, RadarChart, ProcessChart, and BubbleChart.
// The English name of the chart type can be viewed in the menu bar on the left of the document.
let chartType = 'LineChart';
chartIns.setSimpleOption(chartType, chartOption);

// Start rendering.
chartIns.render();
```

## 🖥️ Development

```shell
git clone git@github.com:opentiny/tiny-charts.git
cd tiny-charts
npm i

# start project
npm run dev
```

打开浏览器访问：[http://localhost:8080/](http://localhost:8080/)

## Contributing

Welcome to join our OpenTiny community!🎉

If you don't know how to start, please read our [contributing guide](CONTRIBUTING.md).

- Add the official assistant WeChat `opentiny-official` and join the technical exchange group.
- Add to the mailing list `opentiny@googlegroups.com`
## License

[MIT](LICENSE)
npm package: @opentiny/icons
Description: Opentiny Design Icons
Latest version: 0.1.4

# Opentiny 图标库 

`OpenTiny Icons`图标库是`Opentiny Design`团队开源的基础图标，以及华为云服务图标和服务扩展图标。

## 安装 Installation

```
npm install @opentiny/icons

```
## 浏览图标 Browser Icons

[在线预览](https://opentiny.github.io/icons)

# 开发指南
 
将设计师提供的图标导入`svgs` 目录， 文件夹及文件名必须符合以下要求：

1. 子目录名称为大分类，每次增加大分类文件夹后，需要在 `index.html` 中的分类下拉列表中，添加相应的名称
2. 分类目录的子目录名为“图标组名”， 用数字控制组名的排序。
3. 文件名必须符合： 排序#中文名-英文名.svg 的格式，不允许有特殊字符

图标导入时需要检查，以免导入不符合规范的图标：

1. 图标尺寸是否规范， 是否正方形，是否固定内边距；
2. 不需要顶部的 < ?xml version="1.0" encoding="utf-8"? >
3. 单色图标需要 fill="currentColor"
4. 图标内不允许有 <image> 标签

## 已知问题和约束

- `svg` 文件名涉及专有服务名时，可以大写，但是受`@unocss/preset-icons` 库的限制，它不支持图标类名大写，所以导出的图标名称统一为小写。