Artificial Intelligence · 1 min read
AI Studio: Server-Side Rendering, Server Functions, and Secrets
AI Studio can build full-stack web apps, not just front-end pages. New projects can use four server features.
| Feature | What it does | Use it for | | --- | --- | --- | | Server-side rendering (SSR) | Builds the page HTML on the server before it reaches the browser. | SEO, public pages, and social previews. | | Server Functions | Run private logic on the server that your front end can call. | Internal operations and calls that use private keys. | | REST APIs | Create endpoints such as
/api/.... | Webhooks, integrations, and outside apps. | | Secrets | Store API keys, tokens, and other private values outside your front-end code. | Any credential your app needs. |Server Functions or REST APIs?
- Use a Server Function when only your own app needs to call the logic.
- Use a REST API when an outside service needs to call your app, such as a webhook.
Keep credentials safe
- Open your project and go to Secrets.
- Add each key with a clear name, such as
PAYMENT_API_KEY. - Ask AI Studio to use the secret in a Server Function or REST API.
Never paste keys into chat prompts or front-end code. Secrets are only available to server code.
Existing projects
Older AI Studio projects keep their current front-end setup and are not changed automatically. If you want these features in an older project, see How to Migrate Existing React Projects to SSR in AI Studio.
Publishing
When you publish, AI Studio deploys your pages, server functions, and endpoints together. Test your endpoints in preview before you publish.