Vibe Coding with Integrated AI
Operaide Studio provides two complementary AI-assisted development paths: Claude Code in the terminal for natural-language-driven app building, and IDE-integrated AI agents for context-aware code suggestions, inline editing, and chat.
AI features are disabled by default — you can opt-in at your discretion. Enabling them may generate continuous requests to LLMs, which could incur costs. These features are in beta and may change.
Vibe Coding vs. Vibe Engineering
Operaide supports two styles of AI-assisted development:
- Vibe Coding — You describe what you want in plain language, and the AI writes the code. This approach is aimed at non-technical users who want to build apps quickly without deep programming knowledge.
- Vibe Engineering — You use AI as a tool alongside your own expertise. The AI helps with code generation, refactoring, and architecture — but you stay in control of quality, structure, and production readiness.
Both styles are supported in Studio. Claude Code is the primary tool for vibe coding, while the IDE-integrated agents support both approaches.
Claude Code (Terminal)
Claude Code is an AI-powered coding assistant that runs in the integrated terminal. It has full access to your workspace files and can read, write, and refactor code based on your natural-language instructions.
To get started, type claude in the terminal and authenticate with your Anthropic account. For a step-by-step walkthrough, see Step 3: Edit and Deploy in the First App tutorial.
Claude Code works iteratively — you describe what you want, review the changes it proposes, and refine until the result matches your intent. It understands the full file tree of your app, so you can ask it to modify multiple files, add error handling, change agent behaviour, or restructure your code.
Example: Building a Reaktor with Prompts
You can build a complete Reaktor through a series of natural-language prompts. Here is an example conversation that creates a customer support chat with web search:
You: Create a new chat Reaktor called "support-chat". It should have a system prompt setting that tells the AI to act as a friendly customer support agent for a software product.
Claude Code creates the .reaktor.ts file with registerChatReaktorDefinition, a configurable system prompt via aktorSetting, and the basic aktorAICall pipeline.
You: Add a web search tool so the agent can look up our knowledge base. Limit results to 5.
Claude Code adds aktorWebsearch wrapped with aktorToTool, wires it into an aktorToolSet, and passes it to aktorAICall with max_steps.
You: The system prompt should include the current date and time so the agent knows what "today" means.
Claude Code adds a helper that returns new Date().toISOString() and uses aktorCompletePrompt to inject it into the system prompt template via {{dateTime}}.
Each prompt builds on the previous result. You review the changes after each step and can ask Claude Code to adjust, undo, or continue.
IDE-Integrated AI Agents
In addition to the terminal, the Studio provides built-in AI agents that are deeply integrated into the editor. You can toggle them via the toolbar buttons in the top bar.
AI Chat
The AI Chat panel lets you ask questions about your code, your app structure, or the Operaide framework. Start your message with @ to talk to a specialized agent:
- @Coder — generates and edits code based on your instructions
- @Architect — reasons about architecture, structure, and design decisions
- @Universal — general-purpose assistant for any question
You can attach context to your messages using variables:
| Variable | Description |
|---|---|
#file | Attach a specific file from your workspace |
#_f | Attach the currently open file |
#selectedText | Attach the currently selected text in the editor |
You can also click the + button in the chat panel to browse available context sources.
AI Editor
The AI Editor provides inline code suggestions directly in the editor as you type. It is context-aware and adapts its suggestions to the file you are working in.