Update Documentation for Add Models For Personal Use, Build Your First UI Using UI Builder #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

SuriyaKumar2402 merged 4 commits into development from local-model-ui-builder

Feb 5, 2026

code-studio/how-to-guides/add-local-model.md

-Original file line number
+Diff line change
@@ -0,0 +1,76 @@
+    ---
+    title: How to Add Personal Models
+    description: Learn how to add and manage your own AI models in Code Studio using API keys from providers like OpenAI and Anthropic.
+    platform: syncfusion-code-studio
+    keywords: how-to, BYOK, personal-models, API-keys
+    ---
+    # Add Models for Personal Use
+    ## Overview
+    Personal models in Code Studio allow you to integrate AI models from various providers using your own API keys. This feature gives you access to specific models that may not be available in your organization's configuration. You can add, manage, and use these models alongside your organization's models for enhanced flexibility and experimentation.
+    ## When to Use
+    Use personal models when you need to:
+    - Experiment with specific models for personal projects
+    - Access models when they are not available in your organization’s configuration
+    - Compare different providers and model capabilities
+    - Match models to unique coding or cost requirements
+    ## Prerequisites
+    - Valid API keys from your chosen provider (e.g., OpenAI, Anthropic)
+    - Active provider account with sufficient credits or quota
+    ## How To Add a Personal Model?
+. Click the model’s section dropdown and select `Manage Models`.
+       <img src="how-to-guides-images/manageModels.png" alt="Manage Models">
+. Choose your preferred Provider (e.g., OpenAI, Anthropic).
+       <img src="how-to-guides-images/selectProvider.png" alt="Select Providers">
+. Enter your API Key for the selected provider.
+       <img src="how-to-guides-images/apiKey.png" alt="API Key">
+       > Note: Ensure the API key is valid and correct.
+. After adding the key, available models will be listed. Choose the models you want from the list.
+       <img src="how-to-guides-images/modelList.png" alt="Models">
+. Click `OK` to add the selected model(s).
+       <img src="how-to-guides-images/clickOk.png" alt="Choose Model">
+. The added models appear under `Other Models`. You can use them like any built‑in or organization‑configured model.
+       <img src="how-to-guides-images/otherModels.png" alt="Other Model">
+    ## How To Remove a Personal Model?
+. Open `Manage Models` from the model’s dropdown section.
+       <img src="how-to-guides-images/manageModels.png" alt="Manage Models">
+. Select the Provider (e.g., OpenAI, Anthropic).
+       <img src="how-to-guides-images/selectProvider.png" alt="Select Providers">
+. Uncheck the model you want to remove and click `OK`.
+       <img src="how-to-guides-images/modelList.png" alt="Remove Model">
+    ## Tips
+    - Use separate API keys for personal and organizational work
+    - Prefer lightweight models for small tasks to manage costs
+    - Keep API keys secure and never commit them to repositories
+    - Test models on small tasks first to understand behavior
+    - Remove unused models to keep the workspace organized

code-studio/how-to-guides/how-to-guides-images/apiKey.png

Sorry, something went wrong. Reload?