From 145bd0cca66360842aa2f28567608f71b99b24e8 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Thu, 13 Mar 2025 13:10:50 -0700 Subject: [PATCH] feat(docs): added more docs, cleaned up --- docs/components/icons.tsx | 265 ++++++++++++++++++++ docs/components/ui/block-types.tsx | 123 +++++++++ docs/components/ui/features.tsx | 102 ++++++++ docs/content/docs/blocks/index.mdx | 84 +------ docs/content/docs/connections/index.mdx | 5 + docs/content/docs/execution/index.mdx | 5 + docs/content/docs/getting-started/index.mdx | 100 +++----- docs/content/docs/introduction/index.mdx | 73 +----- docs/content/docs/meta.json | 2 +- docs/lib/utils.ts | 9 + docs/next.config.mjs | 10 - docs/next.config.ts | 19 ++ docs/package-lock.json | 31 ++- docs/package.json | 5 +- docs/tsconfig.json | 9 +- 15 files changed, 608 insertions(+), 234 deletions(-) create mode 100644 docs/components/icons.tsx create mode 100644 docs/components/ui/block-types.tsx create mode 100644 docs/components/ui/features.tsx create mode 100644 docs/content/docs/connections/index.mdx create mode 100644 docs/content/docs/execution/index.mdx create mode 100644 docs/lib/utils.ts delete mode 100644 docs/next.config.mjs create mode 100644 docs/next.config.ts diff --git a/docs/components/icons.tsx b/docs/components/icons.tsx new file mode 100644 index 000000000..c1f67d79d --- /dev/null +++ b/docs/components/icons.tsx @@ -0,0 +1,265 @@ +import { SVGProps } from 'react' + +export function ApiIcon(props: SVGProps) { + return ( + + + + ) +} + +export function ConditionalIcon(props: SVGProps) { + return ( + + + + ) +} + +export function AgentIcon(props: SVGProps) { + return ( + + + + + + ) +} + +export function CodeIcon(props: SVGProps) { + return ( + + + + ) +} + +export function ChartBarIcon(props: SVGProps) { + return ( + + + + ) +} + +export const ConnectIcon = (props: SVGProps) => ( + + + +) + +export const GmailIcon = (props: SVGProps) => { + return ( + + + + + + + + ) +} + +export function FirecrawlIcon(props: SVGProps) { + return ( + + + + + + + + ) +} + +export function ExaAIIcon(props: SVGProps) { + return ( + + + + ) +} + +export const NotionIcon = (props: SVGProps) => { + return ( + + + + ) +} + +export const PerplexityIcon = (props: SVGProps) => { + return ( + + + + ) +} + +export const xIcon = (props: SVGProps) => { + return ( + + + + ) +} + +export const SlackIcon = (props: SVGProps) => ( + + + + + + + + +) diff --git a/docs/components/ui/block-types.tsx b/docs/components/ui/block-types.tsx new file mode 100644 index 000000000..39cb9773b --- /dev/null +++ b/docs/components/ui/block-types.tsx @@ -0,0 +1,123 @@ +import { cn } from '@/lib/utils' +import { AgentIcon, ApiIcon, ChartBarIcon, CodeIcon, ConditionalIcon, ConnectIcon } from '../icons' + +// Custom Feature component specifically for BlockTypes to handle the 6-item layout +const BlockFeature = ({ + title, + description, + icon, + href, + index, + totalItems, + itemsPerRow, +}: { + title: string + description: string + icon: React.ReactNode + href?: string + index: number + totalItems: number + itemsPerRow: number +}) => { + const content = ( + <> + {index < itemsPerRow && ( +
+ )} + {index >= itemsPerRow && ( +
+ )} +
{icon}
+
+
+ + {title} + +
+

+ {description} +

