AutoSugges

Name: AutoSugges
Author: autosugges

本地服务

autosugges.com开发工具06 天前更新

代码仓库访问官网

关于 AutoSugges

AutoSugges 为表单开发者提供自动补全 API 和界面组件，覆盖边缘服务的参考数据集，并支持 React、React Native 和纯 HTML。

主要功能

01参考数据集自动补全
02React 和 Next.js 组件
03React Native 界面组件
04纯 HTML 集成
05服务端定义选择行为

适用场景

01在表单中添加国家或机场字段
02提供 NAICS 或货币建议
03构建多选参考列表输入框

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "autosugges-autosugges": {
      "command": "npx",
      "args": [
        "-y",
        "@autosugges/mcp"
      ],
      "env": {
        "AUTOSUGGES_PUBLISHABLE_KEY": "<AUTOSUGGES_PUBLISHABLE_KEY>",
        "AUTOSUGGES_RUNTIME_URL": "<AUTOSUGGES_RUNTIME_URL>"
      }
    }
  }
}

启动命令npx -y @autosugges/mcp

需要配置的环境变量

AUTOSUGGES_PUBLISHABLE_KEY密钥Publishable key (pk_live_...) for the list to search. Free at https://app.autosugges.com. Required for search_list.

AUTOSUGGES_RUNTIME_URLRuntime origin.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@autosugges/mcp0.1.1stdio

工具

收录的工具列表 · 更新于 5 天前

参数	类型	必填	说明
list	string	否	仅供参考的列表名称或 slug。已配置的密钥决定选择哪个列表。
limit	integer	否	建议数量上限；受列表策略限制。
query	string	是	目前输入的文本；至少 2 个字符。
locale	string	否	用于显示值的 BCP-47 标签，例如 "fr"。
parent	string	否	父项的项目 id（仅适用于分层列表），用于将结果限制为其后代项。

详细介绍

@autosugges/client

AutoSugges：边缘自动补全 API + 免费参考数据集（国家、NAICS、机场、货币……），通过一个 React / React Native / HTML 组件提供。

文档：https://docs.autosugges.com · 数据集：https://autosugges.com

npm i @autosugges/client

将 YOUR_PUBLISHABLE_KEY 替换为从 https://app.autosugges.com 获取的免费密钥——每个列表对应一个密钥，且仅限在你网站的来源上使用。公开密钥可安全地用于浏览器。

React / Next.js

'use client';
import { useState } from 'react';
import { AutoSugges } from '@autosugges/client/react';
import { AutosuggesProvider, type AutoSuggesValue } from '@autosugges/client/react-core';

export function CountryField() {
  const [country, setCountry] = useState<AutoSuggesValue>(null);
  return (
    <AutosuggesProvider lists={{ countries: 'YOUR_PUBLISHABLE_KEY' }}>
      <AutoSugges list="countries" value={country} onChange={setCountry} />
    </AutosuggesProvider>
  );
}

value 是完整的已选项目（多选列表中为数组）。行为——最少字符数、防抖、可创建项目、多选——由列表的服务器策略决定； overrides 只能收窄这些设置。

Expo / React Native

import { AutoSugges } from '@autosugges/client/native-ui';
import { AutosuggesProvider } from '@autosugges/client/react-core';
// same props as web: <AutoSugges list="countries" value={value} onChange={setValue} />

底部工作表展示方式的可选 peer 依赖：@gorhom/bottom-sheet、 react-native-gesture-handler、react-native-reanimated。

纯 HTML

<script src="https://cdn.jsdelivr.net/npm/@autosugges/client/dist/browser/autosugges.js"></script>
<input
  data-autosugges-key="YOUR_PUBLISHABLE_KEY"
  data-autosugges-base-url="https://runtime.autosugges.com"
  data-autosugges-placeholder="Country"
/>

使用 SRI 哈希的自托管副本：https://autosugges.com/sdk/v1/autosugges.js。其他属性： data-autosugges-theme（light|dark）、-locale、-label、-parent、-access-token。稍后注入标记后，调用 window.AutoSugges.autoInit()。