@flexkit/studio

中文文档
0.2.44发布于 2026/11/15MITTypeScriptES Module构建来源已验证近 30 天下载 7041

Flexkit Studio - the React workspace for Flexkit, the AI operating system for e-commerce: connected business data, context, automations and agents

原始使用文档
文档目录14 节
  1. One system, six layers
  2. What you get
  3. Works where you already work
  4. For developers
  5. Packages
  6. Getting started
  7. Define your schema
  8. Mount the Studio
  9. Add custom tools (optional)
  10. Security and data
  11. Contributing
  12. Reporting Issues
  13. License
  14. Security
Flexkit logo

Flexkit

NPM version License Join the community on GitHub

The AI operating system for e-commerce.

Your data, context, workflows and agents in one system. Flexkit connects the tools you already use, learns how your store works, runs it around the clock and gets smarter with every outcome.

This repository holds the open-source parts of Flexkit: the Studio (a React app you can mount inside your own app), the CLI and the SDK for defining your data model and your own agent tools. They are MIT-licensed. The data backend and the agent are hosted by Flexkit.

Website · Documentation · Discussions

One system, six layers

Flexkit holds your business data and the context around it. It picks the right model for each task and runs agents across the tools you already use. Your team sets the limits.

LayerWhat it does
DataYour products, orders, customers and suppliers as linked records, so agents see how everything connects.
ContextYour documents, written rules and past decisions, so agents cite their sources and work the way your team does.
ModelsModels from OpenAI, Anthropic, Google and xAI. Flexkit picks one for each task, or you choose your own.
AgentsAutomations that run on a schedule or a trigger, and ask first before changing what you have not allowed.
ConnectionsPlugins from Shopify and Stripe to Slack and Google Workspace, plus access from Claude, ChatGPT and any MCP client.
ControlRoles set what each person can do, spaces set what they can see, and every run leaves a transcript to read.

What you get

  • Your business, connected. Flexkit stores your business as a graph of the records you choose (products, orders, customers, suppliers or anything else) with the relationships between them as first-class data. An agent answers by walking that graph, from a low-stock alert to the open orders it affects to the supplier who can refill it.
  • Keep your systems, connect their data. Your shop, ERP and CRM stay where they are. Sync what matters to Flexkit through its GraphQL API or a plugin, and Flexkit links it into one record.
  • It learns how your business works. Drop in supplier PDFs, return policies and price lists, and the agent reads them and cites the passage. Write your rules once as skills, and every chat and automation follows them. What the team keeps agreeing on becomes shared memory.
  • Ask anything, get a real answer. The agent answers from your own records, querying the live data each time. It charts the result, exports it as a file, and changes records once you approve. When it needs a decision, it asks instead of guessing.
  • Runs your business around the clock. Anything you would ask twice can run on its own: every morning, when an order comes in, when stock drops, or when another system sends a signal. Results go to Slack or Teams, and changes you have not allowed wait for a yes.
  • The right model for each job. A quick model for a lookup, a stronger one for a long run. Choose a model yourself for any chat or automation, and switch the day a better one ships.
  • Your team stays in control. Five built-in roles say what someone may do. Spaces say what they may see, down to a single field, and the same rule holds in tables, in chat, in automations, in the API and in AI clients.

And everything around it:

  • Describe your business, get a data model. The agent proposes the record types and the links between them; nothing changes until you approve.
  • One record, every market. Keep a price, a name or a description per market or language, with a default to fall back on.
  • A thousand records in one ask. Reprice a collection or retag a season. Flexkit counts what will change first and runs it in the background once you approve.
  • Reports you can send. Ask for a report and get a page or a PDF, with a link that keeps working.
  • Type it, say it or attach it. Dictate a question, or drop in a photo, a spreadsheet or a supplier's PDF and ask about what is in it.

Works where you already work

Flexkit runs in the browser, as a desktop app for macOS and Windows, inside your own React app, and inside Claude, ChatGPT, Cursor or any MCP client (signed in with your Flexkit account, with your role and spaces applied).

Plugins connect it to Shopify, Slack, Microsoft Teams, Notion, Stripe (preview), Google Workspace (preview), Axiom and Tinybird, so the agent can read and act in the tools your team already uses. Developers can add their own tools from code.

For developers

  • The data model in code. Define it in flexkit.config.ts and deploy it from the terminal.
  • A GraphQL API for everything, generated from your data model.
  • Your own tools behind the agent. Expose server-side functions from your app as tools and code skills.
  • A CLI for records, queries, automations, skills, knowledge, plugins, logs, tokens and more. See the CLI README.

Packages

PackageDescription
@flexkit/studioThe Studio: tables, record editing, chat, automations and the rest of the workspace as a React component.
@flexkit/schemadefineConfig / defineEntity and the serializer that turns flexkit.config.ts into the deployable schema.
@flexkit/toolsDefine, serve and run custom tools and code skills from your own server.
@flexkit/cliThe flexkit command-line interface.
@flexkit/agent-protocolSchemas and types shared between the agent platform and the Studio UI.

