Skip to main content

​
Overview

Tesslate Studio includes built-in Git integration that supports three providers through a unified API. You can import existing repositories, commit changes, push to remotes, pull updates, and manage branches, all from within the project workspace.

Import Repositories

Clone existing repos from GitHub, GitLab, or Bitbucket into Tesslate projects

Commit Changes

Stage and commit files with descriptive messages

Push and Pull

Sync your local changes with the remote repository

Branch Management

Create, switch, and manage branches within the workspace

​
Multi-Provider Support

Tesslate supports three Git hosting providers. The backend automatically detects the provider from the repository URL and handles authentication accordingly.
ProviderURL FormatOAuth Flow
GitHubhttps://github.com/user/repoGitHub OAuth App
GitLabhttps://gitlab.com/user/repoGitLab OAuth App
Bitbuckethttps://bitbucket.org/user/repoBitbucket OAuth App
All three providers share the same Git operations API. The frontend uses a unified git-providers-api.ts module, and the backend stores credentials in a GitProviderCredential record per provider.

​
Connecting a Provider

1

Open Settings

Navigate to Settings from the sidebar or user dropdown menu.
2

Go to Git Providers

Select the Deployment or Git section in the settings sidebar.
3

Connect Your Provider

Click Connect GitHub, Connect GitLab, or Connect Bitbucket.
4

Authorize

You will be redirected to the provider’s OAuth page. Log in and authorize Tesslate Studio to access your repositories.
5

Confirm

After authorization, you are redirected back to Tesslate. The connection is confirmed and your repositories become available for import.

​
Permissions

Tesslate requests the following access:
  • Read repositories: List and clone your repos
  • Write repositories: Commit and push changes
  • User identity: Associate commits with your account
Tesslate only accesses repositories that you explicitly import or connect. The platform never reads or modifies repositories you have not selected.
Git provider connections are optional. You can use Tesslate Studio without connecting any provider. You just will not be able to import repos or push changes to a remote.

​
Importing Repositories

​
During Project Creation

The most common way to import a repository is during project creation:
1

Create New Project

From the Dashboard, click Create New Project.
2

Select Your Provider

Choose GitHub, GitLab, or Bitbucket as the project source.
3

Browse Repositories

Search or browse your repositories. Filter by organization if needed.
4

Configure

Set the project name and phase. Tesslate auto-detects the default branch.
5

Import

Click Import. The server clones the repository into a new project container and starts the dev server.

​
Connecting Git to an Existing Project

You can also connect a Git repository to a project that was created from a template or base:
1

Open the Git Panel

In the project workspace, click the Git icon in the toolbar (or open the GitHub floating panel).
2

Initialize or Connect

  • Initialize: Creates a new local Git repository in the project (gitApi.init(projectId))
  • Connect: Links to an existing remote repository by providing the URL (gitApi.clone(projectId, repoUrl))
3

Verify

The Git panel shows the repository status, current branch, and any existing commits.

​
Checking Status

The Git panel shows the current state of your repository in real time.

​
Status Information

The gitApi.getStatus(projectId) call returns:
FieldDescription
stagedFiles that are staged for the next commit
modifiedFiles that have been changed but not staged
untrackedNew files that are not yet tracked by Git
deletedFiles that have been removed
current_branchThe name of the active branch
aheadNumber of local commits not yet pushed to the remote
behindNumber of remote commits not yet pulled locally

​
Viewing Diffs

Click any changed file to see exactly what was modified. The gitApi.getDiff(projectId, filePath) call returns a per-file diff showing:
  • Added lines: New content (highlighted in green)
  • Modified lines: Changed content
  • Deleted lines: Removed content (highlighted in red)

​
Committing Changes

1

Make Changes

Edit files in the code editor or let AI agents generate code.
2

Open the Git Panel

Click the Git icon in the project toolbar.
3

Review Changes

See the list of modified, added, and deleted files. Click individual files to view diffs.
4

Write a Commit Message

Enter a descriptive commit message that explains what changed and why.
5

Commit

Click Commit. This calls gitApi.commit(projectId, message, files). You can optionally specify which files to include; omitting the files array commits all staged changes.

​
Commit Response

A successful commit returns: 
{
  commit_hash: "a1b2c3d",
  message: "Add user authentication flow",
  author: "Jane Doe",
  timestamp: "2026-02-23T10:30:00Z"
}

​
Commit Best Practices

Good examples:
  • “Add user authentication with email and password validation”
  • “Fix responsive layout breaking on screens under 640px”
  • “Refactor API client to use typed response interfaces”
Avoid:
  • “Update”
  • “Changes”
  • “Fix stuff”
