teta.so
Sign in

Chat Editor

The chat editor is the primary way to build apps in Teta. You describe what you want in natural language, and the AI writes the code, creates components, sets up routes, and configures your SvelteKit project. Think of it as pair programming with an expert SvelteKit developer who never gets tired.

How It Works

When you send a message, the AI reads your project files, understands your codebase, and makes changes directly. Every response streams in real time so you can watch the app take shape. The preview iframe refreshes automatically after each change, giving you instant visual feedback.

The AI has full access to your project: it can create files, edit existing ones, run terminal commands, install packages, and configure your SvelteKit app. You stay in control of the direction while it handles the implementation.

Writing Effective Prompts

The quality of your prompts directly affects the quality of the output. Here are guidelines for getting the best results.

Be specific about what you want. Instead of "make a landing page," try "Create a landing page with a hero section that has a headline, subheadline, and a call-to-action button. Below that, add a three-column features grid with icons." The more detail you provide, the closer the result will be to your vision.

Give context about your project. If you already have a design system or color scheme, mention it. "Use the existing blue primary color and keep the same card style from the pricing page" helps the AI stay consistent with what you have built so far.

Iterate in small steps. Rather than asking for an entire app in one message, build incrementally. Start with the layout, then add interactivity, then connect the database. Each step gives you a checkpoint to review and adjust.

Reference what already exists. Say "Update the header component to add a mobile menu" rather than "Add a mobile menu." This tells the AI exactly where to make changes.

Example Prompts for Common Tasks

Here are prompts you can adapt for your own projects:

  • New page: "Create a /pricing page with three tier cards (Free, Pro, Enterprise). Each card should list features and have a CTA button. Use a grid layout that stacks on mobile."
  • Component: "Build a reusable testimonial card component in src/lib/components that takes name, role, quote, and avatar as props."
  • API route: "Create a SvelteKit API endpoint at /api/contact that accepts POST requests with name, email, and message fields, validates the input, and stores it in the contacts Supabase table."
  • Styling: "Make the navigation bar sticky with a blur backdrop effect. Add a subtle shadow when the user scrolls down."
  • Fix a bug: "The form on /contact submits but doesn't show a success message. Add a toast notification after successful submission."
  • Database: "Create a Supabase table called blog_posts with columns: id (uuid), title (text), content (text), published (boolean), created_at (timestamp). Then create a page that lists all published posts."

Image Attachments

You can share images with the AI to communicate your design intent. This is one of the most effective ways to get accurate results.

Upload a reference design. Drag and drop a screenshot, mockup, or wireframe into the chat. The AI will analyze the layout, colors, typography, and spacing, then reproduce it in code.

Paste screenshots. Copy a screenshot to your clipboard and paste it directly into the chat input. This works well for sharing UI bugs or showing the current state of a component you want to modify.

Drag and drop files. Drag image files from your desktop or file manager directly into the chat area.

When sharing an image, include a message like "Recreate this layout" or "Match this design for the hero section" to tell the AI what to do with it.

Multi-Chat Tabs

You can run multiple chat conversations simultaneously using tabs. Each tab is an independent conversation with its own context and history.

This is useful for working on different features in parallel. For example, you might have one chat building the authentication flow and another working on the dashboard layout. Each conversation tracks its own changes without interfering with the other.

To create a new chat, click the plus icon in the chat tab bar. Switch between chats by clicking their tabs. Each chat has its own message history and AI context.

Tool Approval Mode

Teta offers two modes for how the AI executes changes:

Auto mode lets the AI write files, run commands, and make changes without asking for permission on each action. This is the fastest way to work and is recommended for most users. The AI still shows you what it is doing in the chat stream.

Supervised mode pauses before every file write, edit, or terminal command and asks for your approval. You see exactly what the AI wants to do and can approve or reject each action. Use this when you want fine-grained control, such as when working on sensitive parts of your codebase or learning how the AI approaches a problem.

You can toggle between modes at any time using the control in the chat panel. Auto mode is the default. Switch to supervised mode when you want to review changes carefully, then switch back to auto when you are ready to move fast again.

Suggested Replies

After the AI responds, you may see suggested follow-up messages below the response. These are contextual suggestions based on what was just built or changed. For example, after creating a component, you might see suggestions like "Add responsive styles" or "Write tests for this component."

Click a suggestion to send it as your next message, or ignore them and type your own prompt. Suggestions are a quick way to continue iterating without thinking about what to ask next.

Tips for Best Results

  1. Start with a clear project description. Your first message sets the tone. Describe the app, its purpose, and the tech choices you want (e.g., "Build a SaaS dashboard using Tailwind CSS and Supabase for the backend").
  2. Review the preview after each change. Catch issues early rather than building on top of problems.
  3. Use the code editor for small tweaks. If you just need to change a color or fix a typo, it is faster to edit the file directly than to describe the change in chat.
  4. Combine with the visual editor. Use chat for structural changes and the visual editor for pixel-perfect spacing and styling adjustments.
  5. Be explicit about error handling. The AI writes functional code but may skip edge cases unless you ask. Say "Add error handling and loading states" when building forms or data fetching.
  6. Ask the AI to explain. If you are learning SvelteKit, ask "Explain what this code does" after a change. The AI will walk you through the implementation.

FAQ

How does the AI know about my project?

The AI reads your project files and understands your codebase before making changes. It sees the file structure, existing components, routes, and configuration. This means it can make changes that are consistent with your existing code.

Can I undo changes the AI made?

Yes. The AI uses git under the hood, so every set of changes is tracked. You can use the code editor terminal to run git commands, or ask the AI to revert its last changes.

Is there a message limit?

Usage depends on your plan. Each message consumes tokens based on the length of the conversation and the size of your project context. Shorter, focused conversations are more efficient than very long threads.

What if the AI makes a mistake?

Simply tell it what went wrong. Say "That button should be on the right side, not the left" or "The form validation is not working, the email field accepts any text." The AI will read the current code and fix the issue.

Can I use the chat editor for non-SvelteKit tasks?

The chat editor is optimized for SvelteKit development. The AI can help with general JavaScript/TypeScript, CSS, and configuration tasks within your project, but it is specifically tuned for SvelteKit patterns and best practices.