The apps folder has the desktop app, the hosted Studio, and example host apps for Next.js, Astro and TanStack Start.

Getting started

Visit flexkit.io/docs for the full documentation.

npm install --global @flexkit/cli
flexkit login
flexkit link      # link this folder to a project
flexkit deploy    # deploy the schema from flexkit.config.ts

Define your schema

flexkit.config.ts is pure data: no React, no JSX. Icons are Lucide icon names in PascalCase and validation is a function that receives Zod.

// flexkit.config.ts
import { defineConfig, defineEntity } from '@flexkit/schema';

const products = defineEntity({
  name: 'product',
  plural: 'products',
  display: 'name',
  menu: { label: 'Products', group: 'catalog', icon: 'Tag' },
  attributes: [
    {
      name: 'name',
      label: 'Name',
      scope: 'local',
      dataType: 'string',
      inputType: 'text',
      searchable: true,
      validation: (z) => z.string().min(1, { error: 'Name is required' }),
      defaultValue: '',
    },
    {
      name: 'stock',
      label: 'Stock',
      scope: 'global',
      dataType: 'int',
      inputType: 'number',
      validation: (z) => z.number().int().min(0),
      defaultValue: 0,
    },
  ],
});

export default defineConfig({
  projectId: 'your-project-id',
  title: 'Atlas Commerce',
  menuGroups: [{ name: 'catalog', title: 'Catalog' }],
  scopes: [{ name: 'default', label: 'Default', isDefault: true }],
  spaces: [{ code: 'mkt', label: 'Marketing' }],
  schema: [products],
});

Mount the Studio

The Studio renders the deployed schema; run flexkit deploy after editing flexkit.config.ts. The host app never imports the config, it only passes the project ids:

import { FlexkitStudio } from '@flexkit/studio';
import '@flexkit/studio/styles.css';

export default function Studio() {
  return <FlexkitStudio projectIds={['your-project-id']} basename="/studio" />;
}

basename is the path the Studio is mounted under; omit it when the Studio lives at /.

Add custom tools (optional)

Tools and code skills let the Flexkit agent call your own server-side code. Define them in flexkit.tools.ts with @flexkit/tools, serve them from any HTTPS route with createToolsHandler, and run flexkit dev while developing. See the custom tools guide.

import { defineTool, defineTools } from '@flexkit/tools';
import { z } from 'zod';

export default defineTools({
  tools: [
    defineTool({
      name: 'ping',
      description: 'Echo a message from the app runtime.',
      input: z.object({ message: z.string() }),
      execute: async ({ message }) => ({ echo: message }),
    }),
  ],
});

Security and data

  • Business data is hosted in the EU and is never used to train models.
  • Credentials for connected tools are encrypted with AES-256-GCM.
  • Every proposed change leaves an approval record, every automation run a transcript, and every schema deploy a history entry.
  • Export the whole project, records and files, as one archive that re-imports cleanly.

Contributing

Contributions to Flexkit are welcome and highly appreciated. However, before you jump right into it, we would like you to review our Contribution Guidelines to make sure you have a smooth experience contributing to Flexkit.

Reporting Issues

Found a bug? Have a feature request?

Open an issue with: • Repro steps • Expected vs actual behavior • Screenshots when helpful • Schema snippet (if relevant)

License

This project is licensed under the MIT license.

See LICENSE for more information.


Security

If you believe you have found a security vulnerability in Flexkit, we encourage you to responsibly disclose this and NOT open a public issue.

See SECURITY.md for how to report.

版本与发布记录

@flexkit/studio 共发布 82 个版本,首次发布于 2025/11/28;过去 12 个月发布了 82 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
0.2.44latest2026/11/15今天
0.2.432026/11/15今天
0.2.422026/11/151 天前
0.2.412026/11/151 天前
0.2.402026/11/142 天前
0.2.392026/11/124 天前

关于 @flexkit/studio 的常见问题

@flexkit/studio 是什么?

Flexkit Studio - the React workspace for Flexkit, the AI operating system for e-commerce: connected business data, context, automations and agents

如何安装 @flexkit/studio?

在项目目录运行 npm install @flexkit/studio,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^19.0.0)、react-dom(^19.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@flexkit/studio 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@flexkit/studio 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@flexkit/studio 需要什么版本的 Node.js?

package.json 的 engines 字段要求 Node.js >=20.9.0。版本不符时 npm 默认只给出警告,开启 engine-strict 后会拒绝安装。

@flexkit/studio 可以商用吗?

@flexkit/studio 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@flexkit/studio 的下载量有多少?

根据 npm 官方下载统计,@flexkit/studio 在 2026/10/15 – 2026/11/13 这 30 天内被下载 7,041 次,日均约 235 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@flexkit/studio 还在维护吗?

最新版本 0.2.44 发布于 2026/11/15(今天);至今共发布 82 个版本,其中过去 12 个月发布了 82 个;首次发布于 2025/11/28。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。