コンテンツにスキップ

チャット機能

StoryCodeWizardのチャット機能の詳細な使用方法とベストプラクティスを説明します。

チャット機能の概要

チャット機能では以下が可能です：

  • 複数LLMモデルとの対話
  • ストリーミング応答表示
  • Markdown形式での応答表示
  • ファイル添付（JPEG画像）
  • プロジェクト連携したコード生成
  • リアルタイム応答更新

インターフェース

左側パネル（Chat Configuration）

  • プロジェクト選択: 作業対象のプロジェクトを選択します。
  • プロジェクト説明: 選択したプロジェクトの概要や目的が表示され、作業コンテキストの把握を助けます。
  • LLMモデル選択: gpt-4o, claude-3-opus-20240229 など、利用可能なAIモデルを選択します。
  • Programming Type選択: プロジェクトで使用する開発言語やフレームワーク（例: Next.js_Agent, CustomTkinter_Agent）を選択します。プロジェクト選択時に自動で設定されます。
  • ファイルアップロード: JPEG または PNG 形式の画像をAIへの入力として添付できます。
  • 要求入力エリア: AIへの指示や質問を具体的に入力します。
  • コード生成をリクエストボタン: 入力された情報に基づいてAIに応答を要求します。処理中は「処理中...」と表示されます。

右側パネル（Chat Display）

  • AI応答表示エリア: AIからの応答がリアルタイムでストリーミング表示されます。
  • Markdownレンダリング: コードブロック、リスト、強調表示など、Markdown記法が美しく表示されます。
  • 表示切替: AI応答のMarkdown表示とRaw Text表示を切り替え可能です。
  • プロジェクト反映ボタン: AIが生成したコードを、選択中のプロジェクトの適切なディレクトリに適用します（ストリーミング完了後に表示）。

基本的な使い方

  1. プロジェクト選択: 左側パネルで作業対象のプロジェクトを選択します。選択したプロジェクトの説明が表示されます。
  2. モデル選択: 使用するLLMモデルを選択します。
  3. Programming Type確認: プロジェクトに基づいて自動設定されたProgramming Typeを確認します。必要に応じて変更も可能です。
  4. ファイル添付 (任意): 必要であれば、関連する画像ファイルをアップロードします。
  5. 要求入力: AIに実行してほしいタスクや質問を具体的に記述します。 
    例:
Pythonで簡単な電卓アプリを作成してください。
足し算、引き算、掛け算、割り算の機能が必要です。
UIはCustomTkinterを使用してください。
  6. リクエスト実行: 「コード生成をリクエスト」ボタンをクリックします。
  7. 応答確認: 右側パネルにAIからの応答がリアルタイムで表示されます。
  8. プロジェクト反映 (任意): 生成されたコードが適切であれば、「プロジェクトに反映」ボタンをクリックしてプロジェクトに適用します。

高度な機能

ストリーミング表示

AIの応答は、生成され次第リアルタイムで表示されます。これにより、長文の応答でも待たずに内容を確認し始めることができます。

Markdown表示とRaw Text表示

AIの応答はデフォルトでMarkdown形式で表示され、コードのシンタックスハイライトやリスト表示など、可読性が向上します。 「📝 Raw Text」ボタンでプレーンなテキスト表示に切り替えることも可能です。

プロジェクトへの自動反映

「プロジェクトに反映」ボタンを使用すると、AIが生成したコード（通常はMarkdown内のコードブロック）を解析し、指定されたファイルパスに基づいてプロジェクトディレクトリ内にファイルを作成・更新します。

プロジェクト反映時の注意

プロジェクト反映機能は、既存のファイルを上書きする可能性があります。 重要なファイルが上書きされないよう、AIへの指示（特にファイルパス指定）には十分注意してください。 事前にバージョン管理システム（Gitなど）でコミットしておくことを推奨します。

ベストプラクティス

  • 明確な指示: AIには具体的で明確な指示を与えましょう。曖昧な指示は期待通りの結果を得られないことがあります。
  • コンテキストの提供: 必要に応じて、既存のコード片や関連情報を要求入力に含めることで、AIの理解を助けます。
  • 段階的な開発:複雑な機能は一度に要求せず、小さな単位に分割して段階的に開発を進めましょう。
  • 適切なProgramming Typeの選択: プロジェクトの特性に合ったProgramming Typeを選択することで、より適切なコード生成が期待できます。
  • ファイル名の確認: プロジェクト反映機能を使用する際は、AIが提案するファイル名やパスが適切であることを確認してください。