vscode prompt-tsx.instructions.md

Guidelines for TSX files using prompt-tsx focusing on specific patterns and token budget management for AI prompt engineering.

Component Structure

Base Pattern

• Extend PromptElement<Props> or PromptElement<Props, State> for all prompt components
• Props interfaces must extend BasePromptElementProps

interface MyPromptProps extends BasePromptElementProps {
	readonly userQuery: string;
}

class MyPrompt extends PromptElement<MyPromptProps> {
	render() {
		return (
			<>
				<SystemMessage priority={1000}>...</SystemMessage>
				<UserMessage priority={900}>{this.props.userQuery}</UserMessage>
			</>
		);
	}
}

Async Components

• The render method can be async for components that need to perform async operations
• All async work should be done directly in the render method

class FileContextPrompt extends PromptElement<FileContextProps> {
	async render() {
		const fileContent = await readFileAsync(this.props.filePath);
		return (
			<>
				<SystemMessage priority={1000}>File content:</SystemMessage>
				<UserMessage priority={900}>{fileContent}</UserMessage>
			</>
		);
	}
}

Prompt-Specific JSX

Line Breaks

• CRITICAL: Use <br /> for line breaks - newlines are NOT preserved in JSX
• Never rely on whitespace or string literal newlines

// ✅ Correct
<SystemMessage>
	You are an AI assistant.<br />
	Follow these guidelines.<br />
</SystemMessage>

// ❌ Wrong - newlines will be collapsed
<SystemMessage>
	You are an AI assistant.
	Follow these guidelines.
</SystemMessage>

Priority System

Priority Values

• Higher numbers = higher priority (like z-index)
• Use consistent ranges:
  • System messages: 1000
  • User queries: 900
  • Recent history: 700-800
  • Context/attachments: 600-700
  • Background info: 0-500

<SystemMessage priority={1000}>...</SystemMessage>
<UserMessage priority={900}>{query}</UserMessage>
<HistoryMessages priority={700} />
<ContextualData priority={500} />