Add back in guides

components/docskit/components.tsx

@@ -1,16 +1,16 @@
-import { Block, CodeBlock } from 'codehike/blocks';
-import type { RawCode } from 'codehike/code';
-import Link from 'fumadocs-core/link';
-import { z } from 'zod';
-import { Code } from './code';
-import { SimpleCode } from './code-simple';
-import { InlineCode } from './inline-code';
-import { WithNotes } from './notes';
-import { NoteTooltip } from './notes.tooltip';
-import ScrollyCoding from './scrollycoding';
-import Slideshow from './slideshow';
-import Spotlight from './spotlight';
-import { Terminal } from './terminal';
+import { Block, CodeBlock } from "codehike/blocks";
+import type { RawCode } from "codehike/code";
+import Link from "fumadocs-core/link";
+import { z } from "zod";
+import { Code } from "./code";
+import { SimpleCode } from "./code-simple";
+import { InlineCode } from "./inline-code";
+import { WithNotes } from "./notes";
+import { NoteTooltip } from "./notes.tooltip";
+import ScrollyCoding from "./scrollycoding";
+import Slideshow from "./slideshow";
+import Spotlight from "./spotlight";
+import { Terminal } from "./terminal";
 
 // Export RawCode type for external use
 export type { RawCode };
@@ -38,13 +38,13 @@ export const docskit = {
 function DocsKitCode(props: { codeblock: RawCode }) {
   const { codeblock, ...rest } = props;
 
-  if (codeblock.lang === 'package-install') {
+  if (codeblock.lang === "package-install") {
     return <PackageInstall codeblock={codeblock} />;
   }
 
-  if (codeblock.lang === 'terminal') {
+  if (codeblock.lang === "terminal") {
     // Parse flags from meta string (e.g., "terminal -o" -> hideOutput: true)
-    const hideOutput = codeblock.meta?.includes('-o') || false;
+    const hideOutput = codeblock.meta?.includes("-o") || false;
     return <Terminal codeblocks={[codeblock]} hideOutput={hideOutput} />;
   }
 
@@ -60,7 +60,7 @@ function CodeTabs(props: unknown) {
   }).safeParse(props);
 
   if (error) {
-    throw betterError(error, 'CodeTabs');
+    throw betterError(error, "CodeTabs");
   }
 
   const { code, flags, storage } = data;
@@ -70,50 +70,114 @@ function CodeTabs(props: unknown) {
 
 function betterError(error: z.ZodError, componentName: string) {
   const { issues } = error;
-  if (issues.length === 1 && issues[0].path[0] === 'code') {
-    return new Error(`<${componentName}> should contain at least one codeblock marked with \`!!\``);
+  if (issues.length === 1 && issues[0].path[0] === "code") {
+    return new Error(
+      `<${componentName}> should contain at least one codeblock marked with \`!!\``,
+    );
   } else {
     return error;
   }
 }
 
 function DocsKitLink(props: any) {
-  if (props.href === 'tooltip') {
+  if (props.href === "tooltip") {
     return <NoteTooltip name={props.title}>{props.children}</NoteTooltip>;
   }
   return <Link {...props} />;
 }
 
 function PackageInstall({ codeblock }: { codeblock: RawCode }) {
-  return (
-    <Terminal
-      storage="package-install"
-      codeblocks={[
+  const meta = (codeblock.meta ?? "").toLowerCase();
+
+  const isPython = meta.includes("python") || meta.split(/\s+/).includes("py");
+  const noVenv = meta.split(/\s+/).includes("-no-venv");
+
+  const isJS =
+    meta.includes("javascript") ||
+    meta.includes("typescript") ||
+    meta.split(/\s+/).includes("js") ||
+    meta.split(/\s+/).includes("ts") ||
+    (!isPython && true);
+
+  const jsBlocks = [
+    {
+      ...codeblock,
+      value: "$ npm install " + codeblock.value,
+      meta: "npm",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ yarn add " + codeblock.value,
+      meta: "yarn",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ pnpm add " + codeblock.value,
+      meta: "pnpm",
+      lang: "terminal",
+    },
+    {
+      ...codeblock,
+      value: "$ bun add " + codeblock.value,
+      meta: "bun",
+      lang: "terminal",
+    },
+  ];
+
+  const pythonBlocks = noVenv
+    ? [
+        {
+          ...codeblock,
+          value: "$ uv add " + codeblock.value,
+          meta: "uv",
+          lang: "terminal",
+        },
         {
           ...codeblock,
-          value: '$ npm install ' + codeblock.value,
-          meta: 'npm',
-          lang: 'terminal',
+          value: "$ poetry add " + codeblock.value,
+          meta: "poetry",
+          lang: "terminal",
         },
         {
           ...codeblock,
-          value: '$ yarn add ' + codeblock.value,
-          meta: 'yarn',
-          lang: 'terminal',
+          value: "$ pip install " + codeblock.value,
+          meta: "pip",
+          lang: "terminal",
         },
+      ]
+    : [
         {
           ...codeblock,
-          value: '$ pnpm add ' + codeblock.value,
-          meta: 'pnpm',
-          lang: 'terminal',
+          value:
+            `$ uv venv\n` +
+            `$ source .venv/bin/activate\n` +
+            `$ uv add ${codeblock.value}`,
+          meta: "uv",
+          lang: "terminal",
         },
         {
           ...codeblock,
-          value: '$ bun add ' + codeblock.value,
-          meta: 'bun',
-          lang: 'terminal',
+          value: `$ poetry shell\n` + `$ poetry add ${codeblock.value}`,
+          meta: "poetry",
+          lang: "terminal",
         },
-      ]}
+        {
+          ...codeblock,
+          value:
+            `$ python -m venv .venv\n` +
+            `$ source .venv/bin/activate\n` +
+            `$ pip install ${codeblock.value}`,
+          meta: "pip",
+          lang: "terminal",
+        },
+      ];
+
+  return (
+    <Terminal
+      storage="package-install"
+      codeblocks={isPython ? pythonBlocks : jsBlocks}
     />
   );
 }
@@ -127,10 +191,12 @@ function TerminalPicker(props: unknown) {
   }).safeParse(props);
 
   if (error) {
-    throw betterError(error, 'TerminalPicker');
+    throw betterError(error, "TerminalPicker");
   }
 
   const { code, storage, flags } = data;
-  const hideOutput = flags?.includes('-o') || false;
-  return <Terminal codeblocks={code} storage={storage} hideOutput={hideOutput} />;
+  const hideOutput = flags?.includes("-o") || false;
+  return (
+    <Terminal codeblocks={code} storage={storage} hideOutput={hideOutput} />
+  );
 }

components/docskit/terminal.tsx

@@ -4,12 +4,12 @@ import {
   highlight,
   Pre,
   type RawCode,
-} from 'codehike/code';
-import { CommandBlock } from './annotations/terminal-command';
-import { OutputBlock } from './annotations/terminal-output';
-import { wordWrap } from './annotations/word-wrap';
-import { TerminalClient } from './terminal.client';
-import theme from './theme.mjs';
+} from "codehike/code";
+import { CommandBlock } from "./annotations/terminal-command";
+import { OutputBlock } from "./annotations/terminal-output";
+import { wordWrap } from "./annotations/word-wrap";
+import { TerminalClient } from "./terminal.client";
+import theme from "./theme.mjs";
 
 export async function Terminal(props: {
   codeblocks: RawCode[];
@@ -25,7 +25,11 @@ export async function Terminal(props: {
           <div className="bg-[var(--ch-0)] p-1">
             <Pre
               code={highlighted}
-              handlers={[createOutputHandler(props.hideOutput), wordWrap, command]}
+              handlers={[
+                createOutputHandler(props.hideOutput),
+                wordWrap,
+                command,
+              ]}
               className="bg-[var(--ch-18)] py-3 px-2 rounded-lg leading-6 font-mono"
               style={{ color: highlighted.style.color }}
             />
@@ -35,19 +39,25 @@ export async function Terminal(props: {
     }),
   );
 
-  return <TerminalClient tabs={tabs} storeKey={props.storage} key={props.storage || ''} />;
+  return (
+    <TerminalClient
+      tabs={tabs}
+      storeKey={props.storage}
+      key={props.storage || ""}
+    />
+  );
 }
 
 const createOutputHandler = (hideOutput?: boolean): AnnotationHandler => ({
-  name: 'output',
+  name: "output",
   Block: (props) => {
     const Component = OutputBlock as any;
     return <Component {...props} hideOutput={hideOutput} />;
   },
 });
 
 const command: AnnotationHandler = {
-  name: 'command',
+  name: "command",
   Block: CommandBlock,
 };
 
@@ -65,30 +75,32 @@ function extractAnnotations(code: string) {
   const lines = code.split(/\r?\n/);
   const annotations = [] as BlockAnnotation[];
   lines.forEach((line, index) => {
-    if (line.startsWith('$ ')) {
+    if (line.startsWith("$ ")) {
       annotations.push({
-        name: 'command',
+        name: "command",
         query: line.slice(2),
         fromLineNumber: index + 1,
         toLineNumber: index + 1,
       });
     } else {
       const last = annotations[annotations.length - 1];
-      if (last.name === 'command' && last.query.endsWith('\\')) {
+      if (last.name === "command" && last.query.endsWith("\\")) {
         last.query = `${last.query}\n${line}`;
         last.toLineNumber = index + 1;
-      } else if (!last || last.name !== 'output') {
+      } else if (!last || last.name !== "output") {
         annotations.push({
-          name: 'output',
-          query: '',
+          name: "output",
+          query: "",
           fromLineNumber: index + 1,
           toLineNumber: index + 1,
         });
-      } else if ('toLineNumber' in last) {
+      } else if ("toLineNumber" in last) {
         last.toLineNumber = index + 1;
       }
     }
   });
-  const codeWithoutPrompt = lines.map((line) => line.replace(/^\$ /, '')).join('\n');
+  const codeWithoutPrompt = lines
+    .map((line) => line.replace(/^\$ /, ""))
+    .join("\n");
   return { annotations, value: codeWithoutPrompt };
 }

content/docs/integrations/agno/quickstart.mdx

@@ -20,23 +20,10 @@ Make sure you have:
 
 Create and activate a virtual environment, then install dependencies:
 
-```bash Terminal -wc
-# Create project
-mkdir steel-agno-starter
-cd steel-agno-starter
-
-# (Recommended) Create & activate a virtual environment
-python3 -m venv .venv
-source .venv/bin/activate  # On Windows: .venv\Scripts\activate
-
-# Create files
-touch main.py .env
-
-# Install dependencies
-pip install agno steel-sdk python-dotenv playwright
+```package-install python
+agno steel-sdk python-dotenv playwright
 ```
 
-
 Create a `.env` file with your keys and a default task:
 
 ```env ENV -wcn -f .env

content/docs/integrations/browser-use/quickstart.mdx

@@ -20,22 +20,12 @@ Ensure you have the following:
 
 #### Step 1: Set up your environment
 
-First, create a project directory, set up a virtual environment, and install the required packages:
+First, set up a virtual environment, and install the required packages:
 
-```bash Terminal -wc
-# Create a project directory
-mkdir steel-browser-use-agent
-cd steel-browser-use-agent
-
-# Recommended: Create and activate a virtual environment
-uv venv
-source .venv/bin/activate  # On Windows, use: .venv\Scripts\activate
-
-# Install required packages
-pip install steel-sdk browser-use python-dotenv
+```package-install python
+steel-sdk browser-use python-dotenv
 ```
 
-
 Create a `.env` file with your API keys:
 
 ```env ENV -wcn -f .env

content/docs/integrations/claude-computer-use/quickstart-py.mdx

@@ -20,19 +20,10 @@ We'll build a Claude Computer Use loop that enables autonomous web task executio
 
 #### Step 1: Setup and Dependencies
 
-First, create a project directory, set up a virtual environment, and install the required packages:
+First, set up a virtual environment, and install the required packages:
 
-```bash Terminal -wc
-# Create a project directory
-mkdir steel-claude-computer-use
-cd steel-claude-computer-use
-
-# Recommended: Create and activate a virtual environment
-python -m venv venv
-source venv/bin/activate  # On Windows, use: venv\Scripts\activate
-
-# Install required packages
-pip install steel-sdk anthropic playwright python-dotenv pillow
+```package-install python
+steel-sdk anthropic playwright python-dotenv pillow
 ```