feat: improve devtools ui and fix up bugs (#70)

* feat: improve devtools ui and fix up bugs

* ci: apply automated fixes

* make colors more subtle

* update docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

docs/getting-started/quick-start.md

@@ -53,14 +53,15 @@ export async function POST(request: Request) {
     );
   }
 
-  const { messages } = await request.json();
+  const { messages, conversationId } = await request.json();
 
   try {
     // Create a streaming chat response
     const stream = chat({
       adapter: openai(),
       messages,
       model: "gpt-4o",
+      conversationId
     });
 
     // Convert stream to HTTP response

docs/guides/multimodal-content.md

@@ -92,12 +92,12 @@ const openai = new OpenAI({ apiKey: 'your-key' })
 
 // Image with detail level metadata
 const message = {
-  role: 'user' as const,
+  role: 'user' ,
   content: [
-    { type: 'text' as const, text: 'Describe this image' },
+    { type: 'text' , text: 'Describe this image' },
     {
-      type: 'image' as const,
-      source: { type: 'data' as const, value: imageBase64 },
+      type: 'image' ,
+      source: { type: 'data' , value: imageBase64 },
       metadata: { detail: 'high' } // 'auto' | 'low' | 'high'
     }
   ]
@@ -119,25 +119,25 @@ const anthropic = new Anthropic({ apiKey: 'your-key' })
 
 // Image with media type
 const imageMessage = {
-  role: 'user' as const,
+  role: 'user' ,
   content: [
-    { type: 'text' as const, text: 'What do you see?' },
+    { type: 'text' , text: 'What do you see?' },
     {
-      type: 'image' as const,
-      source: { type: 'data' as const, value: imageBase64 },
+      type: 'image' ,
+      source: { type: 'data' , value: imageBase64 },
       metadata: { media_type: 'image/jpeg' }
     }
   ]
 }
 
 // PDF document
 const docMessage = {
-  role: 'user' as const,
+  role: 'user',
   content: [
-    { type: 'text' as const, text: 'Summarize this document' },
+    { type: 'text', text: 'Summarize this document' },
     {
-      type: 'document' as const,
-      source: { type: 'data' as const, value: pdfBase64 }
+      type: 'document',
+      source: { type: 'data', value: pdfBase64 }
     }
   ]
 }
@@ -158,12 +158,12 @@ const gemini = new GeminiAdapter({ apiKey: 'your-key' })
 
 // Image with mimeType
 const message = {
-  role: 'user' as const,
+  role: 'user',
   content: [
-    { type: 'text' as const, text: 'Analyze this image' },
+    { type: 'text', text: 'Analyze this image' },
     {
-      type: 'image' as const,
-      source: { type: 'data' as const, value: imageBase64 },
+      type: 'image',
+      source: { type: 'data', value: imageBase64 },
       metadata: { mimeType: 'image/png' }
     }
   ]
@@ -185,12 +185,12 @@ const ollama = new OllamaAdapter({ host: 'http://localhost:11434' })
 
 // Image as base64
 const message = {
-  role: 'user' as const,
+  role: 'user',
   content: [
-    { type: 'text' as const, text: 'What is in this image?' },
+    { type: 'text', text: 'What is in this image?' },
     {
-      type: 'image' as const,
-      source: { type: 'data' as const, value: imageBase64 }
+      type: 'image',
+      source: { type: 'data', value: imageBase64 }
     }
   ]
 }
@@ -208,9 +208,9 @@ Use `type: 'data'` for inline base64-encoded content:
 
 ```typescript
 const imagePart = {
-  type: 'image' as const,
+  type: 'image',
   source: {
-    type: 'data' as const,
+    type: 'data',
     value: 'iVBORw0KGgoAAAANSUhEUgAAAAUA...' // Base64 string
   }
 }
@@ -222,9 +222,9 @@ Use `type: 'url'` for content hosted at a URL:
 
 ```typescript
 const imagePart = {
-  type: 'image' as const,
+  type: 'image' ,
   source: {
-    type: 'url' as const,
+    type: 'url' ,
     value: 'https://example.com/image.jpg'
   }
 }

docs/guides/per-model-type-safety.md

@@ -3,80 +3,10 @@ title: Per-Model Type Safety
 id: per-model-type-safety
 ---
 
-The AI SDK now provides **model-specific type safety** for `providerOptions`. Each model's capabilities (defined in `model-meta.ts`) determine which provider options are allowed, and TypeScript will enforce this at compile time.
+The AI SDK provides **model-specific type safety** for `providerOptions`. Each model's capabilities determine which provider options are allowed, and TypeScript will enforce this at compile time.
 
 ## How It Works
-
-### Architecture
-
-1. **Manual Type Map per Adapter**  
-   Each adapter (e.g., OpenAI) defines an explicit type map that associates each model name with its allowed provider option fragments:
-
-   ```typescript
-   // In ai-openai/src/model-meta.ts
-   export type OpenAIChatModelProviderOptionsByName = {
-     // Models WITH structured output support (include OpenAIStructuredOutputOptions)
-     "gpt-5": OpenAIBaseOptions &
-       OpenAIReasoningOptions &
-       OpenAIStructuredOutputOptions &
-       OpenAIToolsOptions &
-       OpenAIStreamingOptions &
-       OpenAIMetadataOptions;
-     "gpt-4o": OpenAIBaseOptions &
-       OpenAIStructuredOutputOptions &
-       OpenAIToolsOptions &
-       OpenAIStreamingOptions &
-       OpenAIMetadataOptions;
-
-     // Models WITHOUT structured output support (exclude OpenAIStructuredOutputOptions)
-     "gpt-4-turbo": OpenAIBaseOptions &
-       OpenAIToolsOptions &
-       OpenAIStreamingOptions &
-       OpenAIMetadataOptions;
-     "gpt-4": OpenAIBaseOptions &
-       OpenAIToolsOptions &
-       OpenAIStreamingOptions &
-       OpenAIMetadataOptions;
-     // ...
-   };
-   ```
-
-2. **Adapter Integration**  
-   The adapter passes this type map as the 5th generic parameter to `BaseAdapter`:
-
-   ```typescript
-   class OpenAI extends BaseAdapter<
-     typeof OPENAI_CHAT_MODELS,
-     typeof OPENAI_EMBEDDING_MODELS,
-     OpenAIProviderOptions,
-     OpenAIEmbeddingProviderOptions,
-     OpenAIChatModelProviderOptionsByName // <-- 5th generic
-   > {
-     _modelProviderOptionsByName!: OpenAIChatModelProviderOptionsByName; // Type-only property
-   }
-   ```
-
-3. **Core Type System**  
-   The core standalone functions use generic type helpers to extract model-specific options:
-
-   ```typescript
-   type ExtractModelSpecificProviderOptions<TAdapter, TModel> =
-     TModel extends keyof TAdapter["_modelProviderOptionsByName"]
-       ? TAdapter["_modelProviderOptionsByName"][TModel]
-       : TAdapter["_modelProviderOptionsByName"][string];
-   ```
-
-4. **Function Signatures**  
-   The `chat` function is generic in `TModel` and constrains `providerOptions` accordingly:
-
-   ```typescript
-   chat<TAdapter extends AIAdapter<any, any, any, any, any>>(
-     options: ChatStreamOptionsUnion<TAdapter> & {
-       model: ExtractModelsFromAdapter<TAdapter>
-     }
-   )
-   ```
-
+ 
 ## Usage Examples
 
 ### ✅ Correct Usage
@@ -93,8 +23,8 @@ const validCall = chat({
   model: "gpt-5",
   messages: [],
   providerOptions: {
+    // OK - text is included for gpt-5
     text: {
-      // OK - OpenAIStructuredOutputOptions is included for gpt-5
       type: "json_schema",
       json_schema: {
         /* ... */
@@ -121,106 +51,9 @@ const invalidCall = chat({
 TypeScript will produce:
 
 ```
-error TS2353: Object literal may only specify known properties, and 'text' does not exist in type 'OpenAIBaseOptions & OpenAIToolsOptions & OpenAIStreamingOptions & OpenAIMetadataOptions'.
-```
-
-## Adding New Models
-
-When adding a new model to an adapter:
-
-1. **Add model metadata** with capabilities in `model-meta.ts`:
-
-   ```typescript
-   export const NEW_MODEL_META = {
-     // ... metadata
-   } as const satisfies ModelMeta<
-     OpenAIBaseOptions & OpenAIStructuredOutputOptions
-   >;
-   ```
-
-2. **Update the type map** in `OpenAIChatModelProviderOptionsByName`:
-
-   ```typescript
-   export type OpenAIChatModelProviderOptionsByName = {
-     // ... existing models
-     "new-model": OpenAIBaseOptions &
-       OpenAIStructuredOutputOptions &
-       OpenAIToolsOptions &
-       OpenAIStreamingOptions &
-       OpenAIMetadataOptions;
-   };
-   ```
-
-3. **Add to model list**:
-   ```typescript
-   export const OPENAI_CHAT_MODELS = [
-     // ... existing
-     "new-model",
-   ] as const;
-   ```
-
-## Adding New Adapters
-
-To implement per-model typing in a new adapter:
-
-1. **Define provider option fragments**:
-
-   ```typescript
-   interface MyProviderBaseOptions {
-     /* ... */
-   }
-   interface MyProviderStructuredOptions {
-     /* ... */
-   }
-   interface MyProviderToolOptions {
-     /* ... */
-   }
-   ```
-
-2. **Create the model type map**:
-
-   ```typescript
-   export type MyProviderModelProviderOptionsByName = {
-     "model-a": MyProviderBaseOptions & MyProviderStructuredOptions;
-     "model-b": MyProviderBaseOptions & MyProviderToolOptions;
-     // ...
-   };
-   ```
-
-3. **Pass as 5th generic to BaseAdapter**:
-   ```typescript
-   class MyProviderAdapter extends BaseAdapter<
-     typeof MY_CHAT_MODELS,
-     typeof MY_EMBEDDING_MODELS,
-     MyProviderOptions,
-     MyProviderEmbeddingOptions,
-     MyProviderModelProviderOptionsByName // <-- Type map
-   > {
-     _modelProviderOptionsByName!: MyProviderModelProviderOptionsByName;
-   }
-   ```
-
-## Technical Notes
-
-### Why Manual Type Maps?
-
-Initially, we attempted automatic type extraction from `ModelMeta` using conditional types:
-
-```typescript
-type OpenAIModelProviderOptions<TModel> =
-  OpenAIModelMetaMap[TModel] extends ModelMeta<infer TProviderOptions>
-    ? TProviderOptions
-    : unknown;
+error TS2353: Object literal may only specify known properties, and 'text' does not exist in type ...'.
 ```
-
-This approach failed because TypeScript's `satisfies` operator validates types but doesn't preserve generic type parameters in the resulting value. The value retains its concrete object type, not `ModelMeta<T>`, so the conditional type extraction fails.
-
-**Solution**: Manually define the type map with explicit intersections for each model. This ensures accurate type narrowing and is the recommended approach.
-
-### Type-Only Property
-
-The `_modelProviderOptionsByName` property on adapters is a **type-only** property (definite assignment `!`). It exists purely for TypeScript's type system and is never accessed at runtime. This allows the core standalone functions to extract model-specific types via indexed access without runtime overhead.
-
+ 
 ## Benefits
 
 - **Compile-time safety**: Catch incorrect provider options before deployment

docs/reference/functions/chat.md

@@ -9,7 +9,7 @@ title: chat
 function chat<TAdapter, TModel>(options): AsyncIterable<StreamChunk>;
 ```
 
-Defined in: [core/chat.ts:739](https://github.com/TanStack/ai/blob/main/packages/typescript/ai/src/core/chat.ts#L739)
+Defined in: [core/chat.ts:741](https://github.com/TanStack/ai/blob/main/packages/typescript/ai/src/core/chat.ts#L741)
 
 Standalone chat streaming function with type inference from adapter
 Returns an async iterable of StreamChunks for streaming responses