Merge pull request #609 from writer/dev

chore: Merge for release

.github/workflows/docs.yml

@@ -15,7 +15,7 @@ jobs:
           github-token: ${{ secrets.DOCS_WORKFLOW_TOKEN }}
           script: |
             await github.rest.actions.createWorkflowDispatch({
-              owner: 'anant-writer',
+              owner: 'WriterInternal',
               repo: 'docs',
               workflow_id: 'mintlify-action.yml',
               ref: 'main',

docs/framework/ai-module.mdx

@@ -173,13 +173,13 @@ Framework allows you to register Python functions that can be called automatical
 
 Function tools are defined using either a Python class or a JSON configuration.
 ```python
-from writer.ai import FunctionTool
+from writer.ai import create_function_tool
 
 # Define a function tool with Python callable
 def calculate_interest(principal: float, rate: float, time: float):
     return principal * rate * time
 
-tool = FunctionTool(
+tool = create_function_tool(
     name="calculate_interest",
     callable=calculate_interest,
     parameters={
@@ -217,6 +217,12 @@ Function tools require the following properties:
 
 When a conversation involves a tool (either a graph or a function), Framework automatically handles the requests from LLM to use the tools during interactions. If the tool needs multiple steps (for example, querying data and processing it), Framework will handle those steps recursively, calling functions as needed until the final result is returned.
 
+By default, to prevent endless recursion, Framework will only handle 3 consecutive tool calls. You can expand it in case it doesn't suit your case – both `complete()` and `stream_complete()` accept a `max_tool_depth` parameter, which configures the maximum allowed recursion depth:
+
+```python
+response = conversation.complete(tools=tool, max_tool_depth=7)
+```
+
 ### Providing a Tool or a List of Tools
 
 You can pass either a single tool or a list of tools to the `complete()` or `stream_complete()` methods. The tools can be a combination of FunctionTool, Graph, or JSON-defined tools.

docs/framework/frontend-scripts.mdx

@@ -94,7 +94,7 @@ You can access Framework's front-end core via `globalThis.core`, unlocking all s
 
 ```js
 export function alertHueRotationValue() {
-    const state = globalThis.core.getUserState();
+    const state = globalThis.core.userState.value.
     console.log("State is", state);
 }
 ```

docs/framework/quickstart.mdx

@@ -2,7 +2,11 @@
 title: "Quickstart"
 ---
 
-## Install Writer Framework and run the demo app
+## Overview
+
+In this guide, you'll learn how to get started with the Writer Framework by building a simple "Hello, World" application. This beginner-friendly guide will help you install the necessary tools, set up an app, and deploy it to the Writer Cloud.
+
+## Step 1: Install Writer Framework and run the demo app
 
 <Tip>
 Writer Framework works on Linux, Mac, and Windows. Python 3.9.2 or higher is required. We recommend using a virtual environment.
@@ -14,63 +18,111 @@ Writer Framework works on Linux, Mac, and Windows. Python 3.9.2 or higher is req
     ```bash
     pip install writer
     ```
-    This will download and install Framework and all its required dependencies.
+    This will download and install the Writer Framework and all its required dependencies.
   </Step>
-  <Step title="Start demo application">
-    Once the installation is complete, you can create a demo application and start the Framework. To do this, navigate to your desired directory and run:
+  <Step title="Test installation with demo application">
+    Once the installation is complete, you can verify that everything is set up correctly by running the built-in demo application. Navigate to your desired directory and type:
     ```bash
     writer hello
     ```
-    This command creates a subfolder named **hello** and initiates the Framework, which opens a visual editor accessible through a local URL displayed in your command line.
+    This command creates a subfolder named **hello** and launches the Writer Framework, opening a visual editor accessible through a local URL displayed in your command line. This demo app illustrates the different components available in Writer Framework, helping you get familiar with the setup.
   </Step>
 </Steps>
 
-## Create an app
+## Step 2: Create a new framework app
 
-You can use the command `writer create`, which will create a placeholder app in the path provided.
+Now that we've tested the setup, let's create our first "Hello, World" app using the `ai-starter` template. This template showcases how quickly you can build AI-powered applications with the Writer Framework.
 
-```sh
-writer create [path]
+Use the following command to generate the app structure:
 
-# Creates a new app in folder "testapp"
-writer create testapp
+```sh
+writer create hello-world --template=ai-starter
 ```
 
-A Framework app is a folder with the following items.
+This will create a new app folder, **hello-world**, with the following structure:
 
 1. `main.py` - The entry point for the app. You can import anything you need from here.
 2. `.wf/` - This folder contains the UI component declarations. Maintained by the Writer Framework's visual editor.
-3. `static/` - This folder contains front-end static files which you might want to distribute with your app. For example, images and stylesheets.
+3. `static/` - This folder contains front-end static files which you might want to distribute with your app, such as images and stylesheets.
 
-## Start the editor
+## Step 3: Start the visual editor  
 
-You can use the command `writer edit`.
+To start building and customizing your app visually, use the Writer Framework’s editor. This browser-based interface allows you to drag components, arrange layouts, and modify settings in real-time.
 
 ```sh
-writer edit [path]
-
-# Edit the application in subfolder "testapp"
-writer edit testapp
+writer edit hello-world
 ```
 
-This command will provide you with a local URL which you can use to access the Builder.
+After running this command, you'll see a local URL displayed in your command line. Open this URL in a web browser to access the editor.
 
-<Warning>
-It's not recommended to expose Framework to the Internet. If you need to access the Builder remotely, we recommend setting up an SSH tunnel. By default, requests from non-local origins are rejected, as a security measure to protect against drive-by attacks. 
+<Frame caption="Writer Framework editor opens at https://localhost:4005">
+  <img src="/framework/images/Quickstart/hello-world-editor.png" />
+</Frame>
 
-If you need to disable this protection, use the flag `--enable-remote-edit`. 
-</Warning>
+<Steps>
+  <Step title="Launch the Editor">
+    In your terminal, enter the following command to open the editor:
+
+    ```sh
+    writer edit hello-world
+    ```
 
-<Info>
+    This command opens the Writer Framework editor in your browser, where you’ll see a live preview of your app. The editor interface includes a **component library** on the left, a **canvas** in the center for building layouts, and a **settings panel** on the right for customizing selected components.
+
+    <Info>
 The editor starts by default on port 4005. If you launch multiple editors in parallel and do not specify a port, Writer Framework will automatically assign the next port until reaching the limit of 4099.
 </Info>
 
-## Run an app
+<Warning>
+It's not recommended to expose the Framework to the Internet. If you need to access the editor remotely, we recommend setting up an SSH tunnel. By default, requests from non-local origins are rejected as a security measure to protect against drive-by attacks.
+
+If you need to disable this protection, use the flag `--enable-remote-edit`.
+</Warning>
+  </Step>
+
+  <Step title="Add Components to Your Canvas">
+    On the left sidebar, browse through the **Component Library** and try dragging a few components onto the **Canvas**. For example, you can add a **Text** component to display "Hello, World!" or try other components to see how they work together.
+
+    Experiment with arranging these components on the canvas to create a simple layout.
+    <Frame caption="Writer Framework launches the app at https://localhost:3005">
+  <img src="/framework/images/Quickstart/hello-world-preview.png" />
+</Frame>
+  </Step>
+
+  <Step title="Customize Component Settings">
+    With a component selected, look at the **Settings Panel** on the right side. Here, you can edit properties like text content, colors, and alignment to see how it changes the appearance and behavior of the component on the canvas.
+
+    This panel allows you to customize components without writing any code, giving you a quick and visual way to build a frontend.
+  </Step>
+
+  <Step title="Change the App Name in main.py">
+    To personalize your app further, open `main.py` in the root of your project folder. Locate the following line:
+
+    ```python
+    wf.init_state({
+        "my_app": {
+            "title": "AI STARTER"
+        },
+    })
+    ```
+
+    Change `"AI STARTER"` to something unique, like `"My First Writer App"`. Save the file, and you’ll see the updated name reflected immediately in the editor.
+
+    <Frame caption="App name updated in the Writer Framework editor">
+        <img src="/framework/images/Quickstart/hello-world-app-name.png" />
+    </Frame>
+</Step>
+
+</Steps>
+
+For now, this simple exploration gives you an idea of how the framework enables rapid frontend building without code. In later tutorials, like creating a [Chat assistant](chat-assistant) or a [Social post generator](social-post-generator), you’ll explore more advanced components and layouts using this visual editor.
+
+## Step 4: Run the app locally
 
 When your app is ready, execute the `run` command, which will allow others to run, but not edit, your Framework app.
 
 ```sh
-writer run my_app
+writer run hello-world
 ```
 
 <Info>
@@ -80,22 +132,19 @@ Your app starts by default on port 3005. If you launch multiple apps in parallel
 You can specify a port and host. Specifying `--host 0.0.0.0` enables you to share your application in your local network.
 
 ```sh
-writer run my_app --port 5000 --host 0.0.0.0
+writer run hello-world --port 5000 --host 0.0.0.0
 ```
 
-## Run as a module
+## Step 5: Deploy to Writer Cloud
 
-If you need to run Framework as a module, you can use the `writer.command_line` module.
+Writer provides a quick and fast way to deploy your apps via the [Writer Cloud](/framework/cloud-deploy).
 
 ```sh
-python -m writer.command_line run my_app
+writer deploy hello-world
 ```
 
-## Deploying to Writer cloud
-Writer provides a quick and fast way to deploy your apps via the [Writer cloud](/framework/cloud-deploy).
+You’ll be asked to enter your API key. To find your key, log in to your [AI Studio account](https://app.writer.com/aistudio) and either create a new framework app by going through the create app workflow or choose an existing framework app from your home screen. For other deployment options, see [Deploy with Docker](/framework/deploy-with-docker).
 
-```sh
-writer deploy <my_app_name>
-```
+## Conclusion
 
-You’ll be asked to enter your API key. To find your key, log in to your [AI Studio account](https://app.writer.com/aistudio) and either create a new framework app by going through the create app workflow or choose an existing framework app from your home screen. For other deployment options, see [Deploy with Docker](/framework/deploy-with-docker).
+Congratulations! You’ve set up, configured, and deployed your first app with the Writer Framework. Now, try building a [Chat assistant](chat-assistant) or a [Social post generator](social-post-generator) to put these skills into action.