Commit after completing each feature or fix. This creates a clear history and makes it easy to revert specific changes if needed.
Each commit should represent a single logical change. Do not mix unrelated modifications in the same commit.

​
Pushing and Pulling

​
Push to Remote

After committing locally, push your changes to the remote repository: 
const result = await gitApi.push(projectId, branch, remote, force);
// result: { success: true, message: "...", commits_pushed: 3 }
The push method supports:
  • branch: Which branch to push (defaults to the current branch)
  • remote: Which remote to push to (defaults to origin)
  • force: Force push (use with caution)

​
Pull from Remote

Pull the latest changes from the remote repository: 
const result = await gitApi.pull(projectId, branch, remote);
// result: { success: true, message: "...", commits_pulled: 2, conflicts: [] }
If there are merge conflicts, the conflicts array lists the affected files. You can resolve conflicts in the editor and commit the resolution.

​
Branch Management

​
Listing Branches

View all local and remote branches: 
const branches = await gitApi.getBranches(projectId);
// branches: {
//   current: "main",
//   branches: [
//     { name: "main", is_remote: false, last_commit: "a1b2c3d" },
//     { name: "feature/login", is_remote: false, last_commit: "e4f5g6h" },
//     { name: "origin/main", is_remote: true, last_commit: "a1b2c3d" }
//   ]
// }

​
Creating Branches

Create a new branch, optionally checking it out immediately: 
await gitApi.createBranch(projectId, "feature/new-feature", true);
// checkout: true means switch to the new branch after creating it

​
Switching Branches

Switch to an existing branch: 
await gitApi.switchBranch(projectId, "develop");
Switching branches changes the files in your project container. Make sure to commit or stash your changes before switching to avoid losing work.

​
Commit History

View the history of commits for the current branch: 
const history = await gitApi.getCommitHistory(projectId, 50);
// history.commits: [
//   {
//     hash: "a1b2c3d",
//     message: "Add login page",
//     author: "Jane Doe",
//     timestamp: "2026-02-23T10:30:00Z",
//     files_changed: 3
//   },
//   ...
// ]
The history includes the commit hash, message, author, timestamp, and number of files changed. Use the limit parameter to control how many commits to retrieve.

​
Disconnecting a Repository

To remove the Git connection from a project: 
await gitApi.disconnect(projectId);
This removes the remote link but does not delete the project or its files. You can reconnect later or connect to a different repository.

​
Git Panel in the Workspace

The Git panel provides a visual interface for all Git operations:

Changed Files

See modified, added, deleted, and untracked files at a glance

Diff View

Click any file to see a line-by-line diff of changes

Branch Selector

View the current branch and switch between branches

Commit Interface

Write commit messages and commit with one click
The panel also shows the ahead and behind counts so you know at a glance whether you need to push or pull.

​
Troubleshooting

Cause: OAuth authorization failed or was cancelled.What to try:
  • Clear browser cache and cookies for the provider’s domain
  • Try a different browser
  • Verify the provider’s website is accessible
  • Revoke Tesslate’s access on the provider’s settings page and re-authorize
Cause: Repository is inaccessible, or the clone failed.What to try:
  • Verify you have access to the repository (check that it is public or that you are a collaborator)
  • Confirm the repository URL is correct
  • Re-authorize your provider connection (tokens may have expired)
  • For very large repositories, try importing a lighter branch
Cause: No remote configured, authentication expired, or the remote has changes you have not pulled.What to try:
  • Verify your provider connection is active
  • Pull the latest changes before pushing
  • Check that you have write access to the repository
  • If force push is needed, use the force option (be cautious as this rewrites remote history)
Cause: The remote has changes that conflict with your local changes.What to try:
  • The pull response lists conflicting files in the conflicts array
  • Open each conflicting file in the editor and resolve the conflict markers
  • After resolving all conflicts, commit the resolution
  • Ask an AI agent for help: “Resolve the merge conflict in src/App.tsx”

​
Best Practices

Commit After Each Feature

Regular, focused commits create a clear history that is easy to navigate and revert if something goes wrong.

Write Descriptive Messages

Explain the “what” and “why” of each change. Good commit messages make the history useful for you and your team.

Review Before Pushing

Use the diff view to review all changes before pushing to the remote. Verify no secrets, debug logs, or temporary code are included.

Pull Before Starting Work

If you are collaborating with others, pull the latest changes before starting a new feature to minimize merge conflicts.

​
Next Steps

Creating Projects

Import a repository to start a new project

Code Editor

Edit your code with full IntelliSense

Chat Interface

Use AI agents to generate and modify code

Understanding Projects

Learn about project architecture and container management