Langui: AIユーザーインターフェイスコンポーネントのオープンソースライブラリ

はじめに

LangbaseIncのLanguiは、生成AIや大規模言語モデリング（LLM）プロジェクトのために設計されたオープンソースのユーザーインターフェースコンポーネントライブラリです。Langui の目標は、AI プロジェクトのフロントエンド開発を簡素化し、開発者がゼロからユーザインタフェースを設計・実装することなく、コア機能の実装に集中できるようにすることです。Languiは様々なAIフレームワークやツールをサポートしているだけでなく、あらゆる規模のAIプロジェクトに対してカスタマイズや拡張が可能です。

機能一覧

• ビルド済みUIコンポーネントTailwind CSSをベースとした様々なビルド済みコンポーネントを提供し、素早く簡単に統合できます。
• ジェネレーティブAIサポートGPTや他の生成AIモデルのために設計されたコンポーネントで、複雑なAIインタラクションをサポートします。
• 高さはカスタマイズ可能コンポーネントは、さまざまなプロジェクトのニーズに合わせて高度にカスタマイズ可能です。
• クロスプラットフォームの互換性複数のAIフレームワークとツールをサポートし、クロスプラットフォームの互換性を確保。
• オープンソースコミュニティ継続的なサポートとアップデートを提供する活発なオープンソースコミュニティ。

ヘルプの使用

設置プロセス

1. クローン倉庫まず、Languiリポジトリをローカルにクローンする。

   git clone https://github.com/LangbaseInc/langui.git

2. 依存関係のインストールプロジェクト・ディレクトリに移動し、必要な依存関係をインストールする。

   cd langui
npm install

3. ランニング・プロジェクト開発サーバーを起動して、コンポーネント・ライブラリのサンプルとドキュメントをご覧ください。

   npmスタート

使用ガイドライン

1. コンポーネントの紹介あなたのプロジェクトにLanguiのコンポーネントを導入してください。

   import { Button, Card } from 'langui' ；

2. カスタムスタイルTailwind CSSクラス名を使用したカスタムコンポーネントのスタイリング。

   私をクリックしてください。

3. 統合されたAI機能GPTのような生成AIモデルを組み合わせて、複雑なAIの相互作用を実現する。

   langui' から { GPTComponent } をインポートします；
。

詳細な機能操作の流れ

1. 新しいコンポーネントの作成プロジェクトの要件に基づいて新しいUIコンポーネントを作成します。

   インポート 反応 from 'react'；
import { useLangui } from 'langui'；
const CustomComponent = () => { カスタムコンポーネント
const { useComponent } = useLangui()；
return 
{useComponent('custom')}
；
}; }
export default CustomComponent.

2. 既存プロジェクトへの統合既存のReactプロジェクトにLanguiコンポーネントを統合し、プロジェクトのUIとインタラクション体験を強化する。

   import React from 'react'；
import { Button } from 'langui'；
const App = () => (
<div>
<button>クリック</button>
</div>
);
エクスポート デフォルト App.

3. オープンソースコミュニティへの参加課題提出やプルリクエストを通じて、Languiの開発や改善に参加する。

   git checkout -b feature/new-component
git commit -m "新しいコンポーネントを追加"
git push origin feature/new-component