言語モデルプロンプトを作成する
文字列連結を使用して言語モデルプロンプトを構築することはできますが、機能を構成したり、プロンプトが言語モデルのコンテキストウィンドウ内に確実に収まるようにするのは困難です。これらの制限を克服するには、@vscode/prompt-tsx ライブラリを使用できます。
@vscode/prompt-tsx ライブラリは以下の機能を提供します
- TSXベースのプロンプトレンダリング: TSXコンポーネントを使用してプロンプトを構成することで、プロンプトをより読みやすく、保守しやすくします
- 優先度に基づいた枝刈り: プロンプトの重要度の低い部分を自動的に枝刈りし、モデルのコンテキストウィンドウ内に収まるようにします
- 柔軟なトークン管理:
flexGrow、flexReserve、flexBasisなどのプロパティを使用して、トークンバジェットを協調的に使用します - ツール統合: VS Code の言語モデルツール API と統合します。
全機能の完全な概要と詳細な使用方法については、完全な README を参照してください。
この記事では、ライブラリを使用したプロンプト設計の実践的な例について説明します。これらの例の完全なコードは、prompt-tsx リポジトリで見つけることができます。
会話履歴の優先度を管理する
プロンプトに会話履歴を含めることは、ユーザーが以前のメッセージに対して追跡質問できるようにするため重要です。しかし、履歴は時間とともに大きくなる可能性があるため、その優先度が適切に扱われるようにする必要があります。最も理にかなったパターンは、通常、以下の順序で優先順位を付けることであることがわかりました。
- 基本的なプロンプト指示
- 現在のユーザーのクエリ
- チャット履歴の最後の数ターン
- あらゆるサポートデータ
- 収まるだけの残りの履歴
このため、プロンプトでは履歴を2つの部分に分割し、最近のプロンプトターンを一般的なコンテキスト情報よりも優先させます。
このライブラリでは、ツリー内の各TSXノードは優先度を持っており、これは概念的にzIndexに似ており、数値が大きいほど優先度が高くなります。
ステップ1: HistoryMessages コンポーネントの定義
履歴メッセージをリスト表示するには、HistoryMessages コンポーネントを定義します。この例は良い出発点となりますが、より複雑なデータ型を扱う場合は拡張する必要があるかもしれません。
この例では、PrioritizedList ヘルパーコンポーネントを使用しています。これは、その各子要素に自動的に昇順または降順の優先度を割り当てます。
import {
UserMessage,
AssistantMessage,
PromptElement,
BasePromptElementProps,
PrioritizedList,
} from '@vscode/prompt-tsx';
import { ChatContext, ChatRequestTurn, ChatResponseTurn, ChatResponseMarkdownPart } from 'vscode';
interface IHistoryMessagesProps extends BasePromptElementProps {
history: ChatContext['history'];
}
export class HistoryMessages extends PromptElement<IHistoryMessagesProps> {
render(): PromptPiece {
const history: (UserMessage | AssistantMessage)[] = [];
for (const turn of this.props.history) {
if (turn instanceof ChatRequestTurn) {
history.push(<UserMessage>{turn.prompt}</UserMessage>);
} else if (turn instanceof ChatResponseTurn) {
history.push(
<AssistantMessage name={turn.participant}>
{chatResponseToMarkdown(turn)}
</AssistantMessage>
);
}
}
return (
<PrioritizedList priority={0} descending={false}>
{history}
</PrioritizedList>
);
}
}
ステップ2: Prompt コンポーネントの定義
次に、基本的な指示、ユーザーのクエリ、および適切な優先度を持つ履歴メッセージを含むMyPrompt コンポーネントを定義します。優先度値は兄弟要素間でローカルです。プロンプト内の他の要素に触れる前に、履歴内の古いメッセージをトリミングしたい場合があることを忘れないでください。そのため、2つの<HistoryMessages> 要素に分割する必要があります。
import {
UserMessage,
PromptElement,
BasePromptElementProps,
} from '@vscode/prompt-tsx';
interface IMyPromptProps extends BasePromptElementProps {
history: ChatContext['history'];
userQuery: string;
}
export class MyPrompt extends PromptElement<IMyPromptProps> {
render() {
return (
<>
<UserMessage priority={100}>
Here are your base instructions. They have the highest priority because you want to make
sure they're always included!
</UserMessage>
{/* Older messages in the history have the lowest priority since they're less relevant */}
<HistoryMessages history={this.props.history.slice(0, -2)} priority={0} />
{/* The last 2 history messages are preferred over any workspace context you have below */}
<HistoryMessages history={this.props.history.slice(-2)} priority={80} />
{/* The user query is right behind the based instructions in priority */}
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
<UserMessage priority={70}>
With a slightly lower priority, you can include some contextual data about the workspace
or files here...
</UserMessage>
</>
);
}
}
これにより、ライブラリがプロンプトの他の要素を枝刈りしようとする前に、すべての古い履歴メッセージが枝刈りされるようになります。
ステップ3: History コンポーネントの定義
利用を少し簡単にするため、履歴メッセージをラップし、passPriority 属性を使用してパススルーコンテナとして機能するHistory コンポーネントを定義します。passPriority を使用すると、その子要素は優先順位付けの目的で、含む要素の直接の子であるかのように扱われます。
import { PromptElement, BasePromptElementProps } from '@vscode/prompt-tsx';
interface IHistoryProps extends BasePromptElementProps {
history: ChatContext['history'];
newer: number; // last 2 message priority values
older: number; // previous message priority values
passPriority: true; // require this prop be set!
}
export class History extends PromptElement<IHistoryProps> {
render(): PromptPiece {
return (
<>
<HistoryMessages history={this.props.history.slice(0, -2)} priority={this.props.older} />
<HistoryMessages history={this.props.history.slice(-2)} priority={this.props.newer} />
</>
);
}
}
これで、この単一の要素を使用してチャット履歴を含めることができ、再利用も可能です。
<History history={this.props.history} passPriority older={0} newer={80}/>
ファイルコンテンツを拡張してフィットさせる
この例では、ユーザーが現在見ているすべてのファイルの内容をプロンプトに含めたいとします。これらのファイルは非常に大きくなる可能性があり、すべてを含めるとテキストが枝刈りされてしまうことがあります！この例では、flexGrow プロパティを使用して、ファイルの内容をトークンバジェット内に収まるように協調的にサイズ調整する方法を示します。
ステップ1: 基本的な指示とユーザーのクエリの定義
まず、基本的な指示を含むUserMessage コンポーネントを定義します。
<UserMessage priority={100}>Here are your base instructions.</UserMessage>
次に、UserMessage コンポーネントを使用してユーザーのクエリを含めます。このコンポーネントは、基本的な指示の直後に含まれるように高い優先度を持っています。
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
ステップ2: ファイル内容を含める
これで、FileContext コンポーネントを使用してファイルの内容を含めることができます。基本的な指示、ユーザーのクエリ、および履歴の後にレンダリングされるように、flexGrow の値 1 を割り当てます。
<FileContext priority={70} flexGrow={1} files={this.props.files} />
flexGrow の値を持つ要素は、render() および prepare() 呼び出しに渡されるPromptSizing オブジェクト内の未使用のトークンバジェットを取得します。フレックス要素の動作については、prompt-tsx ドキュメントで詳しく読むことができます。
ステップ3: 履歴を含める
次に、以前作成したHistory コンポーネントを使用して履歴メッセージを含めます。これは少し複雑です。なぜなら、履歴の一部を表示したい一方で、ファイル内容がプロンプトの大部分を占めるようにしたいからです。
したがって、History コンポーネントにflexGrow の値 2 を割り当てて、<FileContext /> を含む他のすべての要素の後にレンダリングされるようにします。しかし、総バジェットの1/5を履歴のために確保するために、flexReserve の値 "/5" も設定します。
<History
history={this.props.history}
passPriority
older={0}
newer={80}
flexGrow={2}
flexReserve="/5"
/>
ステップ3: プロンプトのすべての要素を結合する
これで、すべての要素をMyPrompt コンポーネントに結合します。
import {
UserMessage,
PromptElement,
BasePromptElementProps,
} from '@vscode/prompt-tsx';
import { History } from './history';
interface IFilesToInclude {
document: TextDocument;
line: number;
}
interface IMyPromptProps extends BasePromptElementProps {
history: ChatContext['history'];
userQuery: string;
files: IFilesToInclude[];
}
export class MyPrompt extends PromptElement<IMyPromptProps> {
render() {
return (
<>
<UserMessage priority={100}>Here are your base instructions.</UserMessage>
<History
history={this.props.history}
passPriority
older={0}
newer={80}
flexGrow={2}
flexReserve="/5"
/>
<UserMessage priority={90}>{this.props.userQuery}</UserMessage>
<FileContext priority={70} flexGrow={1} files={this.props.files} />
</>
);
}
}
ステップ4: FileContext コンポーネントの定義
最後に、ユーザーが現在見ているファイルの内容を含むFileContext コンポーネントを定義します。flexGrow を使用したため、PromptSizing 内の情報を使用して、各ファイルの「興味深い」行の周辺から可能な限り多くの行を取得するロジックを実装できます。
簡潔にするため、getExpandedFiles の実装ロジックは省略されています。詳細はprompt-tsx リポジトリで確認できます。
import { PromptElement, BasePromptElementProps, PromptSizing, PromptPiece } from '@vscode/prompt-tsx';
class FileContext extends PromptElement<{ files: IFilesToInclude[] } & BasePromptElementProps> {
async render(_state: void, sizing: PromptSizing): Promise<PromptPiece> {
const files = await this.getExpandedFiles(sizing);
return <>{files.map(f => f.toString())}</>;
}
private async getExpandedFiles(sizing: PromptSizing) {
// Implementation details are summarized here.
// Refer to the repo for the complete implementation.
}
}
まとめ
これらの例では、基本的な指示、ユーザーのクエリ、履歴メッセージ、および異なる優先度を持つファイル内容を含むMyPrompt コンポーネントを作成しました。flexGrow を使用して、ファイル内容をトークンバジェット内に収まるように協調的にサイズ調整しました。
このパターンに従うことで、プロンプトの最も重要な部分が常に含まれることを確実にしつつ、重要度の低い部分はモデルのコンテキストウィンドウ内に収まるように必要に応じて枝刈りされます。getExpandedFiles メソッドと FileContextTracker クラスの完全な実装詳細については、prompt-tsx リポジトリを参照してください。