Configuring AskCodi API

Connect Bolt.diy to AskCodi API for powerful AI models.

AskCodi gives you access to specialized models optimized for UI generation and app development. The OpenAI-compatible API delivers better results than default models for complex UIs and multi-framework apps.

Prerequisites

• Bolt.diy desktop app installed from GitHub releases
• Active AskCodi account with API key
• Stable internet connection
• Basic desktop app settings knowledge

Your API key provides access to multiple AI models through a single OpenAI-compatible endpoint. Keys store securely in Bolt.diy's local config.

Step 1: Download Bolt.diy

Get Bolt.diy from GitHub releases: https://github.com/stackblitz-labs/bolt.diy/releases/latest

Mac users: Fix "app is damaged" error:

xattr -cr /path/to/Bolt.app

Replace /path/to/Bolt.app with your actual path.

Launch Bolt.diy after install.

Step 2: Open Settings

Click settings icon in left sidebar. The settings panel opens with configuration options.

Find "Local Providers" section for OpenAI-compatible integration.

Step 3: Enable OpenAILike Provider

Enable the "OpenAILike" option in Local Providers. This allows Bolt.diy to work with OpenAI-compatible APIs like AskCodi.

Config options for custom endpoints appear after enabling.

Step 4: Set Base URL

In OpenAILike settings, find Base URL field. Enter:

https://api.askcodi.com/v1

This routes all AI requests to AskCodi instead of local endpoints. The /v1 path ensures API compatibility.

Step 5: Add API Key

Close the settings screen completely. This makes the API key input appear in the main interface.

In main Bolt.diy interface, find the OpenAILike API key field. Enter your AskCodi API key from the dashboard.

Step 6: Select Model

After adding your API key, look for the model selection dropdown in Bolt.diy's interface. The app fetches available models from AskCodi.

Choose the best model for UI generation. For visual app building, use models that understand design concepts and generate clean code. Examples: gpt-4o, claude-3-sonnet.

Step 7: Test Integration

1. Create new project or open existing one
2. Verify selected AskCodi model shows as active
3. Test: "Create simple dashboard with sidebar"
4. Check live preview updates and response quality

Try basic and complex UI tasks to test request handling.

Model Selection Strategy

Different models work better for different tasks:

• Conceptual design: Models with strong reasoning for design concepts
• Implementation: Code generation models with framework knowledge
• Visual styling: Models that understand design principles and CSS frameworks

Test different models to find the best fit for your apps and requirements.

Optimization Tips

Monitor Usage: Check AskCodi dashboard for API consumption. Visual UI generation uses significant tokens, especially for complex layouts.

Prompt Engineering: Be specific about design and framework requirements. Detailed prompts produce better results.

Iterative Development: Start with basic app structure. Add complexity gradually to refine design and functionality.

Framework Consistency: Align descriptions with framework patterns and best practices for appropriate code generation.

Troubleshooting

Provider Not Loading: Verify API key is correct and not expired. Confirm base URL is https://api.askcodi.com/v1 without extra spaces.

Model Selection Issues: Close settings completely to let main interface fetch models. Check your AskCodi account has access to selected models.

API Connection Failures: Check internet connection and AskCodi API endpoint accessibility.

Generation Quality: Try different models or refine natural language descriptions with more detail.

Settings Not Saving: Verify Bolt.diy has permission to save local configuration files.

Security Best Practices

API Key Security: Store keys securely. Use separate AskCodi API keys for Bolt.diy to isolate usage.

Usage Limits: Set usage alerts in AskCodi to monitor consumption. Visual UI generation uses API credits quickly.

Version Control: Don't include API keys in exported code or version control systems.

Quick Takeaways

• Download Bolt.diy from GitHub releases
• Enable "OpenAILike" provider in Local Providers
• Use https://api.askcodi.com/v1 as base URL
• Add AskCodi API key in main interface after closing settings
• Select AskCodi models for UI generation
• Works with React, Next.js, Svelte, Vue
• Monitor API usage - UI generation consumes tokens
• Natural language input for visual design

Production Best Practices

Start with simple applications to validate integration before complex projects. Use specific descriptions for UI generation to get appropriate AI output.

Create separate AskCodi API keys to track usage between Bolt.diy and other applications. This helps monitor costs and optimize model selection.

Next Steps

Your Bolt.diy connects to AskCodi's AI models while keeping visual app building capabilities. You can leverage different models for design and code generation requirements.

Test different AskCodi models with Bolt.diy to optimize model selection based on UI quality and performance.