Skip to main content

​
Create Your Account

1

Sign Up

Navigate to studio.tesslate.com and click Sign Up.Fill in your details:
  • Full Name
  • Username (unique)
  • Email Address
  • Password (minimum 8 characters)
2

Verify and Login

After registration, you’ll be automatically logged in and redirected to your dashboard.

​
Create Your First Project

1

Open Dashboard

You’ll land on the Dashboard showing all your projects (currently empty for new users).
2

Click Create Project

Click the “Create New Project” button in the center or top-right corner.
3

Choose Source

Select how you want to start:
4

Wait for Initialization

The development server will start automatically. You’ll see:
  • “Starting development server…” (toast notification)
  • “Development server ready!” (when complete)
This usually takes 10-30 seconds.

​
Build Your First Feature

1

Open Chat

At the bottom of the screen, you’ll see the chat interface. Click to expand it.
2

Describe What You Want

Type a natural language description of what you want to build. For example:
Create a landing page with a hero section, feature cards,
and a contact form. Use a blue color scheme.
3

Select an Agent

In the chat input, you’ll see an agent selector dropdown. For your first project, use the default Stream Agent.
4

Send Message

Press Enter or click the send button. The AI will:
  • Generate React components
  • Create necessary files
  • Auto-save to your project
  • Show progress in the chat
5

View Live Preview

As files are generated, the live preview updates automatically. You’ll see your landing page appear in real-time!

​
Make Changes

1

Request Modifications

Continue chatting with the AI to refine your app:
Change the hero background to a gradient from blue to purple.
Add hover animations to the feature cards.
2

Manual Edits

Click the Code tab to view files. You can:
  • Browse the file tree
  • Click any file to open in the editor
  • Make manual changes
  • Click Save to update the preview
3

See Changes Live

Every change (AI-generated or manual) instantly appears in the live preview thanks to Hot Module Replacement (HMR).

​
Explore More Features

Install Agents

Browse the marketplace for specialized AI agents

GitHub Integration

Connect GitHub and commit your code

Architecture Diagrams

Visualize your application architecture

API Keys & Models

Configure external AI models

​
Tips for Success

The more detailed your description, the better the results. Include:
  • Specific features you want
  • Color schemes and styling preferences
  • Layout and structure details
  • Any specific libraries or patterns to use
Build your application step by step:
  1. Start with basic structure
  2. Add features one at a time
  3. Refine styling and UX
  4. Test and debug
This approach gives better results than trying to build everything at once.
Different agents excel at different tasks:
  • Stream Agent: Fast iteration, UI building
  • Iterative Agent: Complex logic, multi-step tasks
Switch agents based on your current need.
Tesslate auto-saves, but you can also:
  • Commit to GitHub regularly
  • Download your project files
  • Keep backups of important versions

​
Common Issues

Development Server Not Starting?If the dev server fails to start:
  1. Check your internet connection
  2. Try refreshing the page
  3. Contact support if the issue persists
Preview Not Updating?If changes aren’t appearing:
  1. Click the refresh button in the preview
  2. Check the browser console for errors
  3. Try restarting the development server in Settings

​
Next Steps

Now that you’ve built your first project, explore these guides:
  1. Understanding Projects - Learn project management
  2. Working with Agents - Master AI agents
  3. Code Editor Guide - Advanced editing features
  4. Marketplace - Discover agents and bases

Join Our Community

Get help, share projects, and connect with other builders