Sandbox component

.changeset/three-bees-follow.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Added Sandbox componet

.github/CONTRIBUTING.md

@@ -81,6 +81,15 @@ When adding code examples:
 - Use semantic HTML in components
 - Follow Tailwind CSS conventions for styling
 
+### Adding a New Component
+
+When adding a new component to the library, follow these steps:
+
+1. **Create the component file** in `packages/elements/src/`
+2. **Create example file(s)** in `packages/examples/src/`
+3. **Create documentation** in `apps/docs/content/docs/components/`
+4. **Wire up examples with Preview**
+
 ## Pull Request Guidelines
 
 1. **Ensure your PR has a clear purpose**
@@ -174,6 +183,8 @@ When reporting issues:
 - Review the documentation at [ai-sdk.dev/elements](https://ai-sdk.dev/elements)
 - Reach out to maintainers if you need guidance
 
+
+
 ## Code of Conduct
 
 This project follows a Code of Conduct. By participating, you agree to uphold professional, respectful, and inclusive behavior.

apps/docs/content/docs/components/(chatbot)/sandbox.mdx

@@ -0,0 +1,223 @@
+---
+title: Sandbox
+description: A collapsible container for displaying AI-generated code and output in chat interfaces.
+path: elements/components/sandbox
+---
+
+The `Sandbox` component provides a structured way to display AI-generated code alongside its execution output in chat conversations. It features a collapsible container with status indicators and tabbed navigation between code and output views.
+
+<Preview path="sandbox" />
+
+## Installation
+
+<ElementsInstaller path="sandbox" />
+
+## Features
+
+- Collapsible container with smooth animations
+- Status badges showing execution state (Pending, Running, Completed, Error)
+- Tabs for Code and Output views
+- Syntax-highlighted code display
+- Copy button for easy code sharing
+- Works with AI SDK tool state patterns
+
+## Usage with AI SDK
+
+The Sandbox component integrates with the AI SDK's tool state to show code generation progress:
+
+```tsx title="components/code-sandbox.tsx"
+"use client";
+
+import type { ToolUIPart } from "ai";
+import {
+  Sandbox,
+  SandboxCode,
+  SandboxContent,
+  SandboxCopyButton,
+  SandboxHeader,
+  SandboxOutput,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+} from "@/components/ai-elements/sandbox";
+
+type CodeSandboxProps = {
+  toolPart: ToolUIPart;
+};
+
+export const CodeSandbox = ({ toolPart }: CodeSandboxProps) => {
+  const code = toolPart.input?.code ?? "";
+  const output = toolPart.output?.logs ?? "";
+
+  return (
+    <Sandbox>
+      <SandboxHeader
+        state={toolPart.state}
+        title={toolPart.input?.filename ?? "code.tsx"}
+      />
+      <SandboxContent>
+        <SandboxTabs defaultValue="code">
+          <SandboxTabsBar>
+            <SandboxTabsList>
+              <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
+              <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
+            </SandboxTabsList>
+            <SandboxCopyButton />
+          </SandboxTabsBar>
+          <SandboxTabContent value="code">
+            <SandboxCode code={code} language="tsx" />
+          </SandboxTabContent>
+          <SandboxTabContent value="output">
+            <SandboxOutput code={output} />
+          </SandboxTabContent>
+        </SandboxTabs>
+      </SandboxContent>
+    </Sandbox>
+  );
+};
+```
+
+## Props
+
+### `<Sandbox />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying Collapsible component.",
+      type: "React.ComponentProps<typeof Collapsible>",
+    },
+  }}
+/>
+
+### `<SandboxHeader />`
+
+<TypeTable
+  type={{
+    title: {
+      description: "The title displayed in the header (e.g., filename).",
+      type: "string",
+      default: "undefined",
+    },
+    state: {
+      description:
+        "The current execution state, used to display the appropriate status badge.",
+      type: 'ToolUIPart["state"]',
+      required: true,
+    },
+    className: {
+      description: "Additional CSS classes for the header.",
+      type: "string",
+    },
+  }}
+/>
+
+### `<SandboxContent />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description: "Any other props are spread to the CollapsibleContent.",
+      type: "React.ComponentProps<typeof CollapsibleContent>",
+    },
+  }}
+/>
+
+### `<SandboxTabs />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying Tabs component.",
+      type: "React.ComponentProps<typeof Tabs>",
+    },
+  }}
+/>
+
+### `<SandboxTabsBar />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description: "Any other props are spread to the container div.",
+      type: "React.HTMLAttributes<HTMLDivElement>",
+    },
+  }}
+/>
+
+### `<SandboxTabsList />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying TabsList component.",
+      type: "React.ComponentProps<typeof TabsList>",
+    },
+  }}
+/>
+
+### `<SandboxTabsTrigger />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying TabsTrigger component.",
+      type: "React.ComponentProps<typeof TabsTrigger>",
+    },
+  }}
+/>
+
+### `<SandboxCopyButton />`
+
+Automatically copies the content of the currently active tab. Must be used within `SandboxTabs`.
+
+<TypeTable
+  type={{
+    className: {
+      description: "Additional CSS classes for the container div.",
+      type: "string",
+    },
+  }}
+/>
+
+### `<SandboxTabContent />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying TabsContent component.",
+      type: "React.ComponentProps<typeof TabsContent>",
+    },
+  }}
+/>
+
+### `<SandboxCode />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props are spread to the underlying CodeBlock component.",
+      type: "React.ComponentProps<typeof CodeBlock>",
+    },
+  }}
+/>
+
+### `<SandboxOutput />`
+
+<TypeTable
+  type={{
+    "...props": {
+      description:
+        "Any other props (except language) are spread to the underlying CodeBlock component. Language is set to 'log'.",
+      type: "Omit<React.ComponentProps<typeof CodeBlock>, 'language'>",
+    },
+  }}
+/>