Skip to main content

​
Getting Started

AI agents are your coding partners inside Tesslate Studio. You describe what you want in natural language, and the agent reads your files, writes code, runs commands, and iterates until the task is done.

Natural Language

No coding syntax required. Just describe what you want.

Context-Aware

Agents see your project files, directory structure, and git status.

Tool-Powered

Agents call tools to read, write, execute, and plan.

Approval Control

You control which operations execute automatically.

​
Your First Agent Interaction

1

Open a Project

Open any project in Tesslate Studio.
2

Select an Agent

Choose an agent from the dropdown in the chat interface. For your first time, try the default TesslateAgent or an IterativeAgent.
3

Describe What You Want

Type a request like: “Create a hero section with a title, subtitle, and call-to-action button using Tailwind CSS”
4

Watch the Agent Work

The agent reads your project, plans its approach, and executes tool calls. You see each step in real time.
5

Approve Operations (Ask Mode)

If you are in Ask Before Edit mode (the default), the agent requests approval before writing files or running commands. Click Allow Once, Allow All, or Stop.
6

See Results

Your changes appear in the code editor and live preview. Continue the conversation to refine.
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 but helpful)
  4. Context about existing code (optional)

​
Prompt Examples by Complexity

Basic: “Create a button”Better: “Create a primary button with rounded corners and an orange background”Best: “Create a reusable Button component in src/components/Button.tsx using TypeScript. It should accept variant (primary, secondary, ghost), size (sm, md, lg), and children props. Use Tailwind CSS with orange-500 as the primary color. Include hover and focus states.”The best version specifies the file path, typing, variants, and styling framework.

​
Prompt Patterns

Adding features: 
"Add a [feature] to [location] that [behavior] using [technology]"
Modifying existing code: 
"In [file/component], change [element] to [new behavior]"
Debugging: 
"Fix the bug in [file/component] where [problem description]. The expected behavior is [expected]."
Refactoring: 
"Refactor [file/component] to [improvement]. Keep the existing functionality but [specific change]."

​
Understanding Tool Calls

When an IterativeAgent, ReActAgent, or TesslateAgent works on your request, it calls tools to interact with your project. Here is what each tool category does and when the agent uses it.

​
File Operations

What it does: Reads the contents of a file from your project.When the agent uses it: Before modifying a file (to understand current code), when investigating a bug, or when you reference a specific file.Example: The agent reads src/App.jsx before adding a new route to the router.
What it does: Creates a new file or completely overwrites an existing one.When the agent uses it: Creating new components, configuration files, or when a file needs a full rewrite.Example: The agent creates src/components/Button.tsx with a new component.
What it does: Applies a surgical search/replace edit to an existing file using fuzzy matching.When the agent uses it: Making small, targeted changes to existing files. More efficient than rewriting the entire file.Example: The agent changes bg-blue-500 to bg-green-500 in a specific component.
What it does: Applies multiple search/replace patches to a single file atomically. Edits are applied sequentially.When the agent uses it: Batch refactoring, renaming variables, or making several related changes to one file.Example: The agent updates an interface, function signature, and JSX in one operation.

​
Shell Operations

What it does: Executes a one-off shell command with automatic session management. Reuses sessions within the same agent run for efficiency.When the agent uses it: Installing packages, running builds, checking git status, listing files, running tests.Example: npm install @tanstack/react-query or npm run buildTip: For long-running commands (like test suites), the agent can increase the wait time using the wait_seconds parameter.
What they do: Open a persistent shell session, execute commands within it (preserving state like working directory), and close it when done.When the agent uses them: Multi-step workflows that need state persistence. For example, navigating to a directory and running several commands there.Example: Open a session, cd src, ls -la, then close.

​
Graph Operations

Graph operations are available only when you are viewing the architecture/graph canvas. They let the agent manage your project’s container topology.
Tools: graph_start_container, graph_stop_container, graph_start_all, graph_stop_all, graph_container_statusWhen the agent uses them: Starting or stopping services, checking which containers are running, launching the entire application stack.
Tools: graph_add_container, graph_add_browser_preview, graph_add_connection, graph_remove_itemWhen the agent uses them: Setting up project architecture. Adding frontend/backend/database containers, connecting them with environment variables or API endpoints, and adding browser preview nodes.Connection types: env_injection, http_api, database, cache, depends_on

​
Approval Flows

