Add OpenAI integration section

Author: pinkeshmars

docs/workspace/agent-panel.md

@@ -328,6 +328,37 @@ You can view or edit your rule file anytime from the Dreamflow File Editor. Once
 - Update the file when your architecture or policies change.
 
 
+## OpenAI Integration
+Dreamflow Agent lets you add AI-powered features to your app without needing your own OpenAI API key. When you use the Agent to generate an AI feature, Dreamflow automatically connects to OpenAI through a secure proxy using Dreamflow’s internal API key.
+
+This allows you to **test and experiment with AI capabilities instantly**. All credit usage during development is billed to your Dreamflow account.
+
+**How It Works**
+
+Dreamflow automatically routes all AI-related requests through its **OpenAI proxy**, which securely handles authentication and API calls.
+
+```
+Your App  →  Dreamflow Proxy  →  OpenAI API
+```
+
+When you generate an AI feature through the Agent (for example, *“Add an AI habit suggestion generator”*), Dreamflow automatically includes an OpenAI configuration file similar to the one below:
+
+![open-ai-integration](imgs/open-ai-integration.avif)
+
+These environment variables are injected by Dreamflow when running your app in preview mode.
+
+### Update API Key
+
+When you export your project or deploy it to production, you must update your configuration to use your **own OpenAI API key** instead of Dreamflow’s proxy.
+
+You can do this directly inside the file generated by Dreamflow. Here’s an example:
+
+```jsx
+// Replace these with your own OpenAI credentials
+const String apiKey = 'YOUR_OPENAI_API_KEY';
+const String endpoint = 'https://api.openai.com/v1';
+```
+
 ## FAQ
 
 <details>