ウェブ検索

研究は、タスクリストに対比:その1つは、エージェントがやった作業をログアウトする場所, それが行ったこのログ. 各ステップは、それが実行または開いたページクエリです, そして、そのソースに一度何か枝を発見したステップ, 重複サイトマークとして示されているので、Redditスレッドは、ドメインを解析することなく、一つとして読みます.

チャットで

メッセージを送信すると、トレイルが始まり、ソースはユーザのターンの下に流れ、応答が待ちます。 onComplete. これは、その明らかに、そのクリッピングエッジとタスクリストで曲線ガイドを共有するので、2つは2つの異なる製品のように見ずに1つのスレッドに座ることができます。

検索を開始するためにメッセージを送信する。

インストール

ウェブ検索はBoardUI Proに含まれています。

ダークモード対応:この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

プロアクセス

ウェブ検索 プロです コンポーネント.

BoardUI Proライセンスは、このライセンスを解除します。 コンポーネント と、そのすべてのソースファイル。ライセンスを有効化すると、CLIでプロジェクトに直接インストールできます。

01

ライセンスを有効化

Lemon Squeezyの購入メールにあるキーを使ってください。端末ごとに1回設定すれば完了です。

npx boardui@latest login YOUR_LICENSE_KEY
02

インストール コンポーネント

CLIがソースをコピーし、BoardUIとnpmの依存関係をすべて解決します。

npx boardui@latest add web-search

詳しくはこちら コンポーネント BoardUI Proに含まれているもの

今すぐBoardUI Proを入手し、インストールしてください。

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー&ペーストの例は、標準のインポートを使います。

ソース

ステップを贈る sources そして、それは、マークをオーバーラップスタックとして運ぶソースの列に一度、枝. 5つのURLの表は、スレッドに表示することができ、誰もそれを中回して読むことができない最も重いことです。. 読者が一目で望んでいるものは、エージェントが見ているところです, 再構成可能なマークは即座に答えます. 各ホバーにそのタイトルとドメインを運びます, あなたは、その隣人をクリア持ち上げます, そして、あなたが通過したときにリンクになります href. 過去6、残りはカウントに崩壊します。

{ label: "Component library pricing", meta: "5 results", sources: [ { title: "Tailwind UI vs building your own", domain: "www.reddit.com", brand: "reddit", href: "…" }, { title: "We shipped our design system in 6 weeks", domain: "www.linkedin.com", brand: "linkedin" }, { title: "shadcn/ui — the registry model", domain: "github.com", brand: "github" }, ],}

サイトマーク

brand 同じ24のマークからサイトの実際のロゴを描画すると、サイトの独自の色で、ソーシャルボタンが使用されます。 ブランドのカラーが黒色になり、テーマに反転する便利な機能で、独自のガイドラインが要求されます。 そのセットに含まれていないものは、プレーンを取ります アイコン.

// Any of the 24 marks the design system already draws.{ label: "Searched Reddit for", query: "component library", brand: "reddit" }{ label: "Searched X for", query: "design tokens", brand: "x" }{ label: "Checked the repo", brand: "github" } // Anything else takes a plain icon instead.{ label: "Ran 3 searches", icon: RiSearchLine }

パッシング

キャッシュと5ページをクロールする1つを同時に取得しない検索と、作業が起こっているのではなく、一定のテンポでマーチするログが印刷されているリストとして読み込まれます。 ステップを贈る dwell そして、トレイルは、次の1つの土地の前に、しばらくの間、全体を震え、はるかに長く保持しています。 ソースが2つに分割するステップ:ステップは、そのソースは後でビートを漕ぐ。

検索が実行されている間, エージェントの思考インジケータは、トレイルの尾に座って、各ステップの土地として下に移動します, ログは、常に最後のものではなく、上で動作しているものを終了します. これは、実行が完了したときに残します. パス working それをリラベルするために、または false それをドロップする。

const steps = [ { label: "Ran 3 searches", icon: RiSearchLine, heading: true, dwell: 2200 }, { label: "Searching for what teams pay for", meta: "5 results", dwell: 2400, sources }, { label: "Searched X for", query: "design system pricing", brand: "x", dwell: 1900 },];

実際のイベントからそれを運転する

Dwellsは、まだ実際のレイテンシーのためのスタンドインです。 ライブストリームを持っていると、パス revealed 各クエリが解決するにつれて、内部タイマーが切り替わり、すべてのアニメーションが同じままになります。 行をカウントするので、 ソースを運ぶステップは2つです。

// One unit per row, so a step that found sources is two: the step,// then its Sources row a beat later. Advance it as each query resolves// and the internal timer stays out of the way.<WebSearch steps={steps} revealed={rowsSeen} />