Skip to main content

​
Getting Started with Agents

AI agents are your coding partners. Describe what you want in natural language, and they generate the code for you.

Natural Language

No coding required - just describe it

Real-Time Generation

Watch code appear instantly

Interactive

Refine through conversation

Context-Aware

Agents understand your full project

​
Your First Agent Interaction

1

Open Project

Open any project in Tesslate Studio
2

Select Agent

Choose an agent from the dropdown (try Stream Agent first)
3

Describe Feature

Type: “Create a hero section with a title, subtitle, and call-to-action button”
4

Watch Generation

Agent generates code in real-time
5

See Preview

Your hero section appears in the live preview
6

Refine

Say: “Make the button larger and orange”
Start with simple requests to get comfortable, then gradually try more complex features.

​
Writing Effective Prompts

​
The Formula

Good prompts include:
  1. What you want to build
  2. How it should look or behave
  3. Which technologies to use (optional)
  4. Why specific requirements matter (optional)

​
Examples

  • UI Components
  • Layouts
  • Features
Basic:
  • “Create a button”
Better:
  • “Create a primary button with rounded corners and an orange background”
Best:
  • “Create a primary button with rounded corners, orange background (#F97316), white text, and a hover effect that darkens it slightly. Use Tailwind CSS.”
Why best wins: Specific colors, exact styling, technology choice

​
Prompt Patterns

​
Adding Features

"Add a [feature] that [does something] with [specific details]"
Examples:
  • “Add a product card that displays an image, title, price, and ‘Add to Cart’ button”
  • “Add a search bar that filters the product list in real-time as the user types”
  • “Add a dark mode toggle that switches between light and dark themes”

​
Modifying Existing Code

"Make the [element] [change] by [method]"
Examples:
  • “Make the navigation bar sticky at the top when scrolling”
  • “Make the hero section full height with content vertically centered”
  • “Make all buttons have a subtle shadow and slight lift on hover”

​
Styling Changes

"Change the [element] to have [styles]"
Examples:
  • “Change the primary color to #F97316 throughout the app”
  • “Change the font to Inter and increase the base size to 16px”
  • “Change the card backgrounds to white with a subtle border instead of shadows”

​
Debugging

"Fix the [issue] where [problem description]"
Examples:
  • “Fix the bug where the form submits even with validation errors”
  • “Fix the layout breaking on mobile screens below 640px”
  • “Fix the TypeScript error in the UserProfile component”

​
Advanced Techniques

​
Referencing Existing Code

“Update the Button component in components/Button.tsx to use the new color scheme”
“Make the ProductCard component match the styling of the existing FeatureCard”
“Add a new component called Newsletter in the components/marketing folder”

​
Iterative Refinement

Build features gradually:
1

Start Simple

“Create a basic product grid showing 6 products”
2

Add Details

“Add product images, titles, and prices to each card”
3

Enhance

“Add hover effects and ‘Quick View’ buttons to each product”
4

Functionality

“Make the products filterable by category”
5

Polish

“Add loading skeletons while products load”

​
Multi-Step Features

For complex features, break down the steps: 
"I want to build a shopping cart feature. Let's start by:

1. Creating a Cart context to manage cart state
2. Adding 'Add to Cart' buttons to product cards
3. Creating a cart sidebar that shows added items
4. Adding quantity controls and remove buttons
5. Calculating and displaying the total

Let's start with step 1 - create the Cart context."
Breaking down complex features helps the agent understand the full scope and build it correctly piece by piece.

​
Working with Different Agents

​
Stream Agent Workflow

1. Quick UI

Build visual components fast

2. Iterate Rapidly

Try different designs quickly

3. Refine Styling

Perfect colors, spacing, typography

4. Switch for Logic

Move to Iterative for functionality

​
Iterative Agent Workflow

1. Plan Feature

Describe the complete feature

2. Let It Think

Agent plans multi-step approach

3. Review Code

Check generated logic carefully

4. Test & Refine

Fix issues through conversation

​
Best Practices

Vague: “Make it look better” Specific: “Increase the padding to 24px, use a softer shadow, and make the corners more rounded”More details = better results
Don’t: “Build a complete e-commerce site” Do:
  1. “Create product card component”
  2. “Create product grid layout”
  3. “Add filtering controls”
  4. “Implement shopping cart”
One feature at a time
  • Always check what the agent created
  • Look for potential issues
  • Understand the code
  • Test functionality
  • Ask for explanations if unclear
Don’t blindly accept everything
  • Tell the agent what worked
  • Explain what didn’t work
  • Give examples of desired behavior
  • Ask for alternatives if needed
Agents learn from your feedback
  • Ask agents to explain code
  • Request comments in complex sections
  • Understand patterns used
  • Build your own knowledge
Use AI as a learning tool

​
Common Patterns

​
Building a Landing Page

1

Hero Section

“Create a hero section with headline, subheadline, CTA button, and background gradient”
2

Features Section

“Add a features section with 3 columns showing icons, titles, and descriptions”
3

Social Proof

“Create a testimonials section with customer quotes and avatars”
4

CTA Section

“Add a final call-to-action section with email signup form”
5

Footer

“Create a footer with links, social icons, and copyright”

​
Adding Functionality

1

State Management

“Set up a context for managing user authentication state”
2

API Integration

“Create a service to fetch products from the API at /api/products”
3

Error Handling

“Add try-catch blocks and show error messages to users”
4

Loading States

“Add loading spinners while data is fetching”
5

Success Feedback

“Show a success toast notification when form submits successfully”

​
Troubleshooting

Solutions:
  • Rephrase your request
  • Break it into smaller parts
  • Provide examples or references
  • Be more specific about requirements
  • Try a different agent
Solutions:
  • Point out the specific error
  • Copy the error message to the agent
  • Ask it to fix the issue
  • Provide context about what should happen
  • Test incrementally to catch errors early
Solutions:
  • Provide reference images or URLs
  • Be very specific about colors, spacing, fonts
  • Use exact pixel values or Tailwind classes
  • Iterate in small steps
  • Ask for alternatives
Solutions:
  • Break into smaller sub-features
  • Build foundation first, add details later
  • Switch to Iterative agent for complex logic
  • Provide pseudocode or step-by-step plan
  • Reference similar existing code

​
Next Steps

Agent Types

Learn Stream vs Iterative agents

Chat Interface

Master the chat panel

Customizing Agents

Create your own agents

Code Editor

Manual code editing