open-index/open-npm huggingface dataset:
npm package: @page-libs/ajax
Description: Ajax plugin for Page framework.
Author: guseyn
Latest version: 1.1.8

# page-ajax

[![NPM Version](https://img.shields.io/npm/v/@page-libs/ajax.svg)](https://npmjs.org/package/@page-libs/ajax)
[![Build Status](https://travis-ci.org/Guseyn/page-ajax.svg?branch=master)](https://travis-ci.org/Guseyn/page-ajax)
[![codecov](https://codecov.io/gh/Guseyn/page-ajax/branch/master/graph/badge.svg)](https://codecov.io/gh/Guseyn/page-ajax)

Ajax plugin for [Page](https://github.com/Guseyn/page/) framework. It's based on the [Async Tree Pattern](https://github.com/Guseyn/async-tree-patern/blob/master/Async_Tree_Patern.pdf).

## Install

`npm install @page-libs/ajax`

## Run test

`npm test`

## Run build

`npm run build`

Package is already built. So, for using in Page you just need to install it.

# Examples

```js
new ResponseFromAjaxRequest({
  url: 'http://localhost:8000/',
  method: 'GET' 
}).call();

```

# Usage

```js
const {
  // Here needed async objects from the table below
} = require('@page-libs/ajax');
```

| Async Object  | Async/sync call | Parameters(default value/description) | Representation result |
| ------------- | ----------------| ---------- | --------------------- |
| `ResponseBody` | `response.body, response = {statusCode, headers, body}` | `response({statusCode, headers, body})` | [body](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response#Value) |
| `ResponseFromAjaxRequest` | [responseFromAjaxRequest](https://github.com/Guseyn/page-ajax/blob/master/src/custom-calls/responseFromAjaxRequest.js) | `options[, requestBody] (options = {url, method, headers, mimeType, withCredentials, user, password, timeout, progressEvent, uploadProgressEvent},` [requestBody](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send#Parameters)`)` | `response({statusCode, headers, body})` |
| `ResponseHeaders` | `response.headers, response = {statusCode, headers, body}` | `response({statusCode, headers, body})` | `object` |
| `ResponseStatusCode` | `response.statusCode, response = {statusCode, headers, body}` | `response({statusCode, headers, body})` | `number` |
npm package: @page-libs/cli
Description: Command line interface for Page framework.
Author: guseyn
Latest version: 1.1.9

# page-cli

[![NPM Version](https://img.shields.io/npm/v/@page-libs/cli.svg)](https://npmjs.org/package/@page-libs/cli)
[![Build Status](https://travis-ci.org/Guseyn/page-cli.svg?branch=master)](https://travis-ci.org/Guseyn/page-cli)

Command line interface for [Page](https://github.com/Guseyn/page) framework.

## install

`npm install @page-libs/cli -g`

## build

`npm run build`

## commands

* `page create`: creates a new project
* `page update`: upgrades the project to a new version of Page framework
* `page build [evironment][,...otherEnvVars] | page b [evironment][,...otherEnvVars]`: builds the project
* `page run [evironment][,...otherEnvVars] | page r [evironment][,...otherEnvVars]`: runs the project
* `page br [evironment][,...otherEnvVars]`: builds and then runs the project
* `page test`: run tests (via npm)
* `page -v | page --version`: check a version of the Page framework
* `page -h | page --help`: information about commands

By default `environment` is `local`. For more information visit Page [docs](https://github.com/Guseyn/page).
npm package: @page-libs/cutie
Description: Page plugin for using cutie library in browser.
Author: guseyn
Latest version: 1.1.3

# page-cutie

[![NPM Version](https://img.shields.io/npm/v/@page-libs/cutie.svg)](https://npmjs.org/package/@page-libs/cutie)
[![Build Status](https://travis-ci.org/Guseyn/page-cutie.svg?branch=master)](https://travis-ci.org/Guseyn/page-cutie)
[![codecov](https://codecov.io/gh/Guseyn/page-cutie/branch/master/graph/badge.svg)](https://codecov.io/gh/Guseyn/page-cutie)

[Page](https://github.com/Guseyn/page) plugin for using [cutie](https://github.com/Guseyn/cutie) library in browser.  It's based on the [Async Tree Pattern](https://github.com/Guseyn/async-tree-patern/blob/master/Async_Tree_Patern.pdf).

## Install

`npm install @page-libs/cutie`

## Run test

`npm test`

## Run build

`npm run build`

For more information visit [cutie](https://github.com/Guseyn/cutie).
npm package: @page-libs/md2html
Description: Provides async object HtmlFromMd that represents translated html text from markdown text.
Author: guseyn
Latest version: 1.1.4

# page-md2html

[![NPM Version](https://img.shields.io/npm/v/@page-libs/md2html.svg)](https://npmjs.org/package/@page-libs/md2html)
[![Build Status](https://travis-ci.org/Guseyn/page-md2html.svg?branch=master)](https://travis-ci.org/Guseyn/page-md2html)
[![codecov](https://codecov.io/gh/Guseyn/page-md2html/branch/master/graph/badge.svg)](https://codecov.io/gh/Guseyn/page-md2html)

Provides async object `HtmlFromMd` that represents translated `html` text from `markdown` text. This library is based on this [one](https://github.com/showdownjs/showdown) and [Async Tree Pattern](https://github.com/Guseyn/async-tree-patern/blob/master/Async_Tree_Patern.pdf). So it supports regular markdown features.

## Install

`npm install @page-libs/md2html`

## Run test

`npm test`

## Run build

`npm run build`

## Usage

```js

new HtmlFromMd(markdownText).call();

```
npm package: @page-mcp/chat
Description: Embeddable AI Chat Widget with OpenAI-compatible API + Page MCP integration
Latest version: 3.1.0

# @page-mcp/chat

Page MCP 的可嵌入聊天 UI 包。需要一个开箱即用的聊天组件，并且希望它自动发现通过 `@page-mcp/core` 暴露出来的页面能力时，使用这个包。

## 这个包负责什么

- 渲染浏览器聊天组件
- 连接 OpenAI 兼容聊天接口
- 通过共享的 Page MCP bus/client 自动发现 tools 和 prompts
- 同时支持 direct API mode 和 endpoint mode

## 什么时候用它

以下场景使用 `@page-mcp/chat`：

- 你想直接接入一个现成聊天 UI，而不是自己从零写
- 你已经用 `@page-mcp/core` 暴露了 tools/resources/prompts
- 你希望聊天组件自动把这些能力暴露给模型

如果你只需要 MCP 运行时接线，请直接使用 `@page-mcp/core`。

## 安装

```bash
npm install @page-mcp/core
npm install @page-mcp/chat
```

## 最小示例

```ts
import { EventBus, PageMcpHost } from '@page-mcp/core';
import { init } from '@page-mcp/chat';

const bus = new EventBus();

const host = new PageMcpHost({
  name: 'demo-app',
  version: '1.0.0',
  bus,
});

host.registerTool({
  name: 'search_products',
  description: 'Search products by keyword',
  execute: async (input) => [{ keyword: String(input.keyword ?? '') }],
});

host.start();

const widget = init({
  bus,
  openai: {
    apiKey: 'sk-xxx',
    model: 'gpt-5.2',
  },
  title: 'AI Assistant',
  welcomeMessage: 'How can I help?',
});
```

## 两种运行模式

### Direct API Mode

聊天组件直接从浏览器向 OpenAI 兼容接口发请求。

适用场景：

- 可以接受浏览器侧直接访问 API
- 希望接入方式最简单

### Endpoint Mode

聊天组件把请求发给你自己的后端接口。

适用场景：

- 不希望把 API Key 放到浏览器
- 需要后端统一做鉴权、请求整形或观测

## 核心接口

- `init(config)`
  - 创建并挂载聊天组件
- 组件实例方法
  - `open()`
  - `close()`
  - `destroy()`

## 与其他包的关系

- `@page-mcp/core`
  - 提供能力发现所需的 host/client/bus
- `@page-mcp/protocol`
  - 提供 chat engine 内部使用的协议类型

这个包负责 UI 层，不负责底层 MCP 运行时初始化。
npm package: @page-mcp/protocol
Description: Protocol types and constants for Page MCP
Latest version: 3.1.0

# @page-mcp/protocol

Page MCP 的纯协议包。只在你需要共享 MCP / WebMCP / Page MCP 类型与常量，而不想引入运行时实现时使用。

## 这个包负责什么

- 导出共享协议类型
- 导出 MCP 原生方法常量
- 定义 Page MCP 的协议扩展面
- 不包含运行时代码

## 什么时候用它

以下场景使用 `@page-mcp/protocol`：

- 多个项目之间共享协议类型
- 围绕 Page MCP 构建适配层
- 只需要编译期协议契约，不需要 Host/Client/Transport

如果你需要真正运行的 host、client 或 transport，请使用 `@page-mcp/core`。

## 安装

```bash
npm install @page-mcp/protocol
```

## 最小示例

```ts
import type {
  AnthropicMcpTool,
  PageMcpToolDefinition,
  McpRequest,
} from '@page-mcp/protocol';

const tool: PageMcpToolDefinition = {
  name: 'sum',
  description: 'Sum two numbers',
  execute: async (input) => Number(input.a) + Number(input.b),
};

const request: McpRequest = {
  id: '1',
  method: 'tools/list',
};
```

## 核心导出

- `AnthropicMcp*`
  - 面向 MCP 的 tools、resources、prompts 与 JSON schema 类型
- `WebMcp*`
  - WebMCP 的 tool 执行相关类型
- `PageMcp*`
  - Page MCP 的协议扩展类型
- `MCP_METHODS`、`Mcp*`
  - MCP 原生请求/响应与方法常量

## 不包含什么

这个包不包含：

- `PageMcpHost`
- `PageMcpClient`
- transports
- DOM/resource 解析
- polyfill
- 浏览器运行时辅助逻辑

## 与其他包的关系

- `@page-mcp/core`
  - 运行时实现包
- `@page-mcp/webmcp-adapter`
  - 浏览器适配层
- 各框架包
  - 可能会消费或转导这些协议类型
npm package: @page-mcp/react
Description: React adapter for Page MCP SDK — Provider + Hooks
Latest version: 3.1.0

# @page-mcp/react

Page MCP 的 React 集成包。需要通过 Provider 和 hooks 在 React 中自然接入 `PageMcpHost` / `PageMcpClient` 时，使用这个包。

## 这个包负责什么

- 用 React Provider 承载 Page MCP 运行时对象
- 提供获取 host/client 的 hooks
- 提供注册 tools、resources、prompts、skills 的 hooks

## 什么时候用它

以下场景使用 `@page-mcp/react`：

- 你的应用基于 React
- 希望 Page MCP 生命周期跟随 React 组件生命周期
- 希望通过 hooks 注册能力，而不是自己手动接线

如果不在 React 中运行，直接使用 `@page-mcp/core` 即可。

## 安装

```bash
npm install @page-mcp/core
npm install @page-mcp/protocol
npm install @page-mcp/react
```

## 最小示例

```tsx
import { PageMcpProvider, useRegisterTool, usePageMcpClient } from '@page-mcp/react';

function ProductPage() {
  useRegisterTool({
    name: 'search_products',
    description: 'Search products by keyword',
    execute: async (input) => [{ keyword: String(input.keyword ?? '') }],
  });

  const client = usePageMcpClient();

  return <button onClick={() => client.toolsList()}>Inspect tools</button>;
}

export function App() {
  return (
    <PageMcpProvider name="demo-app" version="1.0.0">
      <ProductPage />
    </PageMcpProvider>
  );
}
```

## 核心导出

- `PageMcpProvider`
- `usePageMcpHost()`
- `usePageMcpClient()`
- `usePageMcpBus()`
- `useRegisterTool()`
- `useRegisterResource()`
- `useRegisterPrompt()`
- `useRegisterSkill()`
- `usePageMcpSkills()`

## 与其他包的关系

- `@page-mcp/core`
  - 运行时实现
- `@page-mcp/protocol`
  - 注册定义和元数据所需的协议类型

这个包负责 React 的集成体验，不替代 `core` 本身。
npm package: @page-mcp/vue2
Description: Vue 2 adapter for Page MCP SDK — Plugin + Mixin
Latest version: 3.1.0

# @page-mcp/vue2

Page MCP 的 Vue 2 集成包。需要通过 plugin 和 mixin 这种更符合 Vue 2 的方式接入 Page MCP 时，使用这个包。

## 这个包负责什么

- 提供 Vue 2 plugin
- 提供基于组件选项自动注册的 mixin
- 通过 `this.$pageMcp` 暴露运行时访问入口

## 什么时候用它

以下场景使用 `@page-mcp/vue2`：

- 你的应用基于 Vue 2
- 希望通过组件选项或 mixin 来注册能力
- 希望用 Vue 2 习惯的方式包裹 `@page-mcp/core`

如果不在 Vue 2 中使用，直接用 `@page-mcp/core` 即可。

## 安装

```bash
npm install @page-mcp/core
npm install @page-mcp/protocol
npm install @page-mcp/vue2
```

## 最小示例

```js
import Vue from 'vue';
import { PageMcpPlugin } from '@page-mcp/vue2';

Vue.use(PageMcpPlugin, { name: 'demo-app', version: '1.0.0' });
```

```js
export default {
  pageMcpTools: [
    {
      name: 'search_products',
      description: 'Search products by keyword',
      execute: async function(input) {
        return [{ keyword: String(input.keyword || '') }];
      },
    },
  ],
};
```

## 核心导出

- `PageMcpPlugin`
- `pageMcpMixin`
- 通过 `this.$pageMcp` 访问运行时对象

`this.$pageMcp` 提供：

- `host`
- `client`
- `skills`
- `bus`

## 与其他包的关系

- `@page-mcp/core`
  - 运行时实现
- `@page-mcp/protocol`
  - 注册定义和元数据所需的协议类型

这个包负责 Vue 2 的接入体验，不是底层运行时本身。
npm package: @page-mcp/vue3
Description: Vue 3 adapter for Page MCP SDK — Plugin + Composables
Latest version: 3.1.0

# @page-mcp/vue3

Page MCP 的 Vue 3 集成包。需要通过 plugin、provider 和 composables 在 Vue 3 中自然接入 Page MCP 时，使用这个包。

## 这个包负责什么

- 提供 Vue 3 plugin，适合全局安装
- 提供 provider 组件，适合局部子树使用
- 提供 host/client 访问与能力注册用的 composables

## 什么时候用它

以下场景使用 `@page-mcp/vue3`：

- 你的应用基于 Vue 3
- 希望使用 plugin 或 provider 的接入方式
- 希望通过 composables 注册能力，而不是手动维护 host

如果不在 Vue 中使用，直接用 `@page-mcp/core` 即可。

## 安装

```bash
npm install @page-mcp/core
npm install @page-mcp/protocol
npm install @page-mcp/vue3
```

## 最小示例

```ts
import { createApp } from 'vue';
import { PageMcpPlugin } from '@page-mcp/vue3';
import App from './App.vue';

const app = createApp(App);
app.use(PageMcpPlugin, { name: 'demo-app', version: '1.0.0' });
app.mount('#app');
```

```vue
<script setup lang="ts">
import { useRegisterTool } from '@page-mcp/vue3';

useRegisterTool({
  name: 'search_products',
  description: 'Search products by keyword',
  execute: async (input) => [{ keyword: String(input.keyword ?? '') }],
});
</script>
```

## 核心导出

- `PageMcpPlugin`
- `PageMcpProvider`
- `usePageMcpHost()`
- `usePageMcpClient()`
- `usePageMcpBus()`
- `usePageMcpSkills()`
- `useRegisterTool()`
- `useRegisterResource()`
- `useRegisterPrompt()`
- `useRegisterSkill()`

## 与其他包的关系

- `@page-mcp/core`
  - 运行时实现
- `@page-mcp/protocol`
  - 注册定义和元数据所需的协议类型

这个包负责 Vue 3 的集成体验，不是单独的运行时实现包。
npm package: @page-mcp/webmcp-adapter
Description: WebMCP browser adapter for Page MCP core
Latest version: 3.1.0

# @page-mcp/webmcp-adapter

浏览器侧的 WebMCP 适配包。需要把浏览器风格的 WebMCP 能力注册桥接到 `PageMcpHost`，或者提供 `navigator.modelContext` 风格 polyfill 时，使用这个包。

## 这个包负责什么

- 提供 `installWebMcpPolyfill()`
- 通过 `isWebMcpSupported()` 检测浏览器是否已有原生支持
- 在浏览器侧 WebMCP tool 对象和 Page MCP tool definition 之间做转换

## 什么时候用它

以下场景使用 `@page-mcp/webmcp-adapter`：

- 你希望在浏览器中使用 `navigator.modelContext` 风格的注册方式
- 你需要把浏览器侧 WebMCP tools 桥接到 `PageMcpHost`
- 你需要在 `@page-mcp/core` 之上加一层兼容适配

不要把它当成主运行时包。真正的 host 行为仍然来自 `@page-mcp/core`。

## 安装

```bash
npm install @page-mcp/core
npm install @page-mcp/protocol
npm install @page-mcp/webmcp-adapter
```

## 最小示例

```ts
import { PageMcpHost } from '@page-mcp/core';
import { installWebMcpPolyfill } from '@page-mcp/webmcp-adapter';

const host = new PageMcpHost({
  name: 'demo-app',
  version: '1.0.0',
});

host.start();
installWebMcpPolyfill(host);
```

安装后，浏览器侧代码就可以通过 WebMCP 风格接口注册 tools。

## 核心导出

- `installWebMcpPolyfill()`
- `isWebMcpSupported()`
- `toWebMcpTool()`
- `fromWebMcpTool()`

## 与其他包的关系

- `@page-mcp/core`
  - 提供 `PageMcpHost`
- `@page-mcp/protocol`
  - 提供共享协议类型与常量

真正的运行时执行逻辑在 `core` 中；这个包只负责浏览器适配层。