In Ask Before Edit mode (the default), dangerous operations require your approval.

​
Which Tools Need Approval?

Dangerous tools (require approval):
  • write_file, patch_file, multi_edit (file modifications)
  • bash_exec, shell_exec, shell_open (shell operations)
  • web_fetch (web operations)
Safe tools (execute immediately):
  • read_file, get_project_info, todo_read, todo_write

​
The Approval Dialog

When the agent requests a dangerous operation, you see an approval card with three options:
Approves this single operation only. The next time the same tool is called, you will be asked again.

​
Session Management

  • Approvals persist until you use the /clear command or start a new chat
  • The /clear command resets all approvals and mode switches
  • Each chat session tracks approvals independently

​
Edit Modes

The edit mode button in the chat input lets you control agent autonomy. Three modes are available:
Border color: GreyThe agent can read freely but must request approval for writes and shell commands. This is the safest mode and recommended for most work.Dangerous tools are blocked until you approve them. You can approve per-operation or per-tool-type for the session.
Plan mode blocks tools at the ToolRegistry level. This means it works automatically for all agents, including custom ones. You do not need to configure anything special.

​
Advanced Prompting Techniques

​
Referencing Existing Code

“Update the Button component in src/components/Button.tsx to add a loading prop that shows a spinner”When you reference specific paths, the agent reads those files first.
“Make the ProductCard component match the styling pattern used in FeatureCard”The agent reads both components to understand the pattern.
“Create a new hook called useDebounce in src/hooks/useDebounce.ts”Giving exact paths reduces ambiguity.

​
Multi-Step Feature Requests

For complex features, break them into numbered steps: 
I want to build a shopping cart. Let's work through it step by step:

1. Create a CartContext with state for items, add, remove, and clear actions
2. Add "Add to Cart" buttons to the product cards
3. Build a cart sidebar that slides in from the right
4. Add quantity controls and a remove button for each item
5. Show the subtotal and a "Checkout" button at the bottom

Start with step 1.
Breaking complex features into steps helps the agent focus on one piece at a time and reduces the chance of errors.

​
Iterative Refinement

Build gradually:
1

Start Simple

“Create a basic product grid showing 6 placeholder products”
2

Add Details

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

Enhance UX

“Add hover effects, shadows, and a Quick View button to each product”
4

Add Functionality

“Make the products filterable by category with a dropdown”
5

Polish

“Add loading skeletons while data loads and empty state when no results match”

​
Best Practices

Vague: “Make it look better”Specific: “Increase card padding to 24px, use a softer shadow (shadow-sm), round corners to 12px, and change the background to gray-50”More details lead to better results every time.
Avoid: “Build a complete e-commerce site with cart, checkout, user accounts, and admin panel”Instead: Build one feature at a time, test it, then move to the next. This gives you better control and fewer issues.
Always check what the agent created. Look for potential issues, understand the patterns used, and test functionality. Ask the agent to explain any code you do not understand.
  • StreamAgent for quick UI generation
  • IterativeAgent for general tasks with tool calls
  • ReActAgent for debugging with explicit reasoning
  • TesslateAgent for full-featured production work
Switch agents mid-project as the task demands.
Begin with Ask Before Edit (the default) until you are comfortable with the agent’s behavior. Switch to Allow All when you trust the workflow.

​
Troubleshooting

  • Rephrase with more specific details
  • Break the request into smaller parts
  • Provide file paths and technology preferences
  • Include examples of desired output
  • Try a different agent type
  • Copy the error message directly to the agent: “I see this error: [paste error]”
  • Point out the specific file and line if possible
  • Ask the agent to fix the issue
  • Switch to ReActAgent for explicit debugging reasoning
  • Some complex tasks require many iterations; this is normal
  • Check if the agent is waiting for approval (in Ask mode)
  • If the agent is looping, try rephrasing or breaking the task into smaller steps
  • Resource limits will stop runaway agents automatically
  • Check your edit mode. Plan mode blocks all write operations.
  • In Ask mode, make sure you respond to approval dialogs
  • Switch to Allow All if you want uninterrupted execution

​
Next Steps

Agent Types

Deep dive into StreamAgent, IterativeAgent, ReActAgent, TesslateAgent

Customizing Agents

Create and configure custom agents

Agent Marketplace

Discover specialized agents

AI Agents Overview

Core concepts and architecture