Knowledge Base
Everything you need to know about building with Syntax AI
1. Create Your Account
Sign up with GitHub to get started. Your account includes initial credits to begin building.
2. Start a New Project
Click "New Project" from your dashboard. Choose a template (Next.js, React, etc.) or start from scratch.
3. Chat with AI
Describe what you want to build. Be specific: "Create a landing page with hero section, features grid, and pricing table."
4. Preview & Iterate
Watch your app come to life in real-time. Make changes by chatting with the AI or editing code directly.
5. Deploy
Click "Deploy" to push your app to Vercel. Share your creation with the world!
How does pricing work?
Syntax offers 4 subscription plans: Free (Void), Var (€19.99/mo), Func (€49.99/mo), and Sudo (€180/mo). Each tier includes different features and credit allowances. All plans use a credit-based system for AI usage - you pay for model calls at cost + 15% platform fee. Top up your wallet anytime.
Which AI models can I use?
Choose from GPT-5, GPT-5.1, GPT-5.2, Claude Opus 4.5/4.6, Claude Sonnet 4.5/4.6, and Gemini 3 Pro. Each model has different strengths and pricing. Select your preferred model from the dropdown in the chat panel.
What tech stack does Syntax support?
Currently: Next.js 15 (Pages Router), React 18, TypeScript, Tailwind CSS, shadcn/ui, and Supabase backend. More frameworks coming soon!
How does Task Management work?
Use Plan Mode to generate a detailed task breakdown. The AI creates a Kanban board with tasks organized by status (Todo, In Progress, Testing, Done). You can manually create tasks, drag-and-drop to change status, or let the AI execute tasks in Autopilot mode.
Can I edit the code manually?
Yes! Use the Code Editor tab to make manual changes. The AI will respect your edits and work with them. You can also manage environment variables, switch between environments, and configure project settings.
How do I manage conversation threads?
Click the History icon in the chat panel to view all threads. You can create new threads, rename them, delete old ones, and switch between conversations. Each thread maintains its own context and history.
What's the difference between Command Mode and Plan Mode?
Command Mode: Fast, direct implementation - just tell the AI what to build. Plan Mode: AI creates a detailed 8-stage plan with task breakdown before building. Use Plan Mode for complex projects with multiple features.
How do I add a database?
Click Settings → Database tab to connect Supabase. The AI will automatically set up tables, RLS policies, and write queries for you. You can manage your database schema, view data, and configure authentication directly from the platform.
Can I deploy my project?
Yes! Click 'Deploy' to push to Vercel with one click. You can add custom domains from the deployment settings. The platform handles all configuration automatically.
How does version control work?
Every change is automatically committed to GitHub. Click 'Version History' to view all commits, see what changed, and revert to previous versions if needed. Your code is safe and always recoverable.
Security Best Practices
Environment Variables & API Keys
🔒 How Syntax Protects Your Secrets
AI Never Sees Secret Values
The AI only receives environment variable names, never actual values. Example: AI sees STRIPE_SECRET_KEY=[CONFIGURED] instead of your real key.
Values Injected at Runtime
Your actual API keys are injected directly into the WebContainer at runtime, never passing through AI providers (Anthropic, OpenAI, Google).
Database Encryption
Environment variables are stored encrypted in the database with industry-standard AES-256 encryption.
✅ Security Best Practices
1. Never Commit Secrets to Git
Always use environment variables for API keys, database passwords, and tokens. Never hardcode secrets in your code files.
2. Use NEXT_PUBLIC_ Prefix Correctly
Variables with NEXT_PUBLIC_ prefix are exposed to the browser. Use this ONLY for non-sensitive values.
NEXT_PUBLIC_SUPABASE_URL- Safe (public)NEXT_PUBLIC_SUPABASE_ANON_KEY- Safe (public, rate-limited)NEXT_PUBLIC_STRIPE_SECRET_KEY- DANGER! Never expose secret keys3. Separate Keys by Environment
Use different API keys for development, staging, and production. This limits damage if a key is compromised.
4. Rotate Keys Regularly
Regenerate API keys periodically (every 90 days recommended) and immediately if you suspect compromise.
5. Use Minimal Permissions
When creating API keys, grant only the permissions your application actually needs. For example, use read-only keys for data display, write keys only where necessary.
⚠️ Common Security Mistakes to Avoid
Hardcoding secrets in code files
Always use environment variables
Sharing keys in chat/email/Slack
Use secure password managers or vault services
Using production keys in development
Always use separate test/dev keys
Committing .env files to Git
Add .env* to .gitignore immediately
🔧 How to Set Up Keys Securely in Syntax
Open Project Settings
Click the Settings icon in your project toolbar
Navigate to Environment Variables tab
Find the "Environment" section in the settings panel
Add your variables in KEY=value format
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGc...
STRIPE_SECRET_KEY=sk_test_...
DATABASE_URL=postgresql://...
Click "Save Environment Variables"
Your keys are encrypted and stored securely
Use in your code with process.env
const key = process.env.STRIPE_SECRET_KEY;
Still Need Help?
Can't find what you're looking for? Join our community or contact support.