Add AI Agents to Your Web Apps Using MCP [Workbook]

On May 14, we teamed up with the Xano team for a workshop that shows you how to build a smarter, conversational CRM using Model Context Protocol (MCP).

The link to the workshop 👇

‍

Here is what we covered:

• How to use Xano to set up a backend with MCP tools.
  
• How to use WeWeb to build a frontend, including a chat interface.
  
• How to connect both using MCP to let AI interact with your data.
  
• How to add AI workflows and test the interface.

This workbook was created to accompany the workshop and help you out with the steps. It walks you through the process demonstrated in the video, covering both the Xano backend setup for MCP and the WeWeb frontend implementation using AI-assisted design and workflows.

Resources that you'll need

• CRM template: this is the template that is used for building the interface in WeWeb. You can download it from the WeWeb Marketplace.
• Xano snippet: contains Chatbot endpoints. Installation instructions can be found via the linked community post.

Understanding MCP

MCP is an open standard developed by Anthropic. It's described as a "universal way for AI models to connect with external systems, data sources, and tools," like giving AI "eyes and hands" to see and interact with other systems.

The architecture involves MCP clients (like AI chat apps) and an MCP server which contains various tools (API endpoints, database transactions, custom logic) that the AI agent can use. Xano allows you to create both MCP servers and remote clients.

MCP helps solve problems like integration complexity, fragmented implementations, and data isolation, and can reduce maintenance. It's seen as a gamechanger for dynamic tasks and improving user experience by unifying systems through a natural chat interface.

Now that you better understand MCP, let's get to work and set up backend in Xano.

The timestamps in the video are corresponding to steps outlined below.

Part 1: Set up the backend in Xano

[5:23] Create a workspace with CRM tables

In the workshop, we use a custom CRM example with tables for companies, contacts, and deals.

Start a new Xano workspace and use the AI database assistant to generate CRM tables like:

• Companies
  
• Contacts
  
• Deals

Or you can use the Xano snippet provided above.

[5:36] Generate API endpoints

API endpoints are essentially ways for systems to communicate and transfer information.

You can create a database schema and CRUD (Create, Read, Update, Delete) API endpoints using Xano's AI assistant. Or use the Xano snippet provided above.

[5:46] Create MCP server and convert API Endpoints into MCP tools

Go to the AI Tools section and click create an MCP server.
For each API endpoint in your Xano workspace that you want the AI to have access to (e.g. get all companies):

• Open the endpoint.
  
• Click the 3 dots → Use as AI Tool.
  
• Assign it to your MCP server.
  
• Give it a descriptive name (e.g., “Get All Companies”). The more context the name has, the better the AI will understand its purpose.

This server will contain the tools the AI agent can access. You can edit the server settings to provide a specific description for each individual tool to give the AI more context on how to use it.

[7:40] Create a remote agent endpoint

Because you are building a custom chat client in WeWeb (not using a third-party client like Cloud Desktop), you need an API endpoint in Xano that acts as the remote client. This endpoint is called whenever the user sends a message to the AI from the WeWeb frontend.

Build a POST endpoint to receive and process chat queries. The endpoint should:

• Accept systemPrompt, userQuery, and conversationHistory.
  
• Retrieve tools from your MCP server.
  
• Format a payload for OpenAI or other LLMs.
  
• Use the AI to decide which tool to use and respond.
  
• Call the chosen tool and return the assistant's response.

This endpoint is where you configure which LLM provider(s) you will use (e.g., OpenAI, Azure OpenAI, Gemini) for the tool request and chat completion.

Secure with Xano Auth

✅ Ensure all tools are protected using Xano's built-in authentication.

✅ Optionally add RBAC (role-based access control) to limit tool access by user roles.

Part 2: Build the frontend in WeWeb

WeWeb interacts with Xano using API endpoints. You need to install the Xano plugin in WeWeb to enable seamless integration and access all your endpoints.

[12:25] Install the Xano plugin

• In WeWeb, install the Xano data source and authentication plugin.
• Add a sign up/sign in page.
• Connect it with the Xano authentication logic and sign in.
  

[12:40] Create data collections

Use Collections in WeWeb to fetch data from Xano API endpoints (e.g., getting a list of deals). You bind UI elements to collection data to display it.

[14:30] Add a chat side menu

Add a side menu component that appears from the right.
Create variables to manage the state and data of the chat:

• chatIsOpen (boolean)
  
• chatWidth (number)
  
• chatMessages (array of objects)

Bind the placeholder element's properties (like display and width) to these variables.

[16:07] Use global workflows to execute actions

Workflows allow you to execute actions when triggers occur (e.g., button click, item move in a list). You can chain different actions within a workflow, including calling Xano API endpoints.

Create a global workflow (e.g., sendMessageToChatbot) to:

• Accept a user message as input.
  
• Send the message to Xano's agent endpoint.
  
• Receive and display the AI response.
  
• Update chatMessages with user + AI messages.

After you created the workflow:

• Add a parameter to the workflow (e.g., user query) to receive the message typed by the user.

• Add the Xano Request action within the workflow.

• Select the MCP Client Endpoint you created in Xano (e.g., post chatbot).

‍

Bind the Xano request parameters:

• Map the Xano endpoint's user query parameter to the workflow's user query parameter.

• Map the conversation history parameter to the chat messages variable. You can hardcode the system prompt initially.

‍

Add actions to update the chat messages array:

• Before the Xano request, add the user's message to the array (e.g., insert an object { role: 'user', content: user query } at the end).

• After the Xano request, add the assistant's response to the array (e.g., insert an object { role: 'assistant', content: result of Xano request } at the end).

Part 3: Add AI chat interface

[19:55] Use WeWeb AI to build UI

Navigate to WeWeb AI:

• Write a prompt (e.g. “Build a chat interface inside the menu”). You can also mention the purpose, like interacting with your Xano backend to ask questions about data.
  

• Provide data context to the AI by passing your chat messages variable (ideally with some test data in it). This helps the AI understand the structure and purpose of the data and can automatically set up data bindings in the generated design.
  

Execute the prompt. WeWeb AI will generate the UI elements for the chat interface.

[23:04] Refine the UI and connect logic

Check the generated design:

• Ensure that the messages are added to chatMessages. The AI should ideally do this automatically if you provided data context.
  
• Manually adjust styling, layout, or add/remove elements as needed.
  
• Optionally, execute AI-generated workflows if they are useful (like clearing the chat messages array)

‍

Connect the Send Button:

• Select the element used to send messages (e.g., a button next to an input field).

• Add a workflow to this element (e.g., on click).

• Within this element workflow, add an "Execute Workflow" action and select the global send message to chatbot workflow you created.

• Bind the user query parameter of the global workflow to the value of the text input field where the user types their message.
  
  

Part 4: Test it all

[23:45] Send a message

Test the chat interface in preview mode by typing messages and sending them. Observe your message appearing, followed by the AI's response.

Explore additional possibilities

• Create more Xano MCP tools for different actions (e.g., adding a company, updating a deal).

• Incorporate a "human in the loop" by having the AI propose an action (like adding a company) and allowing the user to approve it before executing the Xano tool.

• Display specific data retrieved by the AI (like a deal) in interactive artifacts that the user can click for more details.

• Implement multi-tool calling in your Xano agent logic, allowing the AI to plan and execute multiple tools sequentially to fulfill a complex request.

• Integrate with external tools like Slack by building Xano API endpoints that interact with their APIs and turning those into MCP tools

Happy building!