Skip to main content

​
Why Customize Agents?

Create specialized agents tailored to your exact needs:

Specific Styles

Enforce your preferred coding style

Frameworks

Specialize in particular libraries

Workflows

Match your team’s patterns

Share

Publish for others to use

​
Agent Customization Basics

​
What You Can Customize

  • System Prompt
  • AI Model
  • Metadata
  • Mode
The core instructions
  • How the agent behaves
  • What patterns it follows
  • Coding style preferences
  • Libraries and frameworks to use
Most important customization

​
Creating Custom Agents

​
Method 1: Fork Existing Agent

Start from a working agent:
1

Find Agent

Browse your library or marketplace
2

Click Fork

Click Fork on an open-source agent
3

Name It

Give your fork a unique name
4

Customize

Modify the system prompt and settings
5

Save

Save to your library
6

Test

Try it in a test project
Forking is the easiest way to create custom agents since you start with working prompts.

​
Method 2: Create from Scratch

Build from the ground up:
1

Open Library

Go to your Library → Agents tab
2

Create New

Click Create New Agent
3

Choose Type

Select Stream or Iterative mode
4

Configure

Set name, icon, description
5

Write Prompt

Create your system prompt
6

Select Model

Choose AI model to power it
7

Test & Iterate

Refine until it works well

​
Writing System Prompts

The system prompt defines how your agent behaves. It’s the most important customization.

​
Prompt Structure

A good system prompt includes:
Define what the agent is:
You are a specialized React developer focused on building
accessible, performant user interfaces using Tailwind CSS
and TypeScript.
What the agent should do:
Your responsibilities:
- Generate clean, typed React components
- Use Tailwind CSS for all styling
- Ensure WCAG 2.1 AA accessibility compliance
- Follow React best practices and hooks patterns
- Write semantic HTML
Coding style preferences:
Coding standards:
- Use functional components with TypeScript
- Prefer named exports over default exports
- Use descriptive variable names
- Include JSDoc comments for complex logic
- Keep components under 200 lines
Specific libraries and tools:
Technology preferences:
- React 18+ with TypeScript
- Tailwind CSS 3+ for styling
- React Hook Form for forms
- Zod for validation
- Lucide React for icons
What NOT to do:
Avoid:
- Inline styles (use Tailwind classes)
- Class components (use hooks)
- Any CSS libraries besides Tailwind
- Large components (split into smaller ones)
- Hardcoded values (use constants)

​
Example Prompts

  • Tailwind Specialist
  • Form Builder
  • API Integration
You are a React + Tailwind CSS specialist. Your job is to
create beautiful, responsive components using Tailwind CSS
utility classes.

Guidelines:
- Use only Tailwind classes (never inline styles or CSS files)
- Make all components fully responsive (mobile-first)
- Use Tailwind's color palette (e.g., blue-500, gray-100)
- Apply consistent spacing (4, 6, 8, 12, 16, 24)
- Include hover, focus, and active states
- Use Tailwind's animation classes for transitions

Default color scheme:
- Primary: orange-500
- Background: gray-50
- Text: gray-900
- Border: gray-200

Always create components that work beautifully on mobile,
tablet, and desktop screens.

​
Selecting AI Models

For open-source agents, you can choose the AI model:
  • GPT-4
  • Claude
  • Qwen
  • OpenRouter
OpenAI GPT-4Strengths:
  • Excellent reasoning
  • Great at complex logic
  • Strong TypeScript knowledge
  • Good architecture decisions
Best for:
  • Complex features
  • API integration
  • Business logic
  • Debugging
Cost: $$$ (Higher)
You can change the model anytime for your custom agents. Test different models to find the best fit.

​
Testing Custom Agents

1

Create Test Project

Make a new project just for testing
2

Enable Agent

Turn on your custom agent in the library
3

Try Simple Tasks

Test with basic requests first
4

Test Complex Features

Try more challenging scenarios
5

Refine Prompt

Adjust system prompt based on results
6

Iterate

Keep testing and improving

​
What to Test

Follows Instructions

Does it use your specified libraries and patterns?

Code Quality

Is the generated code clean and correct?

Consistency

Does it generate similar code for similar requests?

Edge Cases

How does it handle unusual requests?

​
Publishing Agents

Share your custom agents with the community:
1

Polish

Ensure agent works well and prompt is clear
2

Document

Write a detailed description and usage guidelines
3

Click Publish

Open agent settings → Publish to Marketplace
4

Set Details

  • Choose category
  • Add tags
  • Set pricing model (Free/Paid)
  • Upload screenshots
5

Submit

Submit for marketplace review
6

Review

Tesslate team reviews for quality
7

Go Live

Once approved, appears in marketplace
Only publish agents you want to share publicly. Published agents become available to all Tesslate users.

​
Best Practices

  • Focus on one specialty
  • Don’t try to do everything
  • Clear, focused purpose
  • Better to be great at one thing
  • Clear description
  • Usage examples
  • Technology requirements
  • Limitations
  • Try many scenarios
  • Test edge cases
  • Verify consistency
  • Get feedback from others
  • Start simple
  • Add rules based on issues
  • Remove unnecessary instructions
  • Keep refining

​
Prompt Tips

Be Explicit

Don’t assume - spell out exactly what you want

Provide Examples

Show code examples in the prompt

Use Sections

Organize prompt into clear sections

Test & Refine

Improve based on real usage

​
Next Steps

Agent Types

Understand Stream vs Iterative

Using Agents

Get better at prompting

Agent Marketplace

Discover community agents

Model Management

Configure AI models