Fillo

ウェブサイト · ドキュメント · エージェント · サンプル · 変更履歴

Fillo SDK

Fillo はヘッドレスのフォームインフラストラクチャです。ホストされたエディターでフォームを作成するか、コードで定義し、iframe を埋め込む代わりに、React、Vue、Svelte、Astro、またはプレーンなブラウザー JavaScript を使って、独自の UI で自社製品内に表示します。共通のスキーマがビルダー、レンダラー、API のバリデーション、回答一覧を連携させるため、フォームはアプリの一部のような見た目と動作になります。

ファイルはブラウザーから直接、お客様が所有するストレージ（Google Drive、Box、または S3 互換バケット）にアップロードされ、プロバイダーが対応している場合は再開可能です。回答は、検索、ファイルのダウンロード、詳細ドロワー、CSV エクスポートに対応したスキーマ対応の一覧に保存され、署名付き Webhook、Google Sheets、Notion、Zapier、またはメールで配信できます。

このリポジトリには、公開 SDK パッケージとコーディングエージェント用スキルが含まれています。製品本体は**fillo.so**にあります。

パッケージ

パッケージ	npm	内容
@usefillo/core	npm · packages/core	フレームワークに依存しないフォームスキーマ、バリデーション、条件付きロジックエンジン、事前入力、フォーマット処理、JS クライアント、ブラウザーから直接アップロードするプロトコルです。フレームワークへの依存はありません。
@usefillo/react	npm · packages/react	ヘッドレスの React レンダラー、フック、アップロード UI、オーバーライドまたは置き換え可能なオプションのデフォルトスタイルシートです。
@usefillo/dom	npm · packages/dom	フレームワークに依存しない DOM レンダラー、カスタム要素、Vue、Svelte、Astro、バニラアプリ向けのスタンドアロンブラウザーバンドルです。
@usefillo/cli	npm · packages/cli	fillo — ワークスペースの開始、フォームのステージングと公開、ターミナルからの Agent Skill のインストールを行います。
@usefillo/mcp	npm · packages/mcp	MCP サーバー — コーディングエージェントからフォームの準備、ひな形の作成、公開、クエリを行います。

標準のコーディングエージェントスキル（CLI がインストールするものと同じバンドル）は、plugins/fillo/skills/build-with-fillo にあります。すべてのパッケージは MIT ライセンスです。

クイックスタート

レンダラーをインストールし、公開済みのフォームをアプリに追加します。@usefillo/react と @usefillo/dom はどちらも必要な @usefillo/core の機能を再エクスポートするため、core を直接インストールする必要はほとんどありません。

// React / Next.js
import { FilloForm } from "@usefillo/react";
import "@usefillo/react/styles.css"; // optional default theme — or bring your own

<FilloForm formId="cust-feedback" onSubmitted={(responseId) => confetti()} />

// Vue, Svelte, Astro, or plain browser JavaScript
import { createClient, defineForm, renderForm } from "@usefillo/dom";
import "@usefillo/dom/styles.css";

const client = createClient({ key: "pk_live_…" });
const form = defineForm({
  id: "cust-feedback",
  pages: [{ id: "p1", blocks: [
    { id: "email", kind: "email", label: "Work email", required: true },
    { id: "message", kind: "long_text", label: "What should we know?" },
  ] }],
});

renderForm("#fillo-form", { form, client, onSubmitted: (id) => console.log(id) });

コーディングエージェントを使った構築

Fillo には、Fillo フォームの構築、埋め込み、スタイル設定、同期、検証方法をエージェントに教える、プロバイダーに依存しない Agent Skill が含まれています。プロジェクトにインストールします。

npx @usefillo/cli@latest skill install

Claude Code または Codex では、このリポジトリはプラグインマーケットプレイスとしても利用できます。プラグインには、スキルとホスト型の Fillo MCP サーバーが含まれています。

/plugin marketplace add jacobfunch/usefillo
/plugin install fillo@fillo

続いて、セットアップフローをエージェントに指示します。製品から Build with AI の引き継ぎを行うと、CLI によって、スキルをインストールし、実行 1 回でライブワークスペースに接続する npx @usefillo/cli agent bootstrap … という1行のコマンドも表示されます。エージェントの利用手順全体については fillo.so/agents を、リファレンスについては fillo.so/docs をご覧ください。

リンク

• ウェブサイト — fillo.so
• ドキュメント — fillo.so/docs
• エージェント — fillo.so/agents
• サンプル — fillo.so/examples
• 変更履歴 — fillo.so/changelog

このリポジトリについて

このリポジトリは、公開 SDK パッケージの読み取り専用ミラーです。パッケージは非公開のモノレポで開発され、リリース時にここへミラーされるため、ここにあるコードは npm で公開されるコードと同じです。このリポジトリの履歴は使い捨てです。リリースごとに自動ジョブがミラーに強制プッシュするため、特定のコミットがそのまま維持されることを期待してフォークしないでください。代わりに npm パッケージに依存してください。

問題や質問はこちらで受け付けています。CONTRIBUTING.mdをご覧ください。パッケージのコードに対するプルリクエストは、ソースが上流にあるため直接マージできません。問題を報告していただければ、非公開リポジトリを通じて修正を反映します。

アカウント名について。 usefillo GitHub 組織の取得手続き中のため、このミラーは現在 github.com/jacobfunch/usefillo にあります。取得後、リポジトリは組織に移管されます。GitHub は旧パスからのリダイレクトを維持するため、既存のリンクやクローンは引き続き機能します。