building-chat-widgets
インタラクティブなAIチャットウィジェットの構築
ボタン、フォーム、アクションを備えたチャットウィジェットの作成は複雑で文書化されていません。このスキルは、クライアントおよびサーバー側のウィジェット処理、エンティティタグ付け、コンポーザーツールのための完全なパターンを提供し、より迅速にインタラクティブなAIインターフェースを構築できます。
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "building-chat-widgets". Create a button widget that lets users select an item from a list
Resultado esperado:
- Widget template with ListView and clickable ListViewItem components
- Server action handler that processes item selection and updates the widget state
- Client action callback for local state updates after selection
A utilizar "building-chat-widgets". Build a form that submits data to the backend
Resultado esperado:
- Form widget with input fields and submit button
- Server action handler that validates and processes form data
- Synthetic user message creation to trigger agent response
A utilizar "building-chat-widgets". Add @mention functionality for tagging users
Resultado esperado:
- Frontend onTagSearch callback for entity search
- Backend entity converter for @mention replacement
- Interactive entities with onClick handlers for navigation
Auditoria de Segurança
SeguroThis is a pure documentation skill containing only markdown files with code examples. The static analyzer incorrectly flagged markdown code fences as shell backticks and documentation examples as dangerous patterns. All findings are false positives. The only executable file (scripts/verify.py) is a benign file-existence checker with no security implications.
Fatores de risco
⚡ Contém scripts (1)
⚙️ Comandos externos
🌐 Acesso à rede
📁 Acesso ao sistema de arquivos
Pontuação de qualidade
O Que Você Pode Construir
クリック可能なチャットアクションの構築
バックエンドハンドラーにデータをミューテーションするためにアクションを送信するボタンとフォームを作成する
エージェント型チャットインターフェースのデザイン
ユーザーがAI会話内で選択、確認、ナビゲーションできるインタラクティブなウィジェットを構築する
ウィジェットをバックエンドに接続する
ウィジェットの更新、エフェクトのトリガー、エージェント応答の実行を行うサーバーアクションハンドラーを実装する
Tente Estes Prompts
Create a Button widget that dispatches a server action when clicked. Include a ListView with clickable items that select items.
Write a server action handler that processes a form submission, creates a synthetic user message, and triggers the agent response.
Implement entity tagging so users can @mention articles. Show the frontend onTagSearch callback and backend entity conversion.
Create a composer with tool mode selection. Show the TOOL_CHOICES configuration and how the backend routes based on tool_choice metadata.
Melhores Práticas
- 競合を避けるため、同じアクションタイプに対してクライアントとサーバーのアクションを分離する
- データアクセスにはaction.payloadを使用し、action.argumentsは決して使用しない
- UserMessageItem作成時にすべての必須フィールドを含める：id、thread_id、created_at、inference_options
Evitar
- 同じアクションタイプをクライアントとサーバーの両方で処理すると競合状態が発生する
- UserMessageItemに必要なフィールドが不足するとバリデーションエラーが発生する
- ユーザーメッセージコンテンツに'type='text'ではなく'type='input_text'を使用する
Perguntas Frequentes
このスキルはどのプラットフォームでサポートされていますか？
ウィジェットの複雑さに関する制限はありますか？
既存のチャットアプリと統合するにはどうすればよいですか？
ウィジェットを使用する場合、ユーザーデータは安全ですか？
'Action has no attribute arguments'エラーが発生するのはなぜですか？
標準的なチャットUIとどう異なりますか？
Detalhes do Desenvolvedor
Autor
AsmayaseenLicença
MIT
Repositório
https://github.com/Asmayaseen/hackathon-2/tree/main/.claude/skills/building-chat-widgetsReferência
main
Estrutura de arquivos