Example Agent using MCP
Learn how to use Model Context Protocol (MCP) actions in a SpinAI application that can control Github using Smithery’s MCP
In this guide, we’ll create a simple GitHub assistant that can help manage repositories using MCP actions. You’ll learn how to:
- Set up a SpinAI project with MCP integration
- Configure GitHub actions through MCP
- Create an agent that can interact with GitHub’s API
- Test your agent with a basic repository creation task
Getting Started
1. Create a New SpinAI Project
When prompted, select the default template. This will set up a basic SpinAI project structure for us to build upon.
💡 Quick Start: If you want to skip the manual setup, you can select the
GitHub MCP Agent
template instead of the default template. This will automatically configure everything we’ll cover in steps 1-5, and you can jump straight to running the agent (don’t forget to setup your environment variables, though!).
2. Set Up Environment Variables
Create a .env
file in your project root and add the following variables:
You’ll need:
-
An OpenAI API key for running the agent. We’re using OpenAI’s model in this example, but you can swap it for any model supported by Vercel’s AI SDK.
-
A GitHub personal access token. To create one:
- Go to GitHub’s Developer Settings
- Click “Generate new token (classic)”
- Give your token a descriptive name (e.g., “SpinAI GitHub Assistant”)
- Select only the permissions you’re comfortable with. For this example, you’ll need:
repo
access to create and manage repositoriesread:user
for basic profile information
- Copy the generated token (you won’t be able to see it again!)
- Paste it into your
.env
file as theGITHUB_TOKEN
value
⚠️ Security Note: Never commit your .env
file to version control. It should belisted in your .gitignore
, but in case it’s not, make sure it is.
3. Set Up MCP Configuration
You’ll need to create an MCP configuration file to specify which MCP actions you want to use. There are two ways to do this:
The easiest way is to use our CLI tool:
This command will automatically create or update your mcp-config.ts
file with the GitHub MCP configuration.
NOTE: It’s highly recommended to keep your GITHUB_TOKEN in your .env
and either import it in your mcp-config.ts, or in the next step.
4. Set Up the Agent
Now we’ll set up our agent to use the MCP actions. Open your src/index.ts
file and replace the boilerplate code with:
Let’s break down what’s happening:
- We import the necessary functions from SpinAI and the OpenAI model from AI SDK
createActionsFromMcpConfig
translates our MCP configuration into SpinAI actions- We create an agent with those actions and instructions about its purpose
- Finally, we run the agent with a test command to create a repository
5. Run the Agent
Now you can run your agent:
You can modify the input
in your code to make the agent perform different GitHub tasks. For example:
The agent will use the appropriate GitHub MCP actions based on your requests.
Optional Next Steps
6. Deploy as an API Endpoint
If you want to use your GitHub assistant as a workflow endpoint, you can wrap it in a web server. Here’s a quick example using Hono:
7. Create an Interactive Chat Loop
For a more interactive experience, you can create a chat loop that maintains conversation history:
This creates an interactive CLI where you can have ongoing conversations with your GitHub assistant while maintaining context.
8. Add a UI (Coming Soon!)
Want to turn your GitHub assistant into a full-fledged chat application with a beautiful UI? We’re working on making this seamless with a one-line integration. Stay tuned for updates!
In the meantime, you can build your own UI using your preferred frontend framework and connect it to either the API endpoint from step 7 or adapt the chat logic from step 8.