From c22a092ae993f8f38fb3fa2e23ad60f8aa8bcf12 Mon Sep 17 00:00:00 2001 From: Jeongho Nam Date: Fri, 6 Sep 2024 14:41:00 +0900 Subject: [PATCH] Separated pages --- pages/docs/_meta.json | 14 ++++--- pages/docs/core-elements.mdx | 8 ++++ pages/docs/getting-started.mdx | 39 ++++++++++++++++++ pages/docs/index.mdx | 74 ++-------------------------------- pages/docs/use-cases.mdx | 9 +++++ 5 files changed, 67 insertions(+), 77 deletions(-) create mode 100644 pages/docs/core-elements.mdx create mode 100644 pages/docs/getting-started.mdx create mode 100644 pages/docs/use-cases.mdx diff --git a/pages/docs/_meta.json b/pages/docs/_meta.json index 571025c..72cdd4b 100644 --- a/pages/docs/_meta.json +++ b/pages/docs/_meta.json @@ -1,8 +1,10 @@ { - "index": { - "title": "🙋🏻‍♂️ Introduction", - "theme": { - "sidebar": false - } - } + "-- features": { + "type": "separator", + "title": "📖 Introduction" + }, + "index": "Overview", + "core-elements": "Core Elements", + "getting-started": "Getting Started", + "use-cases": "Use Cases" } diff --git a/pages/docs/core-elements.mdx b/pages/docs/core-elements.mdx new file mode 100644 index 0000000..93f5c23 --- /dev/null +++ b/pages/docs/core-elements.mdx @@ -0,0 +1,8 @@ +# 2. Core Elements + +* **Interactive and User-Friendly Interface**: The user-friendly agentic interface that allows users to communicate and view the execution process of the Studio autonomous agent in the form of a workflow. +* **Workflow**: The execution path designed by the Studio autonomous agent to achieve the user's desired goals, broken down into actionable units. +* **Workflow Canvas**: A drag-and-drop low-code editor that visualizes the design and action-level execution paths created by the Studio autonomous agent. Connector node blocks are displayed and can be edited by the user as needed. +* **Marketplace**: A store where users can share or sell completed workflows, bot agents, connectors, and APIs. It aims to create an ecosystem that allows users to benefit from the collective expertise of the community. +* **Connector**: The external service and data connections, programming syntax, and expressions needed for the Studio autonomous agent to execute actions based on user context. Connectors are represented by Swagger documentation and visualized as node blocks on the Workflow Canvas. They are essential for connecting external services and data to execute user requests. In addition to core connectors, acquiring connectors for services frequently used in the local market is necessary for the Studio autonomous agent to understand and execute various user requests via natural language. +* **Human-in-the-loop**: A feature that enhances trust and control over outputs by allowing users to make immediate modifications, adjustments, and approvals within desired parameters under the supervision of the Studio autonomous agent. \ No newline at end of file diff --git a/pages/docs/getting-started.mdx b/pages/docs/getting-started.mdx new file mode 100644 index 0000000..3d0ecef --- /dev/null +++ b/pages/docs/getting-started.mdx @@ -0,0 +1,39 @@ +# 3. Getting Started + +## Example 1 + +Creating an a storybook author AI agent that allows users to export unique picture book to Google Slides + +**Step 1:** Register or log in on the product page. ([https://studio-pro.wrtn.ai](https://studio-pro.wrtn.ai/login)) + +**Step 2:** In the prompt field, type: “Create a storybook author AI agent that allows users to build a unique story and create a picture book.” + +![](/studio-pro/images/docs/intro-meta-step-2-1.png) + +![](/studio-pro/images/docs/intro-meta-step-2-2.png) + +**Step 3:** The Studio autonomous agent will ask follow-up questions to better understand your task and requirements. + +![](/studio-pro/images/docs/intro-meta-step-3-1.png) + +**Step 4:** Once the Studio autonomous agent has gathered all the necessary information and understands your requirements, it will present a task execution plan. Click the “Confirm” button to approve the plan. + +![](/studio-pro/images/docs/intro-meta-step-4-1.png) + +**Step 5:** You will be prompted to connect to your Google Slides account. Select your account and log in. + +![](/studio-pro/images/docs/intro-meta-step-5-1.png) + +![](/studio-pro/images/docs/intro-meta-step-5-2.png) + +**Step 6:** The Studio autonomous agent will then create a workflow to develop the storyteller bot and generate a unique picture book. Click the “View Workflow” button on the workflow card to see the details. + +![](/studio-pro/images/docs/intro-meta-step-6-1.png) + +**Step 7:** View the workflow in the Canvas. Click the “Run Chatbot” button in the top right corner. + +![](/studio-pro/images/docs/intro-meta-step-7-1.png) + +**Step 8:** The storybook author bot will be launched. You can provide instructions on the theme or characters for the story. + +![](/studio-pro/images/docs/intro-meta-step-8-1.png) \ No newline at end of file diff --git a/pages/docs/index.mdx b/pages/docs/index.mdx index 58995a1..db5274d 100644 --- a/pages/docs/index.mdx +++ b/pages/docs/index.mdx @@ -1,6 +1,6 @@ -## 1. Overview +# 1. Overview -![Intro](/studio-pro/images/docs/intro.png) +![Intro](/images/docs/intro.png) Studio Pro is a creation tool that enhances productivity by allowing users to easily build their own AI workflow apps and agents using an AI agent-based low-code builder tool. Studio Pro provides an optimal AI user experience designed to automatically perform tasks as desired by the user. Within the studio, there is an AI agent that assists throughout the entire user journey. This agent is the autonomous agent that receives user requests via natural language or voice, formulates an execution plan, and uses the provided connectors to integrate with external services and data, creating action-node-block-based workflows. After user confirmation, it can directly perform tasks. @@ -32,72 +32,4 @@ For power users, there is an option to extract their own workflow apps and APIs referrerpolicy="strict-origin-when-cross-origin" allowfullscreen> - - - - - -## 2. Core Elements - -* **Interactive and User-Friendly Interface**: The user-friendly agentic interface that allows users to communicate and view the execution process of the Studio autonomous agent in the form of a workflow. -* **Workflow**: The execution path designed by the Studio autonomous agent to achieve the user's desired goals, broken down into actionable units. -* **Workflow Canvas**: A drag-and-drop low-code editor that visualizes the design and action-level execution paths created by the Studio autonomous agent. Connector node blocks are displayed and can be edited by the user as needed. -* **Marketplace**: A store where users can share or sell completed workflows, bot agents, connectors, and APIs. It aims to create an ecosystem that allows users to benefit from the collective expertise of the community. -* **Connector**: The external service and data connections, programming syntax, and expressions needed for the Studio autonomous agent to execute actions based on user context. Connectors are represented by Swagger documentation and visualized as node blocks on the Workflow Canvas. They are essential for connecting external services and data to execute user requests. In addition to core connectors, acquiring connectors for services frequently used in the local market is necessary for the Studio autonomous agent to understand and execute various user requests via natural language. -* **Human-in-the-loop**: A feature that enhances trust and control over outputs by allowing users to make immediate modifications, adjustments, and approvals within desired parameters under the supervision of the Studio autonomous agent. - - - - -## 3. Getting Started - -### Example 1 - -Creating an a storybook author AI agent that allows users to export unique picture book to Google Slides - -**Step 1:** Register or log in on the product page. ([https://studio-pro.wrtn.ai](https://studio-pro.wrtn.ai/login)) - -**Step 2:** In the prompt field, type: “Create a storybook author AI agent that allows users to build a unique story and create a picture book.” - -![](/studio-pro/images/docs/intro-meta-step-2-1.png) - -![](/studio-pro/images/docs/intro-meta-step-2-2.png) - -**Step 3:** The Studio autonomous agent will ask follow-up questions to better understand your task and requirements. - -![](/studio-pro/images/docs/intro-meta-step-3-1.png) - -**Step 4:** Once the Studio autonomous agent has gathered all the necessary information and understands your requirements, it will present a task execution plan. Click the “Confirm” button to approve the plan. - -![](/studio-pro/images/docs/intro-meta-step-4-1.png) - -**Step 5:** You will be prompted to connect to your Google Slides account. Select your account and log in. - -![](/studio-pro/images/docs/intro-meta-step-5-1.png) - -![](/studio-pro/images/docs/intro-meta-step-5-2.png) - -**Step 6:** The Studio autonomous agent will then create a workflow to develop the storyteller bot and generate a unique picture book. Click the “View Workflow” button on the workflow card to see the details. - -![](/studio-pro/images/docs/intro-meta-step-6-1.png) - -**Step 7:** View the workflow in the Canvas. Click the “Run Chatbot” button in the top right corner. - -![](/studio-pro/images/docs/intro-meta-step-7-1.png) - -**Step 8:** The storybook author bot will be launched. You can provide instructions on the theme or characters for the story. - -![](/studio-pro/images/docs/intro-meta-step-8-1.png) - - - - -## 4. Use Cases - -![](/studio-pro/images/docs/intro-use-cases-1.png) - -![](/studio-pro/images/docs/intro-use-cases-2.png) - -![](/studio-pro/images/docs/intro-use-cases-3.png) - -![](/studio-pro/images/docs/intro-use-cases-4.png) + \ No newline at end of file diff --git a/pages/docs/use-cases.mdx b/pages/docs/use-cases.mdx new file mode 100644 index 0000000..e8b5450 --- /dev/null +++ b/pages/docs/use-cases.mdx @@ -0,0 +1,9 @@ +# 4. Use Cases + +![](/studio-pro/images/docs/intro-use-cases-1.png) + +![](/studio-pro/images/docs/intro-use-cases-2.png) + +![](/studio-pro/images/docs/intro-use-cases-3.png) + +![](/studio-pro/images/docs/intro-use-cases-4.png) \ No newline at end of file