はじめに 🎯

神威/KAMUIとRoo-clineの最新機能を使って、Rustをバックエンドにしたシンプルなダッシュボードアプリケーションを作成してみました。今回はSourceSage MCPを活用して、プロジェクト構造の分析から実装まで自動化しています。

神威/KAMUI ✖ Roo-cline ✖ SourceSageMCP で初めて Rustをバックエンドにしたシンプルなダッシュボード作ってみた！
これはマジで勉強になる！
＊かかった時間は36分！
＊8割の部分はRoo-clineのフルオートで作ってくれる！ https://t.co/DSctPW8Sp9 pic.twitter.com/raDZwUtOrb
— Maki@Sunwood AI Labs. (@hAru_mAki_ch) December 22, 2024

神威/KAMUIによる設計 🎯

まず、神威/KAMUIを使用してプロジェクトの構造を定義しました。KAMUIはstructure.yamlを生成し、これをもとにRoo-clineが実装を進めていきます。

src:
  structure.yaml:
    content: |-
      Nekoneko Technology Management Dashboard
      - バックエンド: Rust (Axum)
      - フロントエンド: Next.js (TypeScript)
      - データベース: PostgreSQL
      - 状態管理: Zustand
      - UI: Shadcn/ui, Tailwind CSS
      
      主要機能:
      - ダッシュボード
      - プロジェクト管理
      - リソース追跡
      - ユーザー認証
      
      agent選定理由: claude-3-5-sonnetは複雑なアーキテクチャの設計と実装に最適
      api選定理由: OpenAI APIを使用し、AIによる高度な分析機能を提供

    dependency: []
    agent: "claude-3-5-sonnet-20241022"
    api: "openai-gpt-4o"

この構造定義により、Roo-clineは必要な依存関係やファイル構造を理解し、効率的に実装を進めることができました。

プロジェクト概要 📋

プロジェクト名: nekoneko-technology-management-dashboard
フロントエンド: Next.js + TypeScript
バックエンド: Rust (Axum)
状態管理: Zustand
UIライブラリ: shadcn/ui

実装プロセス 🔄

1. プロジェクト作成とデプロイ

実行されたプロセス:

GitHubリポジトリの作成:

gh repo create nekoneko-technology-management-dashboard --public --description "ねこねこテクノロジー技術管理ダッシュボード" --confirm

プロジェクト構造の分析（Source Sage MCP使用）:

generate_structure
Arguments:
{
  "path": "C:/Prj/nekoneko-technology-management-dashboard"
}

アセットディレクトリの作成とSVGヘッダー生成
プロジェクトのREADME.md作成
Gitflowの初期化（aira-mcp-server使用）

最初のプロンプト:

nekoneko-technology-management-dashboard というGithubのリポジトリを作成して公開デプロイして

Roo-clineの自動処理:

GitHubリポジトリの作成
プロジェクトの初期構造の設定
README.mdとヘッダー画像の生成
Gitの初期化とプッシュ

2. フロントエンド実装

詳細な実行プロセス:

依存関係のインストール:

cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer

shadcn/uiの設定:

npx shadcn-ui@latest init

必要なコンポーネントの生成:

cd src/frontend && npm install clsx tailwind-merge tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-slot

TypeScript設定:

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ... その他の設定
  }
}

Zustandストアの実装:

	import { create } from 'zustand';
	interface Project {
	  id: string;
	  name: string;
	  status: string;
	  progress: number;
	}

	interface ProjectStore {
	  projects: Project[];
	  fetchProjects: () => Promise<void>;
	}

	export const useProjectStore = create<ProjectStore>((set) => ({
	  projects: [],
	  fetchProjects: async () => {
		const response = await fetch('http://localhost:3002/projects');
		const data = await response.json();
		set({ projects: data });
	  }
	}));

自動実行されたコマンド:

cd src/frontend && npm install @shadcn/ui zustand @types/node @types/react @types/react-dom typescript tailwindcss postcss autoprefixer

Roo-clineが自動生成したファイル:

components.json (shadcn/ui設定)
tailwind.config.js
プロジェクトストア (Zustand)
UIコンポーネント (Card, Button, Dialog)

3. バックエンド実装 (Rust)

詳細な実行プロセス:

Rustプロジェクトの作成と依存関係の追加:

cd src && cargo new backend
cd backend && cargo add tokio --features full
cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber
cargo add tower-http --features cors

メインサーバーコードの実装:

	use axum::{
		routing::{get, post},
		Router,
		Json,
	};
	use serde::{Deserialize, Serialize};
	use tower_http::cors::{CorsLayer, Any};

	#[derive(Debug, Serialize, Deserialize)]
	struct Project {
		id: String,
		name: String,
		status: String,
		progress: f32,
	}

	#[tokio::main]
	async fn main() {
		let cors = CorsLayer::new()
			.allow_origin(Any)
			.allow_methods(Any)
			.allow_headers(Any);

		let app = Router::new()
			.route("/projects", get(get_projects))
			.layer(cors);

		let listener = tokio::net::TcpListener::bind("127.0.0.1:3002")
			.await
			.unwrap();
		println!("Server running on http://localhost:3002");

		axum::serve(listener, app).await.unwrap();
	}

CORSの設定とエラーハンドリングの実装
エンドポイントの実装（GET /projects）

自動実行されたコマンド:

cd src && cargo new backend && cd backend && cargo add tokio --features full && cargo add axum serde serde_json sqlx tokio-postgres tower-http tracing tracing-subscriber

4. エラー対応と解決

発生したエラーと解決プロセス:

idnaクレートの互換性エラー:

error[E0658]: use of unstable library feature 'error_in_core'

解決手順:

Cargo.tomlの依存関係を調整
idnaクレートのバージョンを指定
一時的にデータベース関連の依存関係を削除

フロントエンドのポート競合:

# バックエンドポートを3002に変更
let listener = tokio::net::TcpListener::bind("127.0.0.1:3002").await.unwrap();

CORSエラーの解決:

let cors = CorsLayer::new()
    .allow_origin(Any)
    .allow_methods(Any)
    .allow_headers(Any);

TypeScript型エラーの解決:

適切な型定義の追加
インターフェースの実装

遭遇したエラー:

error[E0658]: use of unstable library feature 'error_in_core'

Roo-clineによる自動解決:

Cargo.tomlの依存関係の調整
idnaクレートのバージョン指定
データベース関連の依存関係の一時的な削除

コスト分析 💰

フロントエンド実装

トークン使用量: 160 / 15.0k
キャッシュヒット: +314.8k / 1.5m
API費用: $1.8544

バックエンド実装

トークン使用量: 112 / 4.3k
キャッシュヒット: +71.4k / 992.9k
API費用: $0.6307

総費用: $2.4851

まとめ ✨

Roo-clineとSourceSage MCPを使用することで、以下の利点がありました：

プロジェクト構造の自動分析と最適化
フロントエンド・バックエンドの自動実装
エラーの自動検知と解決
GitHubへの自動デプロイ

特に、Rustバックエンドの実装では、依存関係の解決やエラー対応を自動的に行ってくれる点が非常に便利でした。

リポジトリ 🔗

完成したプロジェクトは以下で確認できます：
nekoneko-technology-management-dashboard

使用ツール