+ + ) + + const containerClasses = cn( + 'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800', + (index === 0 || index === itemsPerRow) && 'lg:border-l dark:border-neutral-800', + index < itemsPerRow && 'lg:border-b dark:border-neutral-800', + href && 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900/50 transition-colors' + ) + + if (href) { + return ( + + {content} + + ) + } + + return
{content}
+} + +export function BlockTypes() { + const features = [ + { + title: 'Agent', + description: + 'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.', + icon: , + href: '/docs/blocks/agent', + }, + { + title: 'API', + description: + 'Connect to any external API with support for all standard HTTP methods and customizable request parameters.', + icon: , + href: '/docs/blocks/api', + }, + { + title: 'Condition', + description: + 'Add a condition to the workflow to branch the execution path based on a boolean expression.', + icon: , + href: '/docs/blocks/condition', + }, + { + title: 'Function', + description: + 'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic.', + icon: , + href: '/docs/blocks/function', + }, + { + title: 'Router', + description: + 'Intelligently direct workflow execution to different paths based on input analysis.', + icon: , + href: '/docs/blocks/router', + }, + { + title: 'Evaluator', + description: + 'Assess content using customizable evaluation metrics and scoring criteria across multiple dimensions.', + icon: , + href: '/docs/blocks/evaluator', + }, + ] + + const totalItems = features.length + const itemsPerRow = 3 // For large screens + + return ( +
+ {features.map((feature, index) => ( + + ))} +
+ ) +} diff --git a/docs/components/ui/features.tsx b/docs/components/ui/features.tsx new file mode 100644 index 000000000..8b625fcfc --- /dev/null +++ b/docs/components/ui/features.tsx @@ -0,0 +1,102 @@ +import { + IconAdjustmentsBolt, + IconCloud, + IconCurrencyDollar, + IconEaseInOut, + IconHeart, + IconHelp, + IconRouteAltLeft, + IconTerminal2, +} from '@tabler/icons-react' +import { cn } from '@/lib/utils' + +export function Features() { + const features = [ + { + title: 'Multi-LLM Support', + description: 'Connect to any LLM provider including OpenAI, Anthropic, and more', + icon: , + }, + { + title: 'API Deployment', + description: 'Deploy your workflows as secure, scalable APIs', + icon: , + }, + { + title: 'Webhook Integration', + description: 'Trigger workflows via webhooks from external services', + icon: , + }, + { + title: 'Scheduled Execution', + description: 'Schedule workflows to run at specific times or intervals', + icon: , + }, + { + title: '100+ Integrations', + description: 'Connect to hundreds of external services and data sources', + icon: , + }, + { + title: 'Visual Debugging', + description: 'Debug workflows visually with detailed execution logs', + icon: , + }, + { + title: 'Version Control', + description: 'Track changes and roll back to previous versions', + icon: , + }, + { + title: 'Team Collaboration', + description: 'Collaborate with team members on workflow development', + icon: , + }, + ] + return ( +
+ {features.map((feature, index) => ( + + ))} +
+ ) +} + +export const Feature = ({ + title, + description, + icon, + index, +}: { + title: string + description: string + icon: React.ReactNode + index: number +}) => { + return ( +
+ {index < 4 && ( +
+ )} + {index >= 4 && ( +
+ )} +
{icon}
+
+
+ + {title} + +
+

+ {description} +

+
+ ) +} diff --git a/docs/content/docs/blocks/index.mdx b/docs/content/docs/blocks/index.mdx index 7dc498572..f190861ab 100644 --- a/docs/content/docs/blocks/index.mdx +++ b/docs/content/docs/blocks/index.mdx @@ -6,6 +6,7 @@ description: Building blocks for your agentic workflows import { Card, Cards } from 'fumadocs-ui/components/card' import { Tabs, Tab } from 'fumadocs-ui/components/tabs' import { Steps, Step } from 'fumadocs-ui/components/steps' +import { BlockTypes } from '@/components/ui/block-types' Blocks are the fundamental building components of Sim Studio workflows. Each block has a specific purpose and can be connected to other blocks to create sophisticated workflows. @@ -17,88 +18,7 @@ A block is a reusable, configurable component that performs a specific function Sim Studio provides six powerful block types that form the foundation of any workflow. Each block is designed to handle specific aspects of your agentic applications, from AI-powered reasoning to conditional logic and external integrations. - - -
-
-

Agent

-
- Create powerful AI agents using any LLM provider -
-
-
-

API

-
- Connect to external services through HTTP requests -
-
-
-

Condition

-
- Branch workflow execution based on boolean expressions -
-
-
-

Function

-
- Execute custom JavaScript or TypeScript code -
-
-
-

Evaluator

-
- Assess content quality using customizable metrics -
-
-
-

Router

