Prompt Studio
Relevant source files
The following files were used as context for generating this wiki page:
Prompt Studio manages system instructions and conversational overlays for AI agents within the workspace. It allows you to create, select, and inject specific behavioral patterns—referred to as "Prompt Presets"—into active chat sessions to control how the LLM interacts with the user and connected tools.
The module provides a library of templates categorized by function, such as coding, debugging, or creative analysis. When you activate a preset, it serves as the system prompt template that governs the agent's reasoning pattern and response format.
Sources: src/components/PromptStudio.tsx:1-25, src/data.ts:47-50
Core Architecture and Data Structures
Prompt Studio operates using the PromptPreset data structure. This structure defines the identity, metadata, and the raw system prompt text used by the LLM provider.
PromptPreset Schema
| Field | Type | Description |
|---|---|---|
id | string | Unique identifier for the preset. |
name | string | Display name of the behavior pattern. |
description | string | Short summary of the prompt's purpose. |
promptContent | string | The actual system instruction text sent to the LLM. |
category | string | Classification (General, Coding, Debugging, Creative, Analysis). |
isCustom | boolean | Flag indicating if the user created the preset. |
Sources: src/components/PromptStudio.tsx:39-46, src/data.ts:47-84
Data Flow for Prompt Injection
When you select a prompt in the Studio, the application updates the systemPromptId in the active Session state. The ChatArea component then observes this change to display the active behavior overlay.
Features and Functionality
Preset Management
Prompt Studio provides a specialized interface to browse existing templates and manage custom blueprints.
- Categorization: Presets are classified to populate matching autocomplete models in the Chat feed.
- Customization: You can create new "Behavioral Blueprints" by defining a title, description, category, and system prompt template.
- Activation: The interface highlights the preset currently "live" in the conversation loop and provides an "Inject behavior" button for inactive ones.
Sources: src/components/PromptStudio.tsx:78-103, src/components/PromptStudio.tsx:189-200
Autocomplete Integration
The Chat system integrates Prompt Studio data via a command-driven autocomplete mechanism. Typing a / symbol in the chat input triggers a search through the PromptPreset library.
Pre-defined Behavior Patterns
The system initializes with several DEFAULT_PROMPTS designed for specific technical workflows.
| Preset Name | Category | Primary Directive |
|---|---|---|
| Sleek System Operator | General | Deliver ultra-clean response formats with minimal fluff. |
| Technical Architect | Coding | Detail modular architecture and database schemas using Mermaid. |
| MCP Orchestrator | Analysis | Document tool invocations and connected API queries. |
| Bug Hunter | Debugging | Analyze stack traces and propose structured fix plans. |
Sources: src/data.ts:51-84
Implementation Example: System Prompt
{
id: 'general_assistant',
name: 'Sleek System Operator',
description: 'A sharp, concise technical companion responding with minimal fluff and max impact.',
promptContent: 'You are Agent, an elite AI terminal assistant. Deliver ultra-clean response formats. When code is requested, present complete, syntactically bulletproof examples. Prioritize performance, modern syntax, and clear explanation of core trade-offs.',
category: 'General'
}
Sources: src/data.ts:51-57
Integration with Chat Pipeline
The selected PromptPreset is used during the generation of chat responses. Although the generateChatResponse function primarily handles message history and tool calls, the ChatArea component ensures the UI reflects the active behavioral constraints of the current session.
- The
activePromptis identified by finding the preset matching thesession.systemPromptId. - The
ChatAreaheader displays theactivePrompt.nameunder the "BEHAVIOR OVERLAY" section. - A banner appears in the message timeline to confirm the active context behavior.
Sources: src/components/ChatArea.tsx:55-57, src/components/ChatArea.tsx:181-186, src/components/ChatArea.tsx:244-248
Prompt Studio centralizes the control of agent behavior, enabling developers to switch between specialized personas—such as a UI Crafting Specialist or a Technical Architect—without losing conversation history. By managing these presets as a distinct registry, the system ensures consistent agent performance across local and remote LLM providers.
Sources: src/components/PromptStudio.tsx:1-10, src/screens/MainScreen.tsx:1-30