Some scaffolding and prerequisites for the talk on developing apps using Zencoder.
- Install VSCode or JetBrains IDE
- Install Zencoder
- Install docker
- Install uvx and npx
- Sign up for Supabase account or spin up locally
Some of the MCP servers require extra data like paths or API tokens. Those you need to update in relevant section of the mcp config
{
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GRAFANA_API_KEY",
"-e",
"GRAFANA_URL",
"mcp/grafana"
],
"env": {
"GRAFANA_API_KEY": "API_KEY",
"GRAFANA_URL": "URL"
}
}For cloud deployment of Supabase:
{
"command": "npx",
"args": [
"-y",
"@supabase/mcp-server-supabase@latest",
"--read-only",
"--project-ref=<project-ref>"
],
"env": {
"SUPABASE_ACCESS_TOKEN": "ACCESS_TOKEN"
}
}For local deployment of supabase (just Postgres MCP):
{
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-postgres",
"CONNECTION_STRING"
]
}You can get connection string through supabase status or npx supabase status
.env.slack file contains bot token and team id. Create a new app at https://api.slack.com/apps and add it to your workspace. Then create a bot user and get its token. Also find team ID by going to Manage Workspace -> About -> Team ID.
More instructions here: https://github.com/modelcontextprotocol/servers/tree/main/src/slack#setup
SLACK_BOT_TOKEN=YOUR_TOKEN
SLACK_TEAM_ID=YOUR_TEAM_ID
Local MCP config:
{
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"--env-file",
"/PATH/TO/.env.slack",
"zencoderai/slack-mcp"
]
}Remote MCP config:
{
"type": "http",
"url": "https://slack-community.mcps.zencoder.ai/mcp",
"headers": {
"Authorization": "Bearer TOKEN"
}
}Create Github PAT https://github.com/github/github-mcp-server?tab=readme-ov-file#prerequisites and put it into .env.github file
GITHUB_PERSONAL_ACCESS_TOKEN=YOUR_GITHUB_PAT
MCP config:
{
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"--env-file",
"/PATH/TO/.env.github",
"ghcr.io/github/github-mcp-server"
]
}Possible intermediate steps are ommited due to undeterministic nature of LLM responses.
Create repository on github, clone locally, open in IDE
1.
Agent - Code
Model (optional) - Sonnet 4 Parallel Thinking
I want to build a website for the conference. Frontend part needs to be written in react, backend - in fastapi. I want to store the submissions in postgresql database. Create dockerfile for frontend and for backend, and docker compose file. Use tailwind for styling. Use supabase for auth.
Add the following pages:
Intro/Home Page: Main landing page for the conference
Submitted Talks Page: Shows all submitted talks with vote counts, visible to everyone but only authenticated users can vote
Login Page: Authentication for users
User Profile Page: List of user's submitted talks with statuses; personal information and settings
Talk Submission Page: Form for submitting new talk proposals, only available for authenticated users, fill in available user data automatically
Approved Talk Directory: List of all approved talks with link to speaker page with bio
FAQ/Help Page: Common questions and answers; support information
Contact Page: General inquiries, support requests, or media contacts
Each page should follow the same aesthetic and style without exception.
All DB queries should be done through backend
Agent - E2E test
Go to http://localhost:3000, check that clicking on talk submission button works. Try filling the form with some dummy data and submit talk. Then verify that the talk is shown on the submitted talks page
Agent - Code
Add filters to the page with talks
Agent - Code
Add monitoring for the backend api using grafana and prometheus along with some basic dashboards
Agent - Code
MCPs - grafana and/or postgres
How many requests does the app have in grafana?
Get all talks from postgres where speaker is {NAME}
Agent - Code
Let's now prepare deployment yaml that will allow us to deploy this app to kubernetes
Agent - Code
MCPs - github
Commit and push changes, create a pull request
Custom agents:
- Version updater
Find all the files listing dependencies, including docker files. For each dependency check online the very latest version even if it includes major version update, I want the most up to date version for each package, library and image. Output the list of planned updates before actually updating and ask for user's approval. Also make sure to have backups for any relevant resources, like databases. Once approved, update as planned, restore data from backups, and then verify everything works by making sure docker images build and run and existing tests are passing
- Commiter
You are tasked with creating nice commits. Before commiting check if there are any untracked files and check with the user if any of them should be tracked. Once you have the final list of files to be commited, summarize changes and suggest nice commit message which summarizes the changes made. Check for user approval for the commit message and if approved, make a commit
Use https://github.com/modelcontextprotocol/servers/tree/main/src/everything as a reference and create similar mcp server with stdio and streamable http transports for the conference. It should have three tools:
1. List all submitter talks
2. List talks subject to filters
3. Search talk by title
Create repository on github, clone locally, open in IDE
1.
Agent - Code
Model (optional) - Sonnet 4 Parallel Thinking
I want to build a website for the conference. Let's use NextJS for frontend/backend, and supabase for auth. Use tailwind for styling.
Add the following pages:
Intro/Home Page: Main landing page for the conference
Submitted Talks Page: Shows all submitted talks with vote counts, visible to everyone but only authenticated users can vote
Login Page: Authentication for users
User Profile Page: List of user's submitted talks with statuses; personal information and settings
Talk Submission Page: Form for submitting new talk proposals, only available for authenticated users, fill in available user data automatically
Approved Talk Directory: List of all approved talks with link to speaker page with bio
FAQ/Help Page: Common questions and answers; support information
Contact Page: General inquiries, support requests, or media contacts
Each page should follow the same aesthetic and style without exception.
All DB queries should be done through backend
Agent - E2E test
Go to http://localhost:3000, check that clicking on talk submission button works. Try filling the form with some dummy data and submit talk. Then verify that the talk is shown on the submitted talks page
Agent - Code
Add filters to the page with talks
Agent - Code
Add monitoring for the backend api using grafana and prometheus along with some basic dashboards
Agent - Code
MCPs - grafana and/or postgres
How many requests does the app have in grafana?
Get all talks from postgres where speaker is {NAME}
Agent - Code
Let's now prepare deployment yaml that will allow us to deploy this app to kubernetes
Agent - Code
MCPs - github
Commit and push changes, create a pull request
Custom agents:
- Version updater
Find all the files listing dependencies, including docker files. For each dependency check online the very latest version even if it includes major version update, I want the most up to date version for each package, library and image. Output the list of planned updates before actually updating and ask for user's approval. Also make sure to have backups for any relevant resources, like databases. Once approved, update as planned, restore data from backups, and then verify everything works by making sure docker images build and run and existing tests are passing
- Commiter
You are tasked with creating nice commits. Before commiting check if there are any untracked files and check with the user if any of them should be tracked. Once you have the final list of files to be commited, summarize changes and suggest nice commit message which summarizes the changes made. Check for user approval for the commit message and if approved, make a commit
Use https://github.com/modelcontextprotocol/servers/tree/main/src/everything as a reference and create similar mcp server with stdio and streamable http transports for the conference. It should have three tools:
1. List all submitter talks
2. List talks subject to filters
3. Search talk by title