-
- Intelligently direct workflow execution -
-
-
- - - - - - - - - - - - + ## Block Connections diff --git a/docs/content/docs/connections/index.mdx b/docs/content/docs/connections/index.mdx new file mode 100644 index 000000000..ffdabcf10 --- /dev/null +++ b/docs/content/docs/connections/index.mdx @@ -0,0 +1,5 @@ +--- +title: Connections +description: Connect your blocks to one another. +--- + diff --git a/docs/content/docs/execution/index.mdx b/docs/content/docs/execution/index.mdx new file mode 100644 index 000000000..b6e2b19c8 --- /dev/null +++ b/docs/content/docs/execution/index.mdx @@ -0,0 +1,5 @@ +--- +title: Execution +description: The execution of a workflow. +--- + diff --git a/docs/content/docs/getting-started/index.mdx b/docs/content/docs/getting-started/index.mdx index d88564a1a..54dd5ad1b 100644 --- a/docs/content/docs/getting-started/index.mdx +++ b/docs/content/docs/getting-started/index.mdx @@ -6,7 +6,9 @@ description: Build, test, and optimize your agentic workflows import { Card, Cards } from 'fumadocs-ui/components/card' import { Steps, Step } from 'fumadocs-ui/components/steps' import { Callout } from 'fumadocs-ui/components/callout' +import { Files, Folder, File } from 'fumadocs-ui/components/files' import { Tabs, Tab } from 'fumadocs-ui/components/tabs' +import { AgentIcon, ApiIcon, ConditionalIcon, CodeIcon, ChartBarIcon, ConnectIcon, GmailIcon, PerplexityIcon, NotionIcon, ExaAIIcon, FirecrawlIcon, SlackIcon } from '@/components/icons' Sim Studio is a powerful, user-friendly platform for building, testing, and optimizing your agentic workflows. This documentation will help you understand how to use the various components of Sim Studio to create sophisticated agent-based applications. @@ -14,24 +16,35 @@ Sim Studio is a powerful, user-friendly platform for building, testing, and opti This guide will walk you through the essential concepts and help you get started building your first workflow. -## Core Concepts +## Core Components -Sim Studio is built around two fundamental concepts: +Sim Studio is built around two primary components: - - - - +### Blocks + +Blocks are the fundamental building elements of your workflows. Each block serves a specific purpose: + + + } annotation="Create AI agents using any LLM provider" /> + } annotation="Connect to external services and APIs" /> + } annotation="Add conditional branching to your workflows" /> + } annotation="Execute custom JavaScript/TypeScript code" /> + } annotation="Assess responses against defined criteria" /> + } annotation="Direct workflow execution based on input analysis" /> + + +### Tools + +Tools extend the capabilities of agents. They provide additional functionality for agents by enabling you to interface with your favorite data sources and take action (e.g posting on X, sending an email) + + + } /> + } /> + } /> + } /> + } /> + } /> + ## Getting Started @@ -51,57 +64,4 @@ Sim Studio is built around two fundamental concepts: Run your workflow with test inputs to verify its behavior. - - -## Explore Blocks - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/docs/content/docs/introduction/index.mdx b/docs/content/docs/introduction/index.mdx index 37d0cb679..dc5e57903 100644 --- a/docs/content/docs/introduction/index.mdx +++ b/docs/content/docs/introduction/index.mdx @@ -1,87 +1,24 @@ --- title: Introduction -description: A powerful platform for building, testing, and optimizing agentic workflows +description: Introduction to Sim Studio --- import { Card, Cards } from 'fumadocs-ui/components/card' import { Files, Folder, File } from 'fumadocs-ui/components/files' -import { Callout } from 'fumadocs-ui/components/callout' +import { Features } from '@/components/ui/features' Sim Studio is a powerful platform for building, testing, and optimizing agentic workflows. It provides developers with intuitive tools to design sophisticated agent-based applications through a visual interface. Whether you're prototyping a simple AI assistant or building complex multi-agent systems, Sim Studio offers the flexibility and performance needed for modern AI applications. ## Why Sim Studio? - - Building agentic applications has traditionally required extensive coding and integration work. Developers often find themselves spending more time on infrastructure and plumbing rather than focusing on the core AI logic. Sim Studio changes this by providing a comprehensive visual workflow editor that handles the complexity while keeping you in control of what matters. - +Building agentic applications has traditionally required extensive coding and integration work. Developers often find themselves spending more time on infrastructure and plumbing rather than focusing on the core AI logic. Sim Studio changes this by providing a comprehensive visual workflow editor that handles the complexity while keeping you in control of what matters. ## Features Sim Studio provides a wide range of features designed to accelerate your development process: - - - - - - - - + -## Core Components - -Sim Studio is built around two primary components: - -### Blocks - -Blocks are the fundamental building elements of your workflows. Each block serves a specific purpose: - - - - - - - - - - - - -### Tools - -Tools extend the capabilities of blocks by providing specialized functionality: - - - - - - - - - +## Ready to get started? Check out our [Getting Started](/docs/getting-started) guide or explore our [Blocks](/docs/blocks) and [Tools](/docs/tools) in more detail. \ No newline at end of file diff --git a/docs/content/docs/meta.json b/docs/content/docs/meta.json index 4bc67e95b..ee4331486 100644 --- a/docs/content/docs/meta.json +++ b/docs/content/docs/meta.json @@ -1,4 +1,4 @@ { "title": "Sim Studio Documentation", - "pages": ["introduction", "getting-started", "blocks", "tools"] + "pages": ["introduction", "getting-started", "blocks", "tools", "connections", "execution"] } diff --git a/docs/lib/utils.ts b/docs/lib/utils.ts new file mode 100644 index 000000000..4a8954ffa --- /dev/null +++ b/docs/lib/utils.ts @@ -0,0 +1,9 @@ +import { type ClassValue, clsx } from 'clsx' +import { twMerge } from 'tailwind-merge' + +/** + * Combines multiple class names into a single string, merging Tailwind classes properly + */ +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/docs/next.config.mjs b/docs/next.config.mjs deleted file mode 100644 index 457dcf29d..000000000 --- a/docs/next.config.mjs +++ /dev/null @@ -1,10 +0,0 @@ -import { createMDX } from 'fumadocs-mdx/next'; - -const withMDX = createMDX(); - -/** @type {import('next').NextConfig} */ -const config = { - reactStrictMode: true, -}; - -export default withMDX(config); diff --git a/docs/next.config.ts b/docs/next.config.ts new file mode 100644 index 000000000..70f005b33 --- /dev/null +++ b/docs/next.config.ts @@ -0,0 +1,19 @@ +import { createMDX } from 'fumadocs-mdx/next' + +const withMDX = createMDX() + +/** @type {import('next').NextConfig} */ +const config = { + reactStrictMode: true, + async redirects() { + return [ + { + source: '/docs', + destination: '/docs/introduction', + permanent: true, + }, + ] + }, +} + +export default withMDX(config) diff --git a/docs/package-lock.json b/docs/package-lock.json index 9a72d706e..f64d18ae5 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -10,7 +10,9 @@ "hasInstallScript": true, "dependencies": { "@sim/blocks": "file:../packages/blocks", + "@tabler/icons-react": "^3.31.0", "@vercel/og": "^0.6.5", + "clsx": "^2.1.1", "fumadocs-core": "15.0.16", "fumadocs-mdx": "11.5.6", "fumadocs-ui": "^15.0.16", @@ -18,7 +20,8 @@ "next": "15.2.1", "next-themes": "^0.4.6", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwind-merge": "^3.0.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.0.12", @@ -1941,6 +1944,32 @@ "tslib": "^2.8.0" } }, + "node_modules/@tabler/icons": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.31.0.tgz", + "integrity": "sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "3.31.0", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.31.0.tgz", + "integrity": "sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==", + "license": "MIT", + "dependencies": { + "@tabler/icons": "3.31.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@tailwindcss/node": { "version": "4.0.13", "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.13.tgz", diff --git a/docs/package.json b/docs/package.json index a0b8dceeb..9639bb98a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,7 +10,9 @@ }, "dependencies": { "@sim/blocks": "file:../packages/blocks", + "@tabler/icons-react": "^3.31.0", "@vercel/og": "^0.6.5", + "clsx": "^2.1.1", "fumadocs-core": "15.0.16", "fumadocs-mdx": "11.5.6", "fumadocs-ui": "^15.0.16", @@ -18,7 +20,8 @@ "next": "15.2.1", "next-themes": "^0.4.6", "react": "^19.0.0", - "react-dom": "^19.0.0" + "react-dom": "^19.0.0", + "tailwind-merge": "^3.0.2" }, "devDependencies": { "@tailwindcss/postcss": "^4.0.12", diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 4fd260f7f..74d13e6ed 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -25,6 +25,13 @@ } ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + "content/docs/execution/index.mdx", + "content/docs/connections/index.mdx" + ], "exclude": ["node_modules"] }