Chat & Interaction UI
Relevant source files
The following files were used as context for generating this wiki page:
The Chat & Interaction UI serves as the primary interface for users to communicate with the bl1nk AI platform. It is designed to facilitate a "Build-As-You-Chat" experience where AI agents, such as bl1nk, Kiro, and specialized UI Engineers, interpret user intent to modify code, capture knowledge, or provide technical guidance in real-time. The interface supports multiple specialized interaction modes, including Build, Ask, and Agent modes, each governed by distinct system prompts and behavioral guidelines to ensure precise task execution and conceptual clarity.
Sources: apps/client/src/prompts/system_prompt.ts:31-36, tests/e2e/snapshots/chat_mode.spec.ts_chat-mode-selector---ask-mode-1.txt:4-10
Interaction Modes and System Prompts
The system utilizes specialized prompts to transition the UI behavior based on the user's selected mode. These modes define how the chat interface handles code generation, tool usage, and conceptual explanations.
Mode Definitions
| Mode | Role Description | Primary Directives | Key Tags/Commands |
|---|---|---|---|
| Build | AI Editor (bl1nk) | Modify code in real-time; create/update files. | <bl1nk-write>, <bl1nk-command> |
| Ask | Technical Assistant | Explain concepts; NO CODE PRODUCTION. | Conceptual explanations only |
| Agent | App Builder Agent | Gather requirements; determine tool/API needs. | Tool research summaries |
Sources: apps/client/src/prompts/system_prompt.ts:251-275, tests/e2e/snapshots/chat_mode.spec.ts_chat-mode-selector---ask-mode-1.txt:103-115
Structured Thinking Process
Before generating a response, the UI logic expects the AI to utilize a <think> block. This process is visualized to help organize steps like identifying bugs, examining components, and planning fixes.
Specialized UI Components and Interactions
The Chat UI integrates specific interactive elements and commands that allow the AI to control the development environment and provide feedback to the user.
UI Command Tags
The BUILD_SYSTEM_PROMPT defines specific XML-style tags that the chat interface parses to execute environment-level actions.
<bl1nk-command type="rebuild">: Deletesnode_modules, re-installs, and restarts.<bl1nk-command type="restart">: Restarts the app server.<bl1nk-command type="refresh">: Refreshes the preview iframe.<bl1nk-chat-summary>: Used at the end of a session to set a one-sentence chat title.
Sources: apps/client/src/prompts/system_prompt.ts:40-48, apps/client/src/prompts/system_prompt.ts:55-58
UI Engineering Standards
Frontend interactions are designed to follow a "Component-Driven Architecture." The system prioritizes the creation of small, focused React components (under 100 lines) using Tailwind CSS and the shadcn/ui library.
Sources: apps/agents/ui-engineer.md:14-25, apps/client/src/prompts/system_prompt.ts:167-175
Spec-Driven Development Workflow (Kiro)
The "Kiro" skill introduces a structured, multi-phase workflow within the chat interface for complex feature development. This process ensures user approval at every milestone.
Knowledge Capture Integration
The Chat UI also serves as a portal for capturing documentation. Using the notion-knowledge-capture skill, users can trigger workflows to transform chat context into structured Notion pages.
- Extract: Identify key concepts/decisions from the discussion.
- Structure: Format into How-To Guides, FAQs, or Decision Records.
- Search: Use
Notion:notion-searchto find the correct database. - Create: Generate the page and link it to the wiki index.
Sources: skill/notion-knowledge-capture/notion-knowledge-capture/SKILL.md:14-45
Implementation Constraints
The interaction UI follows strict rules to prevent over-engineering and ensure code safety:
- No Markdown Code Blocks: In
Buildmode, markdown backticks (```) are strictly prohibited for code output;<bl1nk-write>must be used exclusively. - Atomic File Operations: Only one
<bl1nk-write>block is permitted per file to ensure complete, syntactically correct overwrites rather than partial edits. - No Partial Implementations: Features must be fully functional; TODO comments and placeholders are forbidden.
- Language Parity: The UI must always respond in the same language used by the user.
Sources: apps/client/src/prompts/system_prompt.ts:145-160, apps/client/src/prompts/system_prompt.ts:182-192
Summary
The Chat & Interaction UI in bl1nk-skill-platform is more than a simple messaging interface; it is a sophisticated control center for spec-driven development and knowledge management. By leveraging distinct modes and a rigorous structured thinking process, the UI ensures that AI agents provide high-quality, maintainable code in Build mode and accurate conceptual guidance in Ask mode, all while maintaining a human-centric, developer-focused tone.