Imagine an environment where your code editor understands your project’s context, seamlessly interacts with your GitHub repositories, and helps you build powerful AI agents with ease. This isn’t a futuristic dream; it’s a reality made possible by integrating cutting-edge tools like Claude Code, the remote GitHub MCP server, and the Google Agent Development Kit (ADK).
This blog post will explore the powerful synergy of this trio and walk you through the steps to build your own bidirectional streaming chat application using Google ADK, all orchestrated by the intelligent instructions you provide to Claude Code.
At the heart of this integration are three key components, each playing a vital role:
- Anthropic Claude Code: This is your intelligent coding companion. It’s an AI assistant designed to understand, write, and refactor code. What makes it particularly powerful in this context is its ability to follow complex instructions and interact with other development tools.
- Remote GitHub MCP Server: The Model-Client Protocol (MCP) server for GitHub acts as a secure bridge between your AI tools and the GitHub API. By using the remote, hosted version from GitHub released recently, you eliminate the need for a local setup. This allows Claude Code to directly and securely access your repositories to read documentation, understand your existing codebase, and even manage pull requests, all within your development environment.
- Agent Development Kit (ADK): The ADK is a powerful open source toolkit for building sophisticated AI agents. It provides the building blocks for creating applications that can interact with users and other services in a more natural and intelligent way. Its support for multi agents and bidirectional streaming are particularly useful for creating real-time applications like chat apps.
The integration of these three technologies offers unparalleled flexibility and benefits:
- Context-Aware Development: Claude Code can leverage the GitHub MCP server to read documentation and examples directly from your specified repositories. This means the AI has the necessary context to generate accurate and relevant code for your project.
- Seamless Workflow: You can stay within your development environment for the entire workflow, from fetching project requirements from GitHub to building, testing, and deploying your application.
- Rapid Prototyping: The ability to quickly instruct Claude Code to build an application based on resources in a GitHub repository dramatically accelerates the prototyping and development process.
- Enhanced AI Capabilities: By providing Claude Code with access to the ADK, you empower it to build more complex and interactive AI-powered applications.
To showcase the power of this integration, let’s walk through the process of building a bidirectional streaming chat app using the ADK. The following is based on a set of instructions provided to Claude Code to execute this task.
Before we begin, you need to configure your environment to run Claude Code. For the Vertex AI users, following the official instruction Claude Code with Google Vertex AI will enable the necessary APIs, set up authentication and billing, and configure the required environment variables.
Once you’ve completed those prerequisite steps, you’re ready to proceed.
Step 1: Configuring the Connection with .mcp.json
First, you need to tell Claude Code how to connect to the remote GitHub MCP server. This is done with a simple .mcp.json file in your project’s root directory. This file contains the server’s URL and your GitHub personal authentication token:
{
"mcpServers": {
"github": {
"type": "http",
"url": "https://api.githubcopilot.com/mcp/",
"headers": {
"Authorization": "Bearer "
}
}
}
}
Step 2: Providing Instructions to Claude Code
Next, you provide Claude Code with a clear and detailed set of instructions in a markdown file (the file name can be anything, like adk-chat-app.md). This file outlines the project’s goal, technology stack, requirements, testing procedures, and deployment steps.
Here is the instruction file that was used to generate our ADK streaming chat app:
# Project: ADK Bidirectional Streaming Application## Goal
- Build a bidirectional streamping app with Google ADK (Agent Development Kit)
## Tech Stack
- Server:
- FastAPI
- Google ADK (Agent Development Kit)
- SSE communication
- Client:
- Web client a JS based UI
- SSE communication
## Requirements
- Reference: Use the GitHub MCP server to read the following resources on GitHub to learn how to use
ADK:
- examples/python/snippets/streaming/adk-streaming/ from the google/adk-docs repository
- docs/streaming/custom-streaming.md from the google/adk-docs repository
- Environment:
- Use Python venv to install and run the server
- Check if .env exists. If not, create one
- Set SSL_CERT_FILE variable before running the server, as explained in the doc
- Kill any processes that uses the port number
## Tests
- Create and run a test client that ask a question "What time is it?" and verifies it receives the
current time from the agent. Run the test to make sure the server works as expected
## Deployment
- Explain to the developer how to access the app from the browser
## Success
- Make sure the test client runs without any errors
You may notice that the Requirements section has the instructions to read specific ADK documents and samples that should be used for building this app. One tip: you need to write specific documents and samples here, instead of specifying the entire ADK repository. Otherwise Claude Code will be overwhelmed with the large repository and starts to miss the details of it.
Also, you need to write your .env file as described in the ADK Quickstart guide. As it requires the authentication information, it’s one of the few things Claude Code can not write by itself.
Step 3: Let Claude Code Work Its Magic
With the configuration and instructions in place, you can now instruct Claude Code to execute the plan. Run claude on your environment, accept the usage of the MCP server, and let it start by requesting: read adk-chat-app.md and build the app. That’s it.
The AI will:
- Set up the project environment, including a Python virtual environment.
- Install the necessary dependencies like FastAPI and the Google ADK.
- Read the specified resources from the
google/adk-docsrepository on GitHub to understand how to implement bidirectional streaming with the ADK. - Write the FastAPI server code, including an endpoint for Server-Sent Events (SSE) communication.
- Create a web client with HTML and JavaScript to interact with the server.
- Develop a test client to verify the server’s functionality by asking for the current time.
- Provide instructions for deployment and how to access the application.
During the auto-coding process, you may need to accept requests from the tool for editing files and running commands, but basically you don’t need to write a single code by yourself. Even when Claude Code make some mistakes on writing the code, it will detect the error with the test and tries to fix it.
But be noted this is still a vibe coding with the 70% problem — meaning it requires human’s help to bring the code to 100% quality. Best for a Proof-of-Concept, but productnization would require more human efforts.
The successful creation of a functional chat application from a simple instruction file highlights the transformative potential of integrated AI development environments. By combining the intelligence of Claude Code, the secure connectivity of the remote GitHub MCP server, and the power of the Google ADK, developers can offload tedious tasks and focus on innovation. This streamlined and context-aware approach to development is not just a glimpse into the future; it’s a powerful workflow you can start using today. So, why not give it a try and see how it can supercharge your next project?
Source Credit: https://medium.com/google-cloud/accelerate-adk-development-with-claude-code-github-mcp-server-7a5052d481bc?source=rss—-e52cf94d98af—4
