Skip to content
Dethink Components
Dethink studio

Launch strategy

Your space to think things through

  1. You

    Help me turn our launch ideas into a clear plan for the first week.

Sample responses · no messages or files leave this demo

Recipe details

AIAdvancedAIChatStreamingApprovals

AI Chat Studio

A complete AI conversation workspace with thinking and tool activity, approvals, streaming, sources, attachments, recovery, and independent conversation history.

Source

Copy the whole example or lift the component compositions into your own app. Recipes are showcase examples, not registry blocks.

examples/recipes/ai-chat-studio.tsx
"use client";

import type { RecipePreviewProps } from "@/lib/recipe-presentation";
import { ChatWorkspace } from "../chat/workspace";

export function AiChatStudioRecipe({
  presentation = "embedded",
}: RecipePreviewProps) {
  return (
    <div
      data-recipe-surface="ai-chat-studio"
      className={
        presentation === "full-page"
          ? "bg-muted/20 min-h-[calc(100dvh-7rem)] p-3 sm:p-6"
          : "min-w-0 p-2 sm:p-4"
      }
    >
      <div className="mx-auto max-w-[1440px]">
        <ChatWorkspace embedded={presentation === "embedded"} />
      </div>
    </div>
  );
}