Two Core Agent Types
Tesslate Studio has two fundamental agent architectures, each optimized for different tasks:Stream Agent
Fast, flowing code generation
- Real-time streaming
- Best for UI and visual work
- Continuous output
- Quick iterations
Iterative Agent
Thoughtful, step-by-step building
- Reasoning and planning
- Best for complex logic
- Tool usage
- Multi-step features
Stream Agent
How It Works
1
Receive Request
You describe what you want to build
2
Start Streaming
Agent immediately begins generating code
3
Real-Time Output
Code appears token-by-token as it’s created
4
Write Files
Generated code writes directly to your project
5
Complete
Finishes and waits for next instruction
Best Use Cases
- UI Components
- Styling
- Quick Changes
Perfect for:
- React components
- Landing page sections
- Forms and inputs
- Navigation bars
- Cards and layouts
- Buttons and controls
Strengths
Speed
- Fastest response time
- No thinking delay
- Immediate code generation
- Rapid prototyping
Visual Work
- Excellent for UI
- Great at styling
- Good component structure
- Responsive layouts
Simplicity
- Straightforward generation
- Easy to predict
- Less complexity
- Quick fixes
Iteration
- Fast feedback loop
- Try multiple approaches
- Quick refinements
- Experimental freedom
Limitations
Less Reasoning
Less Reasoning
- Doesn’t plan multi-step features
- May miss edge cases
- Limited problem-solving
- Best for straightforward tasks
No Tool Usage
No Tool Usage
- Can’t search codebase
- Won’t analyze existing code deeply
- No file system exploration
- Direct generation only
Complex Logic
Complex Logic
- May struggle with intricate state management
- Business logic can be inconsistent
- API integrations less reliable
- Better for presentation layer
Iterative Agent
How It Works
1
Receive Request
You describe what you want to build
2
Think & Plan
Agent analyzes request and plans approach
3
Use Tools
May search files, read code, analyze structure
4
Generate Step-by-Step
Creates code thoughtfully with reasoning
5
Verify
Checks work and ensures correctness
6
Complete
Finishes with explanation of what it did
Best Use Cases
- Complex Features
- API Integration
- Debugging
- Architecture
Perfect for:
- Multi-step workflows
- State management systems
- Authentication flows
- Data processing
- Form validation logic
- Complex interactions
Strengths
Reasoning
- Plans before acting
- Considers edge cases
- Thinks through logic
- Better problem-solving
Tool Usage
- Searches codebase
- Reads existing files
- Analyzes structure
- Context-aware
Complexity
- Handles complex features
- Multi-file changes
- Architectural decisions
- System design
Accuracy
- More precise
- Better error handling
- Consistent patterns
- Fewer bugs
Limitations
Slower
Slower
- Takes time to think
- Not instant like streaming
- More API calls
- Longer for simple tasks
More Expensive
More Expensive
- Uses more tokens
- Tool usage adds cost
- Better for important features
- Overkill for simple UI
Verbose
Verbose
- More explanations
- Longer responses
- May over-explain
- More to read
Direct Comparison
- Speed
- Capabilities
- Cost
| Aspect | Stream | Iterative |
|---|---|---|
| Response Time | ⚡ Instant | 🕐 10-30s thinking |
| Code Generation | 🌊 Streams | 📝 Step-by-step |
| Iteration Speed | 🏃 Very fast | 🚶 Moderate |
When to Use Each
Use Stream Agent For:
Landing Pages
Quick visual layouts and sections
Components
Individual React components
Styling
CSS and visual refinements
Prototypes
Rapid prototyping and experimentation
Use Iterative Agent For:
Business Logic
Complex state and data management
APIs
Backend integration and data fetching
Debugging
Finding and fixing issues
Architecture
Organizing code and structure
Switching Agents
You can switch agents mid-project:1
Different Contexts
Each agent maintains separate chat history
2
Change Anytime
Switch via dropdown in chat interface
3
Best of Both
Use Stream for UI, Iterative for logic
4
No Limits
Switch as often as needed
Many users use Stream Agent for initial UI, then switch to Iterative for adding functionality and business logic.
Example Workflows
Building a Login Page
- Stream Agent Approach
- Iterative Agent Approach
- Combined Approach
Good for:
- “Create a login form with email and password fields”
- “Add a logo and title above the form”
- “Style it with a gradient background”
- “Make the button orange and rounded”