### Install dependencies Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/contribute/guides/local-installation.mdx Navigate to the project directory and install required packages using Bun. ```sh cd typebot.io bun install ``` -------------------------------- ### Start development servers Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/contribute/guides/local-installation.mdx Launch the builder and viewer applications for local development. ```sh bun dev ``` -------------------------------- ### Product Recommendation Chatbot Example Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/chatbot-marketing-examples.mdx Implement this typebot to guide customers through product selection by asking about their goals, constraints, and desired features. It provides tailored product matches with purchase links. ```typebot ``` -------------------------------- ### Initializing Backend Project Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Commands to set up the server directory and install backend dependencies. ```bash cd server npm init -y npm install express cors dotenv npm install --save-dev typescript @types/express @types/node @types/cors ``` -------------------------------- ### Start React Development Server Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Run this command in your React project directory to start the development server and view your application in the browser. ```bash npm start ``` -------------------------------- ### Start the database Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/contribute/guides/local-installation.mdx Launch the required database and MinIO instance using Docker Compose. ```sh docker compose -f docker-compose.dev.yml up -d ``` -------------------------------- ### Run additional applications Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/contribute/guides/local-installation.mdx Commands to start the landing page or documentation site using Nx. ```sh bunx nx dev landing-page ``` ```sh bunx nx dev docs ``` -------------------------------- ### Install Additional Dependencies Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Install axios for making HTTP requests and daisyUI for UI components in your React project. ```bash npm install axios daisyui@latest ``` -------------------------------- ### Initializing Vite Project Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Commands to scaffold a new React project with TypeScript and install dependencies. ```bash npm create vite@latest my-fullstack-chatbot -- --template react-ts cd my-fullstack-chatbot npm install ``` -------------------------------- ### OpenRouter System Prompt for City Guide Assistant Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/how-to-build-a-rag-chatbot.mdx This system prompt configures the OpenRouter model to act as a weekend city guide. It instructs the model to use the `search_weekend_city_guides` tool before providing advice, base answers solely on retrieved data, and handle weak results gracefully. It also specifies how to pass user messages to the tool. ```text You are a helpful weekend city guide assistant for a tutorial article about RAG. Always call the search_weekend_city_guides tool before giving travel advice. Base your answer only on the retrieved records. Recommend the best matching city first, mention why it fits the user's request, and include 2 or 3 concrete highlights. If results are weak, say that the knowledge base is limited rather than inventing facts. When you call the tool, pass the user's latest message into the required query parameter. ``` -------------------------------- ### Proactive Feedback Implementation Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/chatbot-script-examples.mdx A proactive message example based on common user inquiries. ```txt Bot: Before we proceed to checkout, would you like to know about our hassle-free 30-day return policy? ``` -------------------------------- ### Brand Voice Examples Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/chatbot-script-examples.mdx Examples of casual versus professional chatbot greetings. ```txt Bot: Hey there! 😎 Ready to find your perfect pair of kicks? Let's get this shoe party started! 🥳👟 ``` ```txt Bot: Welcome to Premium Financial Services. How may I assist you with your investment portfolio today? ``` -------------------------------- ### Install Typebot React Package Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/deploy/web/next-js.mdx Install the required dependency via npm. ```bash npm install @typebot.io/react ``` -------------------------------- ### Run documentation in development mode Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/contribute/guides/documentation.mdx Navigate to the documentation directory and start the development server to preview changes in real time. ```sh cd apps/docs bun dev ``` -------------------------------- ### Start Typebot Server with Docker Compose Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/self-hosting/deploy/docker.mdx This command starts the Typebot server in detached mode. It will create a database, run migrations, and start the builder on port 8080 and the viewer on port 8081. ```bash docker-compose up -d ``` -------------------------------- ### Install Typebot JS Library via npm Source: https://github.com/baptistearno/typebot.io/blob/main/packages/embeds/js/README.md Use this command to install the Typebot JS library in your project using npm. ```bash npm install @typebot.io/js ``` -------------------------------- ### Download Docker Compose and Environment Files Source: https://github.com/baptistearno/typebot.io/blob/main/apps/docs/self-hosting/deploy/docker.mdx Use these commands to download the docker-compose.yml and .env.example files to your server. These files are essential for setting up Typebot with Docker. ```bash wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/docker-compose.yml wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/.env.example -O .env ``` -------------------------------- ### Install Redux Toolkit and React Redux Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Command to install the necessary packages for using Redux Toolkit and React Redux for state management in a React application. This is recommended for more complex state management needs. ```bash npm install @reduxjs/toolkit react-redux ``` -------------------------------- ### Initialize React App with Vite Source: https://github.com/baptistearno/typebot.io/blob/main/apps/landing-page/content/blog/react-chatbot.mdx Use Vite to quickly create a new React project with TypeScript support. Navigate into the project directory and install dependencies. ```bash npm create vite@latest my-chatbot -- --template react-ts cd my-chatbot